/* N&D — Design Tokens */
:root {
  --color-primary: #00E5C7;
  --color-primary-hover: #00C9AE;
  --color-primary-active: #00A892;
  --color-primary-glow: rgba(0,229,199,0.35);
  --color-primary-soft: rgba(0,229,199,0.08);
  --color-accent: #1FFFB8;
  --color-accent-hover: #00E59C;
  --color-accent-glow: rgba(31,255,184,0.4);
  --color-deep: #0A4D44;
  --color-deep-hover: #0D6B5E;
  --color-bg-base: #03070A;
  --color-bg-surface: #080D12;
  --color-bg-elevated: #0E141B;
  --color-bg-overlay: #141B24;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B8C5D0;
  --color-text-muted: #6B7785;
  --color-text-disabled: #3A4451;
  --color-border: rgba(0,229,199,0.12);
  --color-border-hover: rgba(0,229,199,0.3);
  --color-border-strong: rgba(0,229,199,0.5);
  --color-border-neutral: rgba(255,255,255,0.06);
  --color-success: #00E5C7;
  --color-warning: #FFB627;
  --color-error: #FF4757;
  --color-info: #4DABF7;
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --text-display: clamp(3rem, 7vw, 5.5rem);
  --text-h1: clamp(2.25rem, 5vw, 3.75rem);
  --text-h2: clamp(1.75rem, 3.5vw, 2.75rem);
  --text-h3: clamp(1.375rem, 2.5vw, 1.875rem);
  --text-h4: clamp(1.125rem, 1.8vw, 1.375rem);
  --text-body: clamp(1rem, 1.2vw, 1.0625rem);
  --text-small: 0.875rem;
  --text-caption: 0.75rem;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.75;
  --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-widest: 0.24em;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
  --section-padding-y: clamp(3rem, 8vw, 8rem);
  --container-padding-x: clamp(1.25rem, 4vw, 3rem);
  --container-max: 1280px;
  --radius-none: 0; --radius-sm: 2px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 999px;
  --clip-corner: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 24px var(--color-primary-glow);
  --shadow-glow-strong: 0 0 48px var(--color-primary-glow), 0 0 96px var(--color-primary-soft);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms; --duration-base: 320ms; --duration-slow: 600ms;
  --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal: 400; --z-toast: 500;
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}

*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{min-height:100vh;line-height:1.5}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
::selection{background:var(--color-primary);color:var(--color-bg-base)}

body{font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-normal);color:var(--color-text-primary);background:var(--color-bg-base);
background-image:radial-gradient(ellipse 80% 50% at 50% -20%, var(--color-primary-soft), transparent 70%),radial-gradient(ellipse 60% 40% at 90% 100%, rgba(31,255,184,0.04), transparent 70%);
background-attachment:fixed;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--color-text-primary)}
h1{font-size:var(--text-h1)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}h4{font-size:var(--text-h4)}
p{line-height:var(--leading-relaxed);color:var(--color-text-secondary)}
code,pre,kbd{font-family:var(--font-mono);font-size:0.9em}
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-padding-x)}
.section{padding-block:var(--section-padding-y);position:relative}
.skip-link{position:absolute;top:-100px;left:var(--space-4);background:var(--color-primary);color:var(--color-bg-base);padding:var(--space-3) var(--space-4);font-weight:var(--weight-semibold);z-index:var(--z-toast);transition:top var(--duration-fast) var(--ease-out)}
.skip-link:focus{top:var(--space-4)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--color-bg-base)}
::-webkit-scrollbar-thumb{background:var(--color-deep);border-radius:var(--radius-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);font-family:var(--font-heading);font-size:var(--text-small);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:transform var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);clip-path:var(--clip-corner);border:none;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}
.btn--primary{background:var(--color-primary);color:var(--color-bg-base)}
.btn--primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--color-accent),var(--color-primary));opacity:0;transition:opacity var(--duration-base) var(--ease-out);z-index:-1}
.btn--primary:hover{box-shadow:var(--shadow-glow-strong)}
.btn--primary:hover::before{opacity:1}
.btn--outline{background:transparent;color:var(--color-primary);box-shadow:inset 0 0 0 1.5px var(--color-primary)}
.btn--outline::before{content:'';position:absolute;inset:0;background:var(--color-primary);transform:translateY(100%);transition:transform var(--duration-base) var(--ease-out);z-index:-1}
.btn--outline:hover{color:var(--color-bg-base)}
.btn--outline:hover::before{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--color-text-primary);padding-inline:var(--space-4)}
.btn--ghost:hover{color:var(--color-primary)}
.btn--lg{padding:var(--space-6) var(--space-12);font-size:var(--text-body)}
.btn--sm{padding:var(--space-3) var(--space-6);font-size:var(--text-caption)}
.btn__icon{transition:transform var(--duration-base) var(--ease-out)}
.btn:hover .btn__icon{transform:translateX(4px)}

/* Cards */
.card{position:relative;background:var(--color-bg-elevated);padding:var(--space-8);border:1px solid var(--color-border-neutral);clip-path:var(--clip-corner);transition:transform var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;width:60px;height:1px;background:var(--color-primary);transition:width var(--duration-slow) var(--ease-out)}
.card:hover{transform:translateY(-6px);border-color:var(--color-border-hover);background:var(--color-bg-overlay)}
.card:hover::before{width:100%}
.card__icon{width:56px;height:56px;display:grid;place-items:center;background:var(--color-primary-soft);color:var(--color-primary);margin-bottom:var(--space-6);transition:background var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.card:hover .card__icon{background:var(--color-primary);color:var(--color-bg-base);transform:rotate(-5deg) scale(1.05)}
.card__title{font-size:var(--text-h4);margin-bottom:var(--space-3)}
.card__desc{color:var(--color-text-secondary);font-size:var(--text-small);line-height:var(--leading-relaxed);margin-bottom:var(--space-6)}
.card__link{color:var(--color-primary);font-weight:var(--weight-semibold);font-size:var(--text-small);letter-spacing:var(--tracking-wide);text-transform:uppercase;display:inline-flex;align-items:center;gap:var(--space-2)}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-family:var(--font-mono);font-size:var(--text-caption);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-primary);background:var(--color-primary-soft);border:1px solid var(--color-border);border-radius:var(--radius-pill)}
.badge::before{content:'';width:6px;height:6px;background:var(--color-primary);border-radius:50%;box-shadow:0 0 8px var(--color-primary);animation:pulse 2s var(--ease-in-out) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(1.2)}}

