/* LaRoc Lab design tokens + site styles (ported from Claude Design project) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
--blue-950:#050E17;--blue-900:#0A1E30;--blue-800:#0B3D62;--blue-700:#134D78;--blue-600:#1B5A8A;--blue-500:#2E7AAD;--blue-400:#4A97C4;--blue-300:#7FB8D9;--blue-200:#B3D5E8;--blue-100:#DCECF4;--blue-50:#F2F8FB;
--amber-700:#B87A12;--amber-600:#DB9A1D;--amber-500:#FFB937;--amber-400:#FFCB63;--amber-300:#FFDD98;--amber-100:#FFF2D6;
--ink-900:#0B1420;--ink-700:#33414F;--ink-500:#5C6B7A;--ink-300:#9AABB8;--ink-100:#D8E2E9;
--white:#FFFFFF;
--success-600:#1F8F5B;--success-500:#2FBF71;--success-100:#DCF5E7;
--error-600:#C8331F;--error-500:#FF4433;--error-100:#FFE1DC;
--info-600:#1C8FA0;--info-500:#4FD8E8;--info-100:#DEF7FA;
--grid-line-on-dark:rgba(179,213,232,0.16);
--grid-line-on-light:rgba(11,61,98,0.10);
--bg-canvas:var(--blue-900);--bg-surface:var(--blue-800);--bg-paper:var(--blue-50);
--text-on-dark-primary:var(--white);--text-on-dark-secondary:var(--blue-200);--text-on-dark-tertiary:var(--blue-300);
--text-on-light-primary:var(--ink-900);--text-on-light-secondary:var(--ink-700);--text-on-light-tertiary:var(--ink-500);
--border-on-dark:rgba(255,255,255,0.22);--border-on-dark-strong:rgba(255,255,255,0.4);
--border-on-light:rgba(11,20,32,0.16);--border-on-light-strong:rgba(11,20,32,0.32);
--accent:var(--amber-500);--accent-hover:var(--amber-600);--accent-press:var(--amber-700);--accent-ink:var(--ink-900);
--focus-ring:var(--amber-500);
--font-sans:'IBM Plex Sans',-apple-system,sans-serif;
--font-mono:'IBM Plex Mono','SF Mono',monospace;
--text-eyebrow:0.75rem;--text-xs:0.8125rem;--text-sm:0.9375rem;--text-body:1.0625rem;--text-lg:1.25rem;
--text-h5:1.5rem;--text-h4:1.875rem;--text-h3:2.5rem;--text-h2:3.25rem;--text-h1:4.5rem;--text-display:6rem;
--lh-tight:1.06;--lh-snug:1.2;--lh-normal:1.5;--lh-relaxed:1.65;
--ls-tight:-0.02em;--ls-normal:0;--ls-wide:0.06em;--ls-wider:0.14em;
--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;
--radius-sm:2px;--radius-md:4px;--radius-lg:8px;--radius-pill:999px;
--container-max:1200px;
--stroke-hair:1px;--stroke-md:1.5px;--stroke-thick:2px;
--shadow-sm:0 1px 2px rgba(5,14,23,0.14);
--shadow-md:0 4px 12px rgba(5,14,23,0.18);
--shadow-lg:0 12px 32px rgba(5,14,23,0.24);
--ease-standard:cubic-bezier(0.2,0.6,0.2,1);
--dur-fast:120ms;--dur-normal:200ms;--dur-slow:340ms;
}

html{scroll-behavior:smooth;}
/* keep anchor targets clear of the sticky header */
section[id]{scroll-margin-top:84px;}
body{margin:0;background:var(--blue-900);font-family:var(--font-sans);}
a{color:var(--amber-400);text-decoration:none;}
a:hover{color:var(--amber-300);}
input,textarea,select{font-family:inherit;}
*{box-sizing:border-box;}

/* Section backgrounds (grid pattern removed by request) */
.grid-dark{background-color:var(--blue-900);}
.grid-light{background-color:var(--bg-paper);}

/* Progress bar */
#progress{position:fixed;top:0;left:0;height:2px;background:var(--amber-500);z-index:50;transition:width 80ms linear;width:0;}

/* Header */
#site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:16px clamp(20px,6vw,48px);background:rgba(10,30,48,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:var(--stroke-hair) solid var(--border-on-dark);box-shadow:none;transition:background var(--dur-normal) var(--ease-standard),box-shadow var(--dur-normal) var(--ease-standard);}
#site-header.scrolled{background:rgba(10,30,48,0.92);box-shadow:var(--shadow-sm);}
#site-header nav{display:flex;gap:28px;font-family:var(--font-mono);font-size:12px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--blue-200);}
#site-header nav a{color:inherit;}
#site-header nav a:hover{color:#fff;}

