/* ============================================================
   Elqano - Global CSS
   Shared across all pages: reset, variables, nav, footer, utils
   ============================================================ */

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* VARIABLES */
:root{
  --purple:#9747FF;
  --orange:#FB6D26;
  --black:#0D0D0D;
  --dark:#07070A;
  --gray:#5A5A5A;
  --muted:#9A9A9A;
  --div:#E5E5E5;
  --white:#FFFFFF;
  --cream:#F9F8F5;
}

/* BASE */
html{scroll-behavior:smooth;background:var(--dark);}
body{font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.5;color:var(--black);background:var(--dark);overflow-x:hidden;}

/* NOISE OVERLAY */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9999;opacity:0.5;
}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;gap:16px;padding:0 56px;height:64px;background:rgba(7,7,10,0.85);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.06);transform:translateY(0);transition:transform 0.35s ease;}
nav.nav-hidden{transform:translateY(-100%);}
.nav-logo{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:500;letter-spacing:-0.05em;color:var(--white);text-decoration:none;}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none;margin-left:auto;}
.nav-links a{font-size:14px;font-weight:500;letter-spacing:-0.015em;color:rgba(255,255,255,0.45);text-decoration:none;transition:color 0.2s;}
.nav-links a:hover{color:var(--white);}
.nav-links a.current{color:var(--white);}
.btn-nav{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;background:var(--white);color:var(--black)!important;font-size:14px;font-weight:600;letter-spacing:-0.015em;border-radius:6px;text-decoration:none;transition:background 0.2s,transform 0.15s;}
.btn-nav:hover{background:#f0f0f0!important;transform:translateY(-1px);}
.btn-nav-free{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;background:var(--purple);color:var(--white)!important;font-size:14px;font-weight:600;letter-spacing:-0.015em;border-radius:6px;text-decoration:none;transition:background 0.2s,transform 0.15s;}
.btn-nav-free:hover{background:#8535f0!important;transform:translateY(-1px);}
.lang-select{position:relative;}
.lang-current{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:4px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;letter-spacing:-0.01em;color:rgba(255,255,255,0.45);padding:4px 0;transition:color 0.2s;}
.lang-current:hover{color:rgba(255,255,255,0.8);}
.lang-chevron{transition:transform 0.15s;}
.lang-select.open .lang-chevron{transform:rotate(180deg);}
.lang-dropdown{position:absolute;top:calc(100% + 10px);right:-12px;background:rgba(14,14,18,0.97);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:4px;min-width:130px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all 0.18s ease;backdrop-filter:blur(16px);z-index:300;}
.lang-select.open .lang-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.lang-option{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:7px;text-decoration:none;color:rgba(255,255,255,0.55);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;transition:background 0.15s,color 0.15s;letter-spacing:-0.01em;}
.lang-option:hover{background:rgba(255,255,255,0.07);color:var(--white);}
.lang-option-code{font-weight:600;color:rgba(255,255,255,0.8);}

/* FOOTER */
footer{padding:40px 56px;border-top:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:space-between;gap:40px;background:var(--dark);}
.f-left{display:flex;flex-direction:column;gap:8px;}
.f-logo{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:500;letter-spacing:-0.05em;color:var(--white);text-decoration:none;}
.f-meta{font-family:'Roboto Mono',monospace;font-size:11px;color:rgba(255,255,255,0.2);letter-spacing:-0.01em;line-height:1.6;}
.f-meta a{color:rgba(255,255,255,0.3);text-decoration:none;transition:color 0.2s;}
.f-meta a:hover{color:var(--white);}
.f-right{display:flex;flex-direction:column;align-items:flex-end;gap:16px;}
.f-links{display:flex;gap:24px;list-style:none;flex-wrap:wrap;justify-content:flex-end;}
.f-links a{font-size:13px;color:rgba(255,255,255,0.28);text-decoration:none;transition:color 0.2s;}
.f-links a:hover{color:var(--white);}
.f-bottom{display:flex;align-items:center;gap:20px;}
.f-copy{font-family:'Roboto Mono',monospace;font-size:11px;color:rgba(255,255,255,0.15);letter-spacing:-0.01em;}
.f-linkedin{color:rgba(255,255,255,0.2);transition:color 0.2s;display:flex;align-items:center;}
.f-linkedin:hover{color:rgba(255,255,255,0.7);}

/* REVEAL ANIMATION */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.8s ease,transform 0.8s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* HAMBURGER */
.nav-hamburger{
  display:none;
  flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;
  color:var(--white);padding:6px 2px;flex-shrink:0;
}
.nav-hamburger span{
  display:block;width:22px;height:1.5px;
  background:currentColor;
  transition:transform 0.25s ease,opacity 0.15s ease;
}
nav.open .nav-hamburger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
nav.open .nav-hamburger span:nth-child(2){opacity:0;transform:scaleX(0);}
nav.open .nav-hamburger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* RESPONSIVE - NAV / FOOTER */
@media(max-width:1100px){
  nav{padding:0 32px;}
  footer{padding:32px;flex-direction:column;gap:24px;text-align:center;}
  .f-right{align-items:center;}
  .f-links{justify-content:center;}
}
@media(max-width:768px){
  .nav-hamburger{display:flex;}
  .nav-links{display:none!important;}

  nav.open .nav-links{
    display:flex!important;
    flex-direction:column;
    position:fixed;
    top:64px;left:0;right:0;
    height:calc(100dvh - 64px);
    background:rgba(7,7,10,0.97);
    backdrop-filter:blur(24px);
    padding:20px 24px 48px;
    overflow-y:auto;z-index:199;
    align-items:stretch;
    border-top:1px solid rgba(255,255,255,0.06);
    gap:0;
  }
  nav.open .nav-links li{display:list-item!important;}
  nav.open .nav-links>li>a{
    display:block!important;
    font-size:19px!important;font-weight:500;
    color:rgba(255,255,255,0.6)!important;
    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,0.06);
    letter-spacing:-0.02em;
  }
  nav.open .nav-links>li>a.current,
  nav.open .nav-links>li>a:hover{color:var(--white)!important;}
  nav.open .btn-nav-free,
  nav.open .btn-nav{
    display:flex!important;
    width:100%!important;justify-content:center;
    margin-top:12px;padding:14px 20px!important;
    font-size:15px!important;
  }
  .lang-select{margin-left:auto;}

  footer{padding:28px 20px!important;flex-direction:column;gap:20px;text-align:center;}
  .f-right{align-items:center;}
  .f-links{justify-content:center;}
}