/* ===== Design tokens (Syntactic Logic) ===== */
:root{
  --background:#0e141a;
  --surface:#0e141a;
  --surface-container-lowest:#080f14;
  --surface-container-low:#161c22;
  --surface-container:#1a2026;
  --surface-container-high:#242b31;
  --surface-container-highest:#2f353c;
  --surface-variant:#2f353c;
  --surface-bright:#333a40;
  --on-surface:#dde3eb;
  --on-surface-variant:#bcc9cd;
  --on-background:#dde3eb;
  --outline:#869397;
  --outline-variant:#3d494c;
  --primary:#4cd7f6;
  --on-primary:#003640;
  --primary-container:#06b6d4;
  --secondary:#ffb95f;
  --on-secondary:#472a00;

  --container-max:1280px;
  --gutter:24px;
  --margin-mobile:20px;
  --stack-sm:8px;
  --stack-md:16px;
  --stack-lg:32px;
  --section-gap:120px;

  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ===== Reset / base ===== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--background);
  color:var(--on-background);
  font-family:var(--font-body);
  font-size:16px;line-height:24px;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s,color .3s;
}
body.light{
  --background:#f5f7fa;--surface:#ffffff;--surface-container-lowest:#eef1f5;
  --surface-container-low:#ffffff;--surface-container:#f0f3f7;--surface-container-high:#e6eaf0;
  --surface-container-highest:#dde3eb;--surface-variant:#e2e8f0;--on-surface:#11181f;
  --on-surface-variant:#475059;--on-background:#11181f;--outline:#5b6770;--outline-variant:#c4ccd4;
  --primary:#0891b2;--primary-container:#06b6d4;--secondary:#d97706;
}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
.mono{font-family:var(--font-mono);}
.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  vertical-align:middle;line-height:1;
}
.ico-sm{font-size:14px;}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);}
::selection{background:rgba(76,215,246,.3);}

/* ===== Navigation ===== */
.nav{
  position:fixed;top:0;width:100%;z-index:50;
  background:rgba(14,20,26,.7);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(76,215,246,.1);
}
.nav__inner{
  display:flex;justify-content:space-between;align-items:center;height:64px;
  max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);
}
.nav__logo{font-size:24px;font-weight:700;color:var(--primary);letter-spacing:-.04em;}
.nav__links{display:none;gap:var(--stack-lg);align-items:center;}
.nav__link{color:var(--on-surface-variant);transition:color .2s;}
.nav__link:hover{color:var(--primary);}
.nav__link--active{color:var(--primary);font-weight:700;border-bottom:2px solid var(--primary);padding-bottom:4px;}
.nav__actions{display:flex;align-items:center;gap:var(--stack-md);}
.nav__btn{
  background:none;border:none;cursor:pointer;padding:8px;border-radius:9999px;
  color:var(--on-surface-variant);display:inline-flex;transition:background .2s,color .2s,transform .15s;
}
.nav__btn:hover{background:var(--surface-variant);color:var(--primary);}
.nav__btn:active{transform:scale(.95);}
.nav__menu{display:inline-flex;}
@media(min-width:768px){
  .nav__links{display:flex;}
  .nav__menu{display:none;}
}
.scroll-progress-line{height:1px;background:var(--primary);width:0;transition:width .1s ease-out;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;
  padding:12px 32px;border-radius:8px;border:1px solid transparent;
  transition:all .2s;
}
.btn:active{transform:scale(.95);}
.btn--primary{background:var(--primary);color:var(--on-primary);box-shadow:0 0 15px rgba(76,215,246,.3);}
.btn--primary:hover{transform:scale(.97);}
.btn--outline{background:none;border-color:var(--outline);color:var(--on-surface);}
.btn--outline:hover{background:var(--surface-variant);}
.btn--amber{background:none;border-color:var(--secondary);color:var(--secondary);}
.btn--amber:hover{background:rgba(255,185,95,.1);}