/* Header + Nav */
.header{position:fixed;top:0;left:0;right:0;z-index:var(--z-fixed);padding-block:var(--space-4);transition:background var(--duration-base) var(--ease-out),backdrop-filter var(--duration-base) var(--ease-out),padding var(--duration-base) var(--ease-out)}
.header.is-scrolled{background:rgba(3,7,10,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border-neutral);padding-block:var(--space-3)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.header__logo{font-family:var(--font-display);font-size:1.5rem;font-weight:var(--weight-bold);color:var(--color-text-primary);letter-spacing:var(--tracking-tight);display:flex;align-items:center;gap:var(--space-2)}
.header__logo-mark{color:var(--color-primary)}
.header .header__logo-img{display:block;width:auto;max-width:360px;max-height:72px;height:72px;object-fit:contain;min-height:32px;flex-shrink:0}
.footer .header__logo-img{display:block;width:auto;max-width:280px;max-height:60px;height:60px;object-fit:contain;min-height:28px;flex-shrink:0}
.nav{display:flex;align-items:center;gap:var(--space-8)}
.nav__link{position:relative;font-size:var(--text-small);font-weight:var(--weight-medium);color:var(--color-text-secondary);transition:color var(--duration-fast) var(--ease-out);padding-block:var(--space-2)}
.nav__link::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--color-primary);transition:width var(--duration-base) var(--ease-out)}
.nav__link:hover,.nav__link.is-active{color:var(--color-text-primary)}
.nav__link:hover::after,.nav__link.is-active::after{width:100%}
.nav__toggle{display:none;width:40px;height:40px;position:relative;z-index:var(--z-modal)}
.nav__toggle span{display:block;width:24px;height:2px;background:var(--color-text-primary);margin:5px auto;transition:transform var(--duration-base) var(--ease-out),opacity var(--duration-base) var(--ease-out)}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width: 1024px){
  .nav__toggle{display:block}
  .nav{position:fixed;inset:0;background:var(--color-bg-base);flex-direction:column;justify-content:center;transform:translateX(100%);transition:transform var(--duration-base) var(--ease-out);gap:var(--space-6)}
  .nav.is-open{transform:translateX(0)}
  .nav__link{font-size:var(--text-h3)}
}
@media (max-width: 768px){
  .header .header__logo-img{max-width:78vw;max-height:64px;height:64px}
  .footer .header__logo-img{max-width:240px;max-height:52px;height:52px}
}

/* Forms */
.form-group{position:relative;margin-bottom:var(--space-6)}
.form-label{display:block;font-size:var(--text-caption);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:var(--space-2)}
.form-input,.form-textarea,.form-select{width:100%;padding:var(--space-4) var(--space-5);background:var(--color-bg-elevated);border:1px solid var(--color-border-neutral);color:var(--color-text-primary);font-size:var(--text-body);font-family:var(--font-body);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--color-primary);background:var(--color-bg-overlay);box-shadow:0 0 0 3px var(--color-primary-soft)}
.form-input:invalid:not(:placeholder-shown),.form-textarea:invalid:not(:placeholder-shown){border-color:var(--color-error)}
.form-textarea{resize:vertical;min-height:140px}
.form-feedback{font-size:var(--text-caption);margin-top:var(--space-2);color:var(--color-error);opacity:0;transform:translateY(-4px);transition:opacity var(--duration-fast),transform var(--duration-fast)}
.form-feedback.is-visible{opacity:1;transform:translateY(0)}

/* Footer */
.footer{background:var(--color-bg-surface);border-top:1px solid var(--color-border-neutral);padding-block:var(--space-20) var(--space-8);margin-top:var(--space-32);position:relative}
.footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--color-primary),transparent)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--space-12);margin-bottom:var(--space-16)}
@media (max-width:768px){.footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}}
.footer__title{font-size:var(--text-caption);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-6)}
.footer__links{display:flex;flex-direction:column;gap:var(--space-3)}
.footer__links a{color:var(--color-text-secondary);font-size:var(--text-small);transition:color var(--duration-fast) var(--ease-out)}
.footer__links a:hover{color:var(--color-primary)}
.footer__social{display:flex;gap:var(--space-3);margin-top:var(--space-6)}
.footer__social a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--color-border-neutral);color:var(--color-text-secondary);transition:all var(--duration-base) var(--ease-out)}
.footer__social a:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-3px)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);padding-top:var(--space-8);border-top:1px solid var(--color-border-neutral);font-size:var(--text-caption);color:var(--color-text-muted)}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal--delay-1{transition-delay:100ms}
.reveal--delay-2{transition-delay:200ms}
.reveal--delay-3{transition-delay:300ms}

/* Utils */
.text-gradient{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-block;font-family:var(--font-mono);font-size:var(--text-caption);font-weight:var(--weight-medium);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-4)}
.eyebrow::before{content:'// ';opacity:0.5}
.divider-glow{height:1px;background:linear-gradient(90deg,transparent,var(--color-border-strong),transparent);margin-block:var(--space-16)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}