/* ==========================================================================
   Ai-gent Lab — redesign-v2 design system
   Dark premium · charcoal-navy + electric-blue accent · Inter self-hosted
   ========================================================================== */

/* ---- Fonts (self-hosted, ./fonts/) ------------------------------------ */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("./fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("./fonts/inter-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url("./fonts/inter-latin-800-normal.woff2") format("woff2")}

/* ---- Tokens ----------------------------------------------------------- */
:root{
  --bg:#0a0e1a;            /* deep charcoal-navy */
  --bg-soft:#0c1120;
  --bg-alt:#0e1424;
  --panel:#111a2e;
  --panel-hi:#16223b;
  --text:#f4f7fc;
  --muted:#8b95ab;
  --muted-dim:#5f6a82;
  --line:rgba(255,255,255,.08);
  --line-hi:rgba(255,255,255,.16);
  --accent:#3B82F6;        /* electric blue */
  --accent-bright:#60a5fa;
  --accent-soft:rgba(59,130,246,.14);
  --accent-glow:rgba(59,130,246,.45);
  --ok:#10B981;
  --err:#EF4444;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* type scale */
  --step--1:clamp(.8rem,.76rem + .2vw,.9rem);
  --step-0:clamp(1rem,.95rem + .25vw,1.125rem);
  --step-1:clamp(1.35rem,1.2rem + .7vw,1.75rem);
  --step-2:clamp(1.9rem,1.5rem + 1.9vw,3rem);
  --step-3:clamp(2.6rem,1.9rem + 3.4vw,4.75rem);
  --step-4:clamp(3rem,2rem + 4.8vw,6rem);
  /* spacing */
  --sp-section:clamp(5rem,4rem + 8vw,10rem);
  --max:1200px;
  --pad:clamp(1.25rem,4vw,3rem);
  --radius:14px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---- Base ------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit;background:none;border:0;cursor:pointer}
img,picture,svg{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.02}
p{margin:0}
:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px;border-radius:2px}
.container{width:min(var(--max),calc(100% - var(--pad)*2));margin-inline:auto}
.text-accent{color:var(--accent-bright)}
.skip-link{position:fixed;z-index:1000;top:1rem;left:1rem;padding:.7rem 1rem;background:var(--accent);color:#fff;font-weight:700;border-radius:8px;transform:translateY(-160%);transition:transform .2s}
.skip-link:focus{transform:none}
.eyebrow{display:inline-block;font-size:var(--step--1);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-bright);margin:0 0 1rem}

/* ---- Navbar ----------------------------------------------------------- */
.navbar{position:fixed;top:0;left:0;width:100%;z-index:100;display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding:1rem var(--pad);background:rgba(10,14,26,.55);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.navbar.scrolled{background:rgba(10,14,26,.9);border-bottom-color:var(--line)}
.logo-svg{height:26px;width:auto}
.logo-text{font-family:Inter,sans-serif;font-weight:800;font-size:26px;fill:var(--text);letter-spacing:-.02em}
.logo-text.accent{fill:var(--accent-bright)}
.nav-links{display:flex;gap:2.25rem}
.nav-links a{position:relative;font-size:var(--step--1);font-weight:500;color:var(--muted);padding:.25rem 0;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:var(--accent-bright);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
.hamburger{display:none;flex-direction:column;gap:5px;width:34px;height:34px;align-items:center;justify-content:center}
.hamburger span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s,opacity .3s}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- Buttons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-size:var(--step--1);font-weight:600;
  letter-spacing:.01em;padding:.8rem 1.4rem;border-radius:10px;border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s,border-color .25s;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 18px -6px var(--accent-glow)}
.btn-primary:hover{background:var(--accent-bright);transform:translateY(-2px);box-shadow:0 10px 30px -8px var(--accent-glow)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--line-hi)}
.btn-secondary:hover{border-color:var(--accent-bright);color:var(--accent-bright);transform:translateY(-2px)}
.btn-large{padding:1rem 1.9rem;font-size:var(--step-0)}

