@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap");

:root{--bg:#0a1226;--panel:#0f1b38;--line:rgba(232,238,252,.16);--line2:rgba(232,238,252,.36);--ink:#eef1f8;--muted:rgba(238,241,248,.64);--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:300 17px/1.7 'Jost',Arial,sans-serif;min-height:100vh;animation:pagein .9s ease both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
::selection{background:#fff;color:var(--bg)}
a{color:inherit}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;line-height:1.08;letter-spacing:.2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 6vw}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{font:400 26px 'Cormorant Garamond',Georgia,serif;letter-spacing:9px;text-decoration:none;text-transform:uppercase}
.nav{display:flex;gap:34px}
.nav a{font:400 12px 'Jost',Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;text-decoration:none;color:var(--muted);position:relative;padding:6px 0;transition:color .4s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.nav a:hover,.nav a.on{color:#fff}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
@media(max-width:760px){.site-header .wrap{height:auto;flex-direction:column;gap:14px;padding:18px 6vw}.nav{gap:20px;flex-wrap:wrap;justify-content:center}}

/* ---------- type ---------- */
.kicker{font:400 12px 'Jost',Arial,sans-serif;letter-spacing:4px;text-transform:uppercase;color:var(--muted)}
.display{font-size:clamp(46px,7.4vw,104px);font-weight:300}
.display em{font-style:italic;font-weight:300}
.h2{font-size:clamp(34px,4.4vw,58px);font-weight:300}
.lead{font-size:19px;color:var(--muted);max-width:560px}
.muted{color:var(--muted)}
.num{font:300 13px 'Jost',Arial,sans-serif;letter-spacing:4px;color:var(--muted)}
.note{color:var(--muted);font-size:14px;margin-top:10px}

/* ---------- buttons: white, sharp, slow fill ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-block;background:#fff;color:var(--bg);border:1px solid #fff;border-radius:0;padding:16px 36px;font:500 12px 'Jost',Arial,sans-serif;letter-spacing:3.5px;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--bg);transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.btn:hover{color:#fff}
.btn:hover::before{transform:translateY(0)}
.btn.ghost{background:transparent;color:#fff;border-color:var(--line2)}
.btn.ghost::before{background:#fff}
.btn.ghost:hover{color:var(--bg)}
.btn:disabled{opacity:.5;cursor:wait}

/* ---------- motion ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.rule{height:1px;background:var(--line2);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease)}
.rule.in{transform:scaleX(1)}
.vlines{position:absolute;inset:0;display:flex;justify-content:space-between;padding:0 6vw;pointer-events:none}
.vlines i{width:1px;background:var(--line);transform:scaleY(0);transform-origin:top;animation:draw 2.4s var(--ease) forwards;animation-delay:calc(var(--i) * .16s + .3s)}
@keyframes draw{to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}.rule{transform:none}.vlines i{transform:none}}

/* ---------- home ---------- */
.hero{position:relative;overflow:hidden;padding:150px 0 130px}
.hero .wrap{position:relative}
.hero .lead{margin-top:34px}
.hero .btn{margin-top:46px}
.section{padding:90px 0;border-top:1px solid var(--line)}
.tri{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tri a{display:block;text-decoration:none;padding:46px 34px 56px;border-right:1px solid var(--line);transition:background .6s var(--ease)}
.tri a:last-child{border-right:0}
.tri a:hover{background:var(--panel)}
.tri h3{font-size:40px;font-weight:300;margin:18px 0 12px}
.tri p{color:var(--muted);font-size:16px}
.tri .go{display:inline-block;margin-top:28px;font:400 12px 'Jost',Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;transition:transform .6s var(--ease)}
.tri a:hover .go{transform:translateX(10px)}
@media(max-width:860px){.tri{grid-template-columns:1fr}.tri a{border-right:0;border-bottom:1px solid var(--line)}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:70px}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:30px}}
.site-footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:13px;letter-spacing:2px;text-transform:uppercase}

/* ---------- tool pages ---------- */
.page{padding:80px 0 100px}
.page .h2{margin:14px 0 18px}
.cols{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:70px;align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr;gap:40px}}
.block{padding:60px 0;border-top:1px solid var(--line)}
label{display:block;font:400 11px 'Jost',Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin:22px 0 4px}
input[type=text],input[type=number],textarea,select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line2);border-radius:0;color:var(--ink);padding:10px 0;font:300 17px 'Jost',Arial,sans-serif;outline:0;transition:border-color .4s}
input:focus,textarea:focus,select:focus{border-bottom-color:#fff}
select option{background:var(--bg);color:#fff}
textarea{resize:vertical;border:1px solid var(--line2);padding:14px}
textarea:focus{border-color:#fff}
input[type=file]{width:100%;font:300 14px 'Jost',Arial,sans-serif;color:var(--muted);padding:10px 0}
input[type=file]::file-selector-button{background:transparent;color:#fff;border:1px solid var(--line2);padding:8px 16px;margin-right:14px;font:400 11px 'Jost',Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;cursor:pointer}
.btn.mt{margin-top:30px}
.costs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 30px}
.card{border:1px solid var(--line);padding:26px;margin-top:18px;transition:border-color .5s}
.card:hover{border-color:var(--line2)}
.card.blocked{border-color:rgba(255,170,170,.55)}
.card h4{font-size:26px;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{border:1px solid var(--line2);padding:3px 12px;font:400 11px 'Jost',Arial,sans-serif;letter-spacing:2px;text-transform:uppercase}
.chip.warn{background:#fff;color:var(--bg);border-color:#fff}
.chip.good{border-color:#fff}
.quote{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:21px;color:var(--muted)}
.ar{direction:rtl;text-align:right;font-size:18px;margin-top:8px}
.en{margin-top:8px}
.err{border:1px solid rgba(255,170,170,.55);padding:14px 18px;margin-top:18px}
.shot{display:grid;grid-template-columns:52px 1fr;gap:10px;font-size:15px;padding:6px 0;border-bottom:1px solid var(--line)}
.out{margin-top:10px}

/* ---------- agents (create page) ---------- */
.agent{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.agent b{font:400 24px 'Cormorant Garamond',Georgia,serif;display:block;font-weight:400}
.agent span{font-size:14px;color:var(--muted)}
.agent em{font:400 11px 'Jost',Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;font-style:normal;color:var(--muted)}
.dot{width:9px;height:9px;border:1px solid #fff;border-radius:50%}
.agent[data-status=start] .dot{background:#fff;animation:pulse 1.4s ease-in-out infinite}
.agent[data-status=done] .dot{background:#fff}
.agent[data-status=failed] .dot{border-color:#ff9c9c;background:#ff9c9c}
.agent[data-status=skipped] .dot{opacity:.3}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,255,255,.12)}}
pre#log{margin-top:18px;max-height:170px;overflow:auto;border:1px solid var(--line);padding:14px;font:12px/1.6 Consolas,monospace;color:var(--muted);white-space:pre-wrap}
.thumbs{display:flex;gap:10px;margin-top:10px}
.thumbs img{width:76px;height:76px;object-fit:cover;border:1px solid var(--line2)}
.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(520px,1fr));gap:26px;margin-top:20px}
iframe{width:100%;height:900px;border:1px solid var(--line2);background:#000}
ul.obs{margin:8px 0 0 18px;color:var(--muted);font-size:15px}

/* thin dark scrollbar */
*{scrollbar-width:thin;scrollbar-color:var(--line2) var(--bg)}
.ar{display:none}


/* ===== PRISM MOTION (added) ===== */
@media (prefers-reduced-motion: no-preference) {

  /* drifting light behind everything */
  .fx-glow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen;opacity:.38}
  .fx-glow i{position:absolute;border-radius:50%;filter:blur(90px)}
  .fx-glow i:nth-child(1){width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:#2c4fa8;animation:fxDrift1 24s ease-in-out infinite alternate}
  .fx-glow i:nth-child(2){width:38vmax;height:38vmax;right:-10vmax;bottom:-12vmax;background:#8a6a2f;animation:fxDrift2 28s ease-in-out infinite alternate}
  .fx-glow i:nth-child(3){width:30vmax;height:30vmax;left:40%;top:35%;background:#1f6f8b;animation:fxDrift3 32s ease-in-out infinite alternate}
  @keyframes fxDrift1{to{transform:translate(18vmax,12vmax) scale(1.15)}}
  @keyframes fxDrift2{to{transform:translate(-16vmax,-10vmax) scale(1.2)}}
  @keyframes fxDrift3{to{transform:translate(-12vmax,14vmax) scale(.85)}}

  /* soft spotlight that follows the mouse */
  .fx-spot{position:fixed;left:0;top:0;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:0;
    background:radial-gradient(circle,rgba(150,185,255,.14),transparent 65%);mix-blend-mode:screen;will-change:transform}

  /* thin scroll progress line */
  .fx-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
    background:linear-gradient(90deg,#6f9bff,#e0c48a);z-index:9999;pointer-events:none}

  /* scroll reveal */
  .motion .fx{opacity:0;transform:translateY(28px);filter:blur(6px)}
  .motion .fx.in{opacity:1;transform:none;filter:none;
    transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease}

  /* headline words rise one by one */
  .fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
  .fx-w > span{display:inline-block;transform:translateY(115%);
    animation:fxRise .95s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 80ms + 150ms)}
  @keyframes fxRise{to{transform:translateY(0)}}

  /* buttons: lift and shimmer */
  button{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
  button:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(110,150,255,.32)}
  button:active{transform:translateY(0)}
  button::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(110deg,transparent 30%,rgba(110,150,255,.4) 50%,transparent 70%);transform:translateX(-130%)}
  button:hover::after{transform:translateX(130%);transition:transform .75s ease}

  /* fields glow when you click into them */
  input:focus,textarea:focus,select:focus{box-shadow:0 0 0 1px rgba(160,190,255,.55),0 0 32px rgba(110,150,255,.18);transition:box-shadow .3s ease}

  /* nav links: underline slides in */
  nav a,header a{position:relative}
  nav a::after,header a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:0 50%;transition:transform .35s ease}
  nav a:hover::after,header a:hover::after{transform:scaleX(1)}
}