/* -------------------------
   GOLDEN CSS (Visual Law)
   Purpose: Enforce tokens, centering, spacing, and critical interactions.
   Load order: LAST, to override weak/rogue styles.
--------------------------*/

/* TOKENS */
:root{
  /* Colors */
  --bg-primary:#0a0e27; --bg-secondary:#1a1f3a; --bg-black:#000;
  --text-primary:#e0e6ed; --text-secondary:#8892a6; --text-tertiary:#a0aec0; --text-muted:#6b7280;
  --brand:#4f46e5; --brand-hover:#4338ca;
  --error:#ef4444; --error-2:#dc2626;
  --w-05:rgba(255,255,255,.05); --w-02:rgba(255,255,255,.02); --w-01:rgba(255,255,255,.1);
  --brand-10:rgba(79,70,229,.1); --brand-30:rgba(79,70,229,.3); --brand-60:rgba(79,70,229,.6); --brand-08:rgba(79,70,229,.08);
  --err-10:rgba(239,68,68,.1); --err-05:rgba(220,38,68,.05); --err-30:rgba(239,68,68,.3);
  --overlay:rgba(10,14,39,.98); --header-bg:rgba(10,14,39,.95);

  /* Gradients */
  --grad-main:linear-gradient(180deg,#0a0e27 0%,#000 100%);
  --grad-hero:radial-gradient(ellipse at center,#1a1f3a 0%,#0a0e27 70%);
  --grad-closing:linear-gradient(180deg,#0a0e27 0%,#1a1f3a 100%);
  --grad-text-hero:linear-gradient(135deg,#fff 0%,#a0aec0 100%);
  --grad-error:linear-gradient(135deg,rgba(239,68,68,.1),rgba(220,38,38,.05));
  --grad-confidence:linear-gradient(90deg,#ef4444,#dc2626);

  /* Typography */
  --ff:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --fw-r:400; --fw-m:500; --fw-sb:600; --fw-b:700;

  /* Font sizes */
  --fs-hero-h1:clamp(2.5rem,8vw,5rem);
  --fs-hero-p:clamp(1.1rem,2.5vw,1.5rem);
  --fs-title:clamp(2rem,5vw,3.5rem);
  --fs-sub:clamp(1rem,2vw,1.25rem);
  --fs-body:1.1rem; --fs-cta:1.1rem; --fs-logo:1.5rem; --fs-menu:2.5rem;
  --fs-pillartitle:1.2rem; --fs-pillardesc:.95rem; --fs-principle:1.4rem; --fs-principle-no:.9rem;

  /* Line heights */
  --lh-tight:1.1; --lh-snug:1.2; --lh-normal:1.6; --lh-relaxed:1.7; --lh-loose:1.8;

  /* Spacing */
  --xs:.5rem; --sm:1rem; --md:1.5rem; --lg:2rem; --xl:3rem; --xxl:4rem; --xxxl:6rem;

  /* Paddings (section/header) */
  --section-pad-d:6rem 2rem; --section-pad-m:4rem 1.5rem;
  --header-pad-d:1.5rem 3rem; --header-pad-m:1rem 1.5rem;

  /* Margins rhythm */
  --mb-title:3rem; --mb-sub:4rem; --mv-visual:3rem; --mb-bullet:1rem; --mt-button:2rem;

  /* Gaps */
  --gap-arch:2rem; --gap-principles:1.5rem; --gap-menu:2rem; --gap-hamburger:6px; --gap-confidence:10px;

  /* Radius */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:50px;

  /* Sizes */
  --max-text:800px; --max-sub:900px; --max-visual:1000px; --max-closing:700px;
  --h-problem-d:400px; --h-problem-m:300px;
  --h-conf:8px; --w-conf:200px; --w-hamb:28px; --h-hamb:2px;

  /* Z */
  --z-header:1000; --z-menu:1500; --z-hamb:2000;

  /* Motion + filters */
  --blur:blur(10px);
}

/* RESET + BASE */
*{box-sizing:border-box}html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ff);color:var(--text-primary);
  background:var(--grad-main);overflow-x:hidden;
}

/* Header */
header{
  position:fixed;inset:0 auto auto 0;right:0;
  padding:var(--header-pad-d);background:var(--header-bg);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  z-index:var(--z-header);border-bottom:1px solid var(--w-05);
}
.logo{font-size:var(--fs-logo);font-weight:var(--fw-sb);letter-spacing:-.5px;text-transform:none}

/* Sections (visual law) */
section{
  min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;padding:var(--section-pad-d);position:relative;
}
.hero{background:var(--grad-hero)}
.hero h1{
  font-size:var(--fs-hero-h1);font-weight:var(--fw-b);text-align:center;line-height:var(--lh-tight);margin-bottom:2rem;
  background:var(--grad-text-hero);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{
  font-size:var(--fs-hero-p);color:var(--text-secondary);max-width:var(--max-text);text-align:center;line-height:var(--lh-normal);
}
.section-title{
  font-size:var(--fs-title);font-weight:var(--fw-b);text-align:center;margin-bottom:var(--mb-title);line-height:var(--lh-snug);
}
.section-subtitle{
  font-size:var(--fs-sub);color:var(--text-secondary);max-width:var(--max-sub);text-align:center;line-height:var(--lh-relaxed);margin-bottom:var(--mb-sub);
}

/* Visuals */
.problem-visual{
  width:100%;max-width:var(--max-visual);height:var(--h-problem-d);
  background:var(--w-02);border:1px solid var(--w-05);border-radius:var(--r-2xl);
  margin:var(--mv-visual);position:relative;overflow:hidden;
}
.ai-statement{
  position:absolute;padding:1.5rem 2rem;background:var(--grad-error);
  border:1px solid var(--err-30);border-radius:var(--r-lg);font-size:1.1rem;animation:fadeWrong 3s ease-in-out infinite;
}
.confidence-bar{position:absolute;bottom:30px;right:30px;display:flex;align-items:center;gap:var(--gap-confidence)}
.confidence-meter{width:var(--w-conf);height:var(--h-conf);background:var(--w-01);border-radius:var(--r-sm);overflow:hidden}
.confidence-fill{height:100%;width:98%;background:var(--grad-confidence);animation:pulse 2s ease-in-out infinite}

/* Architecture */
.architecture-visual{
  width:100%;max-width:var(--max-visual);margin:var(--mv-visual);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-arch);
}
.pillar{
  background:var(--w-02);border:1px solid var(--brand-30);border-radius:var(--r-lg);padding:2rem;text-align:center;
  transition:transform .4s ease, background .4s ease, border-color .4s ease;cursor:pointer;
}
.pillar:hover{background:var(--brand-10);border-color:var(--brand-60);transform:translateY(-10px)}
.pillar-icon{font-size:2.5rem;margin-bottom:1rem}
.pillar-title{font-size:var(--fs-pillartitle);font-weight:var(--fw-sb);margin-bottom:.5rem}
.pillar p{color:var(--text-secondary);margin-top:1rem;font-size:var(--fs-pillardesc)}

/* Principles */
.principles-grid{display:grid;grid-template-columns:1fr;gap:var(--gap-principles);max-width:900px;width:100%}
.principle{
  background:var(--w-02);border-left:3px solid var(--brand);padding:2rem;border-radius:var(--r-md);
  transition:background .3s ease, padding .3s ease, border-left-width .3s ease;cursor:pointer;
}
.principle:hover{background:var(--brand-08);border-left-width:6px;padding-left:2.5rem}
.principle-number{color:var(--brand);font-weight:var(--fw-b);font-size:var(--fs-principle-no);margin-bottom:.5rem}
.principle-title{font-size:var(--fs-principle);font-weight:var(--fw-sb);margin-bottom:.8rem}
.principle-description{color:var(--text-secondary);line-height:var(--lh-normal);max-height:0;overflow:hidden;transition:max-height .3s ease}
.principle:hover .principle-description{max-height:100px}

/* Ethics box */
.ethics-example{
  background:var(--w-02);border:1px solid var(--w-05);border-radius:var(--r-xl);padding:3rem;
  max-width:var(--max-text);margin:2rem 0;font-style:italic;color:var(--text-tertiary);line-height:var(--lh-loose);
}

/* Closing */
.closing{background:var(--grad-closing)}
.cta-button{
  display:inline-block;padding:1.2rem 3rem;background:var(--brand);color:#fff;text-decoration:none;
  border-radius:var(--r-full);font-weight:var(--fw-sb);font-size:var(--fs-cta);margin-top:var(--mt-button);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.cta-button:hover{background:var(--brand-hover);transform:translateY(-3px);box-shadow:0 10px 30px rgba(79,70,229,.4)}

/* Bullets */
.bullet-point{color:var(--text-secondary);font-size:var(--fs-body);line-height:var(--lh-loose);max-width:var(--max-text);margin:var(--mb-bullet) 0}
.bullet-point::before{content:"•";color:var(--brand);font-weight:700;margin-right:1rem}

/* Hamburger + Menu Overlay */
.hamburger{
  position:fixed;top:1.5rem;right:3rem;z-index:var(--z-hamb);cursor:pointer;display:flex;flex-direction:column;gap:var(--gap-hamburger);padding:10px
}
.hamburger span{width:var(--w-hamb);height:var(--h-hamb);background:var(--text-primary);transition:transform .3s ease, opacity .3s ease}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(8px,-8px)}

.menu-overlay{
  position:fixed;inset:0;background:var(--overlay);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  z-index:var(--z-menu);display:flex;flex-direction:column;justify-content:center;align-items:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease
}
.menu-overlay.active{opacity:1;pointer-events:all}
.menu-nav{display:flex;flex-direction:column;gap:var(--gap-menu);align-items:center}
.menu-nav a{
  color:var(--text-primary);text-decoration:none;font-size:var(--fs-menu);font-weight:var(--fw-sb);
  transition:transform .3s ease, color .3s ease;opacity:0;transform:translateY(20px)
}
.menu-overlay.active .menu-nav a{opacity:1;transform:translateY(0)}
.menu-nav a:nth-child(1){transition-delay:.1s}
.menu-nav a:nth-child(2){transition-delay:.15s}
.menu-nav a:nth-child(3){transition-delay:.2s}
.menu-nav a:nth-child(4){transition-delay:.25s}
.menu-nav a:nth-child(5){transition-delay:.3s}
.menu-nav a:hover{color:var(--brand);transform:translateX(10px)}

/* Footer */
footer{background:var(--bg-black);padding:2rem;text-align:center;color:var(--text-muted);font-size:.9rem;border-top:1px solid var(--w-05)}

/* Animations */
@keyframes fadeWrong{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* Scroll fade-ins (IntersectionObserver primes these) */
section.__pre{opacity:0;transform:translateY(30px);transition:opacity .8s ease, transform .8s ease}
section.__in{opacity:1;transform:translateY(0)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto}
}

/* Responsive */
@media (max-width:768px){
  header{padding:var(--header-pad-m)}
  section{padding:var(--section-pad-m)}
  .architecture-visual{grid-template-columns:1fr}
  .problem-visual{height:var(--h-problem-m)}
}