/* ---- Mobile nav drawer ------------------------------------------------ */
.mobile-nav-overlay{position:fixed;inset:0;z-index:98;background:rgba(6,9,18,.6);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.mobile-nav-overlay.active{opacity:1;pointer-events:auto}
.mobile-nav{position:fixed;top:0;right:0;z-index:99;height:100dvh;width:min(320px,82vw);background:var(--bg-alt);
  border-left:1px solid var(--line);padding:6rem 2rem 2rem;display:flex;flex-direction:column;gap:2rem;
  transform:translateX(100%);transition:transform .35s var(--ease)}
.mobile-nav.active{transform:none}
.mobile-nav-links{display:flex;flex-direction:column;gap:1.5rem}
.mobile-nav-links a{font-size:1.25rem;font-weight:600;color:var(--text)}
.mobile-nav-links a:hover{color:var(--accent-bright)}

/* ==========================================================================
   Pinned scene narrative (adapted from arvizual v3 proven pattern)
   ========================================================================== */
.scene-narrative{position:relative;height:420vh}
.scene-sticky{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden;background:var(--bg)}
.scenes,.scene,.scene picture,.scene img,.scene-shade{position:absolute;inset:0;width:100%;height:100%}
.scene{opacity:0;will-change:opacity,transform;transform:scale(1)}
.scene:first-child{opacity:1}
.scene img{object-fit:cover;object-position:center}
.scene-shade{z-index:3;pointer-events:none;background:
  linear-gradient(90deg,rgba(8,11,20,.94) 0%,rgba(8,11,20,.8) 26%,rgba(8,11,20,.28) 55%,rgba(8,11,20,.08) 80%,rgba(8,11,20,.55) 100%),
  linear-gradient(0deg,rgba(8,11,20,.85),transparent 26%,transparent 72%,rgba(8,11,20,.5))}
.scene-copy-wrap{position:relative;z-index:4;height:100%;width:min(var(--max),calc(100% - var(--pad)*2));margin-inline:auto}
.scene-copy{position:absolute;top:50%;left:0;width:min(620px,52vw);transform:translateY(calc(-50% + 24px));opacity:0;pointer-events:none;will-change:opacity,transform}
.scene-copy:first-child{opacity:1;transform:translateY(-50%);pointer-events:auto}
.scene-copy h1,.scene-copy h2{font-size:var(--step-3);line-height:.98;margin:0 0 1.4rem}
.scene-copy p{max-width:560px;color:#cdd5e4;font-size:var(--step-0)}
.scene-copy .hero-actions{display:flex;gap:.9rem;margin-top:2rem;flex-wrap:wrap}
/* scene progress rail */
.scene-progress{position:absolute;z-index:5;right:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:.9rem}
.scene-progress .rail{height:90px;width:1.5px;background:var(--line-hi);position:relative}
.scene-progress .rail i{position:absolute;top:0;left:0;width:100%;height:0;background:var(--accent-bright);box-shadow:0 0 10px var(--accent-glow)}
.scene-progress b{font-size:.6rem;font-weight:600;letter-spacing:.14em;color:var(--muted-dim);transition:color .3s}
.scene-progress b.is-active{color:var(--accent-bright)}
.scroll-hint{position:absolute;z-index:5;bottom:1.8rem;left:50%;transform:translateX(-50%);font-size:.6rem;letter-spacing:.24em;color:var(--muted);text-transform:uppercase}
.scroll-hint i{display:inline-block;width:36px;height:1px;background:var(--muted-dim);vertical-align:middle;margin-left:.6rem}

/* ==========================================================================
   Content sections
   ========================================================================== */
.section{padding:var(--sp-section) 0}
.section.alt-bg{background:linear-gradient(180deg,var(--bg),var(--bg-alt))}
.section-header{max-width:720px;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.section-title{font-size:var(--step-2);margin:0 0 1rem}
.section-desc{color:var(--muted);font-size:var(--step-0);margin:0}

/* icons shared */
.icon-line{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* service cards */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s,background .3s;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at 50% -20%,var(--accent-soft),transparent 70%);opacity:0;transition:opacity .35s}
.card-link:hover{transform:translateY(-6px);border-color:var(--line-hi);box-shadow:0 22px 50px -24px rgba(0,0,0,.7)}
.card-link:hover::before{opacity:1}
.card-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent-bright);margin-bottom:1.4rem}
.card h3{font-size:var(--step-1);margin:0 0 .7rem}
.card p{color:var(--muted);font-size:var(--step--1);margin:0}
.card-arrow{display:inline-flex;margin-top:1.4rem;color:var(--accent-bright);transition:transform .3s var(--ease)}
.card-link:hover .card-arrow{transform:translateX(6px)}
.card-arrow svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none}