/* ===== Footer ===== */
.footer{width:100%;padding:var(--stack-lg) 0;border-top:1px solid var(--outline-variant);background:var(--surface);}
.footer__inner{
  display:flex;flex-direction:column;align-items:center;gap:var(--stack-md);
  max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);
}
.footer__brand{display:flex;flex-direction:column;align-items:center;gap:4px;}
.footer__logo{font-size:20px;font-weight:700;color:var(--on-surface);}
.footer__copy{font-size:14px;color:var(--on-surface-variant);opacity:.7;}
.footer__links{display:flex;gap:var(--stack-lg);align-items:center;}
.footer__links a{font-family:var(--font-mono);font-size:14px;color:var(--on-surface-variant);transition:color .2s;}
.footer__links a:hover{color:var(--secondary);}
@media(min-width:768px){
  .footer__inner{flex-direction:row;justify-content:space-between;}
  .footer__brand{align-items:flex-start;}
}

/* ===== Decorative backgrounds ===== */
.bg-grid{
  position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(to right, rgba(76,215,246,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(76,215,246,.05) 1px, transparent 1px);
  background-size:40px 40px;
}
.blob{position:absolute;border-radius:9999px;z-index:-1;}
.blob--cyan{top:0;right:0;width:500px;height:500px;background:rgba(76,215,246,.05);filter:blur(120px);transform:translate(50%,-50%);}
.blob--amber{bottom:0;left:0;width:400px;height:400px;background:rgba(255,185,95,.05);filter:blur(100px);transform:translate(-50%,50%);}

/* ===== Hero ===== */
.hero-main{position:relative;padding-top:64px;overflow:hidden;}
.hero{min-height:calc(100vh - 64px);display:flex;align-items:center;}
.hero__grid{
  display:grid;grid-template-columns:1fr;gap:var(--stack-lg);align-items:center;width:100%;
  padding-top:var(--stack-lg);padding-bottom:var(--stack-lg);
}
.hero__content{order:2;display:flex;flex-direction:column;gap:var(--stack-md);}
.hero__visual{order:1;position:relative;display:flex;justify-content:center;align-items:center;}
@media(min-width:768px){
  .hero__grid{grid-template-columns:1fr 1fr;gap:64px;}
  .hero__content{order:1;}
  .hero__visual{order:2;}
}
.hero__badge{
  align-self:flex-start;display:inline-flex;align-items:center;
  padding:4px 12px;border-radius:9999px;
  background:rgba(76,215,246,.1);border:1px solid rgba(76,215,246,.2);
}
.hero__badge .mono{font-size:14px;color:var(--primary);}
.hero__title{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--on-surface);}
.hero__subtitle{font-size:24px;font-weight:700;color:var(--primary);}
.hero__desc{font-size:18px;line-height:28px;color:var(--on-surface-variant);max-width:36rem;}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;padding-top:16px;}
.hero__stats{display:flex;align-items:center;gap:24px;padding-top:48px;}
.stat{display:flex;flex-direction:column;}
.stat__num{font-size:24px;font-weight:700;color:var(--on-surface);}
.stat__label{font-size:14px;color:var(--on-surface-variant);}
.stat__divider{width:1px;height:40px;background:var(--outline-variant);}
@media(min-width:768px){.hero__title{font-size:60px;line-height:72px;}}

/* Visual */
.hero__aura{position:absolute;inset:0;background:rgba(76,215,246,.1);border-radius:9999px;filter:blur(100px);transform:scale(.75);transition:transform .7s;}
.hero__visual:hover .hero__aura{transform:scale(.9);}
.hero__float{position:relative;padding:16px;animation:float 6s ease-in-out infinite;}
.hero__img{width:100%;max-width:500px;height:auto;filter:drop-shadow(0 0 30px rgba(76,215,246,.2));}
.float-tag{
  position:absolute;padding:8px 16px;border-radius:6px;backdrop-filter:blur(4px);
  background:var(--surface-container);
}
.float-tag .mono{font-size:14px;display:inline-flex;align-items:center;gap:8px;}
.float-tag--cyan{top:-16px;right:-16px;border:1px solid rgba(76,215,246,.3);}
.float-tag--cyan .mono{color:var(--primary);}
.float-tag--amber{bottom:-32px;left:-16px;border:1px solid rgba(255,185,95,.3);}
.float-tag--amber .mono{color:var(--secondary);}
.dot{width:8px;height:8px;border-radius:9999px;display:inline-block;}
.dot--cyan{background:var(--primary);animation:pulse 2s infinite;}

.circuit-trace{height:1px;width:100%;margin:var(--section-gap) 0;background:linear-gradient(to right,transparent,rgba(76,215,246,.2),transparent);}

@keyframes float{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-20px) rotate(1deg);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}