
/* LogicGrids — Base Reset & Design Tokens */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --space-1:  0.25rem; --space-2:  0.5rem;  --space-3:  0.75rem;
  --space-4:  1rem;    --space-5:  1.25rem; --space-6:  1.5rem;
  --space-8:  2rem;    --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px;
  --content-narrow: 640px; --content-default: 960px; --content-wide: 1200px;
  --transition-fast: 150ms cubic-bezier(0.16,1,0.3,1);
  --transition-interactive: 200ms cubic-bezier(0.16,1,0.3,1);
  --transition-slow: 400ms cubic-bezier(0.16,1,0.3,1);
  --color-bg:            #060913;
  --color-surface:       #0b0d1a;
  --color-surface-2:     #101326;
  --color-surface-glass: rgba(16,19,38,0.65);
  --color-border:        rgba(130,100,255,0.15);
  --color-border-bright: rgba(130,100,255,0.35);
  --color-divider:       rgba(255,255,255,0.06);
  --color-text:          #e8eaf6;
  --color-text-muted:    #8b93b8;
  --color-text-faint:    #4a5070;
  --color-purple:   #8b5cf6; --color-purple-2: #a78bfa;
  --color-cyan:     #22d3ee; --color-cyan-2:   #67e8f9;
  --color-blue:     #3b82f6; --color-magenta:  #e879f9;
  --color-teal:     #2dd4bf;
  --color-primary:       var(--color-purple);
  --color-primary-hover: var(--color-purple-2);
  --glow-purple: 0 0 24px rgba(139,92,246,0.45),0 0 60px rgba(139,92,246,0.18);
  --glow-cyan:   0 0 24px rgba(34,211,238,0.4), 0 0 60px rgba(34,211,238,0.15);
  --shadow-sm: 0 1px 3px 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-glass: 0 8px 32px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.06);
  --gradient-primary: linear-gradient(135deg,var(--color-purple),var(--color-cyan));
  --gradient-hero: linear-gradient(135deg,#8b5cf6 0%,#3b82f6 40%,#22d3ee 100%);
  --gradient-text: linear-gradient(135deg,var(--color-purple-2) 0%,var(--color-cyan) 60%,var(--color-magenta) 100%);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--space-20);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background-color:var(--color-bg);line-height:1.65;overflow-x:hidden}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
ul[role="list"],ol[role="list"]{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.15;font-family:var(--font-display)}
p,li,figcaption{text-wrap:pretty}
button{cursor:pointer;background:none;border:none}
table{border-collapse:collapse;width:100%}
a{color:inherit;text-decoration:none}
::selection{background:rgba(139,92,246,0.3);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-purple);outline-offset:3px;border-radius:var(--radius-sm)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.container{max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6)}
.container--narrow{max-width:var(--content-narrow)}
.container--default{max-width:var(--content-default)}
.gradient-text{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.glass-card{background:var(--color-surface-glass);border:1px solid var(--color-border);border-radius:var(--radius-xl);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-glass)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1),transform 0.65s cubic-bezier(0.16,1,0.3,1)}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:0.1s}.reveal-delay-2{transition-delay:0.2s}.reveal-delay-3{transition-delay:0.3s}.reveal-delay-4{transition-delay:0.4s}.reveal-delay-5{transition-delay:0.5s}