/* Buttons */
.btn-amber{display:inline-block;background:var(--amber-500);color:var(--ink-900);border:none;font-weight:600;padding:14px 28px;border-radius:var(--radius-sm);font-size:var(--text-body);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard);}
.btn-amber:hover{background:var(--amber-400);color:var(--ink-900);}
.btn-amber-sm{background:var(--amber-500);color:var(--ink-900);font-weight:600;font-size:13px;padding:10px 18px;border-radius:var(--radius-sm);font-family:var(--font-sans);transition:background var(--dur-fast) var(--ease-standard);}
.btn-amber-sm:hover{background:var(--amber-400);color:var(--ink-900);}
.btn-ghost{display:inline-block;background:transparent;color:#fff;border:var(--stroke-md) solid var(--border-on-dark-strong);font-weight:600;padding:14px 28px;border-radius:var(--radius-sm);font-size:var(--text-body);transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);}
.btn-ghost:hover{background:rgba(255,255,255,0.08);color:#fff;}

/* Cards */
.problem-card{position:relative;background:#fff;border:var(--stroke-hair) solid var(--border-on-light);border-radius:var(--radius-md);padding:var(--sp-6);height:100%;transition:border-color var(--dur-normal) var(--ease-standard),transform var(--dur-normal) var(--ease-standard),box-shadow var(--dur-normal) var(--ease-standard);}
.problem-card:hover{border-color:var(--blue-500);transform:translateY(-6px);box-shadow:var(--shadow-md);}
.corner-tl{position:absolute;top:-1px;left:-1px;width:12px;height:12px;border-top:2px solid var(--border-on-light-strong);border-left:2px solid var(--border-on-light-strong);}
.corner-br{position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-bottom:2px solid var(--border-on-light-strong);border-right:2px solid var(--border-on-light-strong);}
.solution-card{background:var(--blue-800);border:var(--stroke-hair) solid var(--border-on-dark);border-radius:var(--radius-md);padding:var(--sp-8);height:100%;transition:transform var(--dur-normal) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-normal) var(--ease-standard);}
.solution-card:hover{transform:translateY(-6px);border-color:var(--amber-500);box-shadow:var(--shadow-md);}

/* Reveal animations */
.reveal-item{opacity:0;transform:translateY(44px) scale(0.94);transition:opacity 700ms var(--ease-standard),transform 700ms var(--ease-standard);}
.revealed .reveal-item{opacity:1;transform:translateY(0) scale(1);}
.reveal-block{opacity:0;transform:translateY(24px);transition:opacity 600ms var(--ease-standard),transform 600ms var(--ease-standard);}
.revealed .reveal-block,.reveal-block.revealed{opacity:1;transform:translateY(0);}
#hero-content{opacity:0;transition:opacity 700ms var(--ease-standard),transform 700ms var(--ease-standard);}
#hero-content.mounted{opacity:1;}

/* Hero headline word-by-word 3D reveal */
#hero h1{perspective:800px;}
#hero h1 .w{display:inline-block;opacity:0;transform:translateY(0.6em) rotateX(55deg);transform-origin:50% 100%;transition:opacity 650ms var(--ease-standard),transform 650ms var(--ease-standard);will-change:transform;}
#hero-content.mounted h1 .w{opacity:1;transform:translateY(0) rotateX(0);}

/* FAQ */
.faq-item{border-bottom:var(--stroke-hair) solid var(--border-on-light);}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-size:var(--text-lg);font-weight:600;color:var(--text-on-light-primary);font-family:inherit;gap:16px;}
.faq-icon{font-family:var(--font-mono);color:var(--blue-600);transition:transform var(--dur-normal) var(--ease-standard);display:inline-block;}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-panel{overflow:hidden;transition:max-height var(--dur-normal) var(--ease-standard),opacity var(--dur-normal) var(--ease-standard);max-height:0;opacity:0;}
.faq-item.open .faq-panel{max-height:320px;opacity:1;}
.faq-panel p{margin:0 0 20px;font-size:var(--text-sm);color:var(--text-on-light-secondary);line-height:var(--lh-relaxed);}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;}
.field-label-dark{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--blue-300);}
.field-label-light{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-on-light-tertiary);}
.input-light{font-family:var(--font-mono);font-size:var(--text-body);padding:10px 12px;border:var(--stroke-md) solid var(--border-on-light-strong);border-radius:var(--radius-sm);outline:none;}
.input-dark{font-size:var(--text-sm);padding:10px 12px;border-radius:var(--radius-sm);border:var(--stroke-hair) solid var(--border-on-dark-strong);background:var(--blue-900);color:#fff;outline:none;}
.input-dark:focus,.input-light:focus{border-color:var(--focus-ring);}

/* Language switcher */
.lang-switch{display:flex;gap:4px;font-family:var(--font-mono);font-size:12px;}
.lang-link{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:var(--radius-sm);color:var(--blue-300);border:var(--stroke-hair) solid transparent;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);}
.lang-link:hover{color:#fff;background:rgba(255,255,255,0.07);}
.lang-link.active{color:var(--amber-500);border-color:rgba(255,185,55,0.45);}
.lang-flag{font-size:13px;line-height:1;}

/* ---------- Workflow scene ---------- */
/* Matches the section that follows so the two dark blocks read as one field;
   the stage keeps the slightly deeper navy so it reads as a screen. */
#workflow{background:var(--blue-900);color:#fff;}
.wf-intro{max-width:1200px;margin:0 auto;padding:100px clamp(20px,6vw,48px) 0;}
.wf-intro h2{font-size:var(--text-h3);font-weight:700;margin:0;letter-spacing:var(--ls-tight);}
.wf-intro p{font-size:var(--text-lg);color:var(--blue-200);margin-top:12px;max-width:560px;}

/* Text-only copy of the scene, for crawlers and screen readers */
.wf-seo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.wf-player{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.5vh,28px);padding:clamp(32px,5vh,56px) clamp(20px,6vw,48px) clamp(72px,9vh,100px);}
.wf-frame{position:relative;width:100%;max-width:1400px;aspect-ratio:16/9;max-height:72vh;}
.wf-stage{position:absolute;top:50%;left:50%;width:1920px;height:1080px;overflow:hidden;background:#08243B;transform-origin:center center;transform:translate(-50%,-50%) scale(1);}
.wf-track{position:absolute;top:0;left:0;width:11520px;height:1080px;will-change:transform;}
.wf-fade{position:absolute;inset:0;background:#08243B;pointer-events:none;opacity:0;}

.wf-caption{display:flex;justify-content:center;padding:0 clamp(20px,6vw,48px);opacity:0;transition:none;min-height:56px;}
.wf-caption-box{display:flex;align-items:center;gap:clamp(10px,2vw,18px);background:rgba(8,36,59,0.85);border:var(--stroke-hair) solid rgba(255,255,255,0.28);border-radius:var(--radius-md);padding:clamp(10px,1.6vh,14px) clamp(16px,3vw,26px);}
.wf-caption-num{font-family:var(--font-mono);font-size:clamp(12px,1.4vw,16px);color:var(--amber-500);letter-spacing:var(--ls-wide);}
.wf-caption-text{font-family:var(--font-sans);font-size:clamp(14px,1.7vw,20px);color:#fff;line-height:1.35;}

.wf-controls{display:flex;align-items:center;gap:16px;width:min(560px,80vw);}
.wf-bar{flex:1;height:2px;background:rgba(255,255,255,0.16);border-radius:var(--radius-pill);overflow:hidden;}
.wf-bar span{display:block;height:100%;width:0;background:var(--amber-500);}

/* Play/pause: two bars that become a triangle when paused */
.wf-toggle{flex:0 0 auto;width:30px;height:30px;padding:0;border:var(--stroke-hair) solid var(--border-on-dark);border-radius:var(--radius-pill);background:transparent;cursor:pointer;position:relative;transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);}
.wf-toggle:hover{border-color:var(--amber-500);background:rgba(255,185,55,0.1);}
.wf-toggle::before,.wf-toggle::after{content:"";position:absolute;top:50%;width:3px;height:11px;background:var(--amber-500);transform:translateY(-50%);transition:all var(--dur-normal) var(--ease-standard);}
.wf-toggle::before{left:11px;}
.wf-toggle::after{left:17px;}
.wf-toggle.is-paused::before{left:11px;width:0;height:0;background:transparent;border-left:10px solid var(--amber-500);border-top:6px solid transparent;border-bottom:6px solid transparent;}
.wf-toggle.is-paused::after{opacity:0;}

/* prefers-reduced-motion: drop the animation, show the steps as text */
#workflow.wf-static .wf-player{display:none;}
#workflow.wf-static .wf-seo{position:static;width:auto;height:auto;margin:32px auto 0;padding:0 clamp(20px,6vw,48px);overflow:visible;clip:auto;white-space:normal;max-width:1200px;color:var(--blue-200);line-height:var(--lh-relaxed);}
#workflow.wf-static .wf-seo li{margin-bottom:12px;}

@media (max-width:900px){
  .wf-intro{padding-top:72px;}
  /* full-bleed frame: every horizontal pixel is scale on the portrait stage */
  .wf-player{padding-left:0;padding-right:0;padding-bottom:64px;}
}

/* Mobile */
@media (max-width:720px){
  #site-header nav{display:none;}
  #site-header{gap:12px;}
  section[id]{scroll-margin-top:130px;}
}