/* code snippet block */
.code-section{background:var(--bg-alt)}
.code-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.code-window{background:#0b1120;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.code-titlebar{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.1rem;background:#0e1526;border-bottom:1px solid var(--line)}
.code-titlebar .dot{width:11px;height:11px;border-radius:50%;background:#2a3450}
.code-titlebar .fname{margin-left:.8rem;font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.code-body{margin:0;padding:1.4rem 1.5rem;font-family:var(--mono);font-size:clamp(.72rem,.9vw,.86rem);line-height:1.75;
  color:#c7d0e2;overflow-x:auto;min-height:22em;white-space:pre;tab-size:2}
.code-body .tok-key{color:#c084fc}
.code-body .tok-str{color:#6ee7b7}
.code-body .tok-num{color:#fbbf24}
.code-body .tok-prop{color:#60a5fa}
.code-body .tok-com{color:#5f6a82;font-style:italic}
.code-body .tok-punc{color:#8b95ab}
.code-caret{display:inline-block;width:.55ch;background:var(--accent-bright);animation:blink 1s steps(2) infinite;color:transparent}
@keyframes blink{50%{opacity:0}}

/* method 01-04 */
.method-section{background:linear-gradient(180deg,var(--bg-alt),var(--bg))}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.step{background:var(--bg-soft);padding:clamp(1.75rem,3vw,2.75rem);min-height:280px;display:flex;flex-direction:column;transition:background .3s}
.step:hover{background:var(--panel)}
.step-number{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:800;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px var(--accent);margin-bottom:auto;letter-spacing:-.04em}
.step h3{font-size:var(--step-1);margin:1.6rem 0 .7rem}
.step p{color:var(--muted);font-size:var(--step--1);margin:0}

/* metrics band */
.metrics-section{background:var(--bg-alt);border-block:1px solid var(--line)}
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;transition:border-color .3s,transform .35s var(--ease)}
.metric:hover{border-color:var(--line-hi);transform:translateY(-4px)}
.metric-icon{color:var(--accent-bright);margin-bottom:1.1rem}
.metric-number{font-size:clamp(2.4rem,4.5vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--text);margin-bottom:.6rem}
.metric-number .unit{color:var(--accent-bright)}
.metric h3{font-size:var(--step-0);margin:0 0 .5rem}
.metric p{color:var(--muted);font-size:var(--step--1);margin:0}
.metric a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:2px}

/* about / cta */
.cta-section{background:radial-gradient(900px circle at 50% 120%,var(--accent-soft),transparent 60%),var(--bg)}
.cta-content{max-width:760px;margin-inline:auto;text-align:center}
.cta-content h2{font-size:var(--step-2);margin:0 0 1.4rem}
.cta-content p{color:var(--muted);font-size:var(--step-0);margin:0 0 2.2rem}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---- Footer ----------------------------------------------------------- */
.footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:clamp(3.5rem,6vw,5rem) 0 2rem}
.footer-content{width:min(var(--max),calc(100% - var(--pad)*2));margin-inline:auto;display:grid;grid-template-columns:1.4fr 2fr;gap:3rem}
.footer-brand .logo{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.footer-brand p{color:var(--muted);margin-top:.8rem;font-size:var(--step--1)}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.link-group{display:flex;flex-direction:column;gap:.7rem}
.link-group h4{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:.4rem;font-weight:700}
.link-group a{color:var(--muted);font-size:var(--step--1);transition:color .2s}
.link-group a:hover{color:var(--text)}
.footer-bottom{width:min(var(--max),calc(100% - var(--pad)*2));margin:3rem auto 0;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:var(--step--1);color:var(--muted-dim)}

/* ---- Contact modal ---------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:rgba(6,9,18,.72);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.modal.visible{opacity:1;pointer-events:auto}
.modal-content{position:relative;width:min(520px,100%);max-height:90dvh;overflow-y:auto;background:var(--panel);
  border:1px solid var(--line-hi);border-radius:18px;padding:clamp(1.75rem,4vw,2.75rem);
  transform:translateY(16px) scale(.98);transition:transform .35s var(--ease)}
.modal.visible .modal-content{transform:none}
.close-modal{position:absolute;top:1rem;right:1.1rem;font-size:1.7rem;line-height:1;color:var(--muted);transition:color .2s}
.close-modal:hover{color:var(--text)}
.modal-content h2{font-size:var(--step-1);margin:0 0 .6rem}
.modal-content>p{color:var(--muted);font-size:var(--step--1);margin:0 0 1.6rem}
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;font-weight:600}
.form-group input,.form-group textarea{width:100%;background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;
  color:var(--text);padding:.75rem .9rem;transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus{border-color:var(--accent-bright);outline:none}
.form-group textarea{resize:vertical}

/* ---- Scroll reveal utility ------------------------------------------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:900px){
  .nav-links{display:none}
  .navbar>.btn-primary{display:none}
  .hamburger{display:flex}
  .scene-copy{width:min(640px,82vw)}
  .code-layout{grid-template-columns:1fr}
  .footer-content{grid-template-columns:1fr}
}
@media(max-width:600px){
  :root{--pad:1.1rem}
  .scene-narrative{height:440svh}
  .scene-sticky{height:100svh;min-height:520px}
  .scene img{object-position:62% center}
  .scene-shade{background:linear-gradient(0deg,rgba(6,9,18,.97) 0%,rgba(6,9,18,.82) 40%,rgba(6,9,18,.12) 74%,rgba(6,9,18,.45) 100%)}
  .scene-copy-wrap{width:calc(100% - var(--pad)*2)}
  .scene-copy{top:auto;bottom:8vh;left:0;width:100%;transform:translateY(20px)}
  .scene-copy:first-child{transform:none}
  .scene-copy p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .scene-progress{right:.4rem}
  .scroll-hint{display:none}
  .footer-links{grid-template-columns:1fr}
}
/* short viewports: bail out of pin, stack scenes */
@media(max-height:560px){
  .scene-narrative{height:auto}
  .scene-sticky{position:relative;height:auto;min-height:100vh;padding:7rem var(--pad) 3rem}
  .scene:not(:last-child){display:none}
  .scene:last-child{opacity:1}
  .scene-shade{background:rgba(6,9,18,.82)}
  .scene-copy-wrap{height:auto;display:grid;gap:2.5rem}
  .scene-copy{position:relative;top:auto;width:min(680px,84vw);opacity:1;transform:none;pointer-events:auto}
  .scene-progress,.scroll-hint{display:none}
}

/* ==========================================================================
   Reduced motion — static stacked images, no pin/parallax/typing/count-up
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,::before,::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .scene-narrative{height:auto}
  .scene-sticky{position:relative;height:auto;min-height:auto;padding:7rem var(--pad) 3rem}
  .scenes{position:relative;height:auto}
  .scene{position:relative;opacity:1!important;transform:none!important;height:auto;margin-bottom:2rem}
  .scene picture,.scene img{position:relative;height:auto}
  .scene img{aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}
  .scene-shade{display:none}
  .scene-copy-wrap{height:auto;display:grid;gap:2.5rem;margin-top:2rem}
  .scene-copy{position:relative;top:auto;width:min(700px,88vw);opacity:1!important;transform:none!important;pointer-events:auto}
  .scene-progress,.scroll-hint,.code-caret{display:none}
  .reveal{opacity:1;transform:none}
}