/* ==========================================================
   DESIGN TOKENS — Monochrome + Electric (brand) + Warm CTA
=========================================================== */
:root{
  --bg:#0A0A0B;
  --bg-2:#0f0f12;
  --surface:rgba(255,255,255,0.025);
  --surface-2:rgba(255,255,255,0.05);
  --border:rgba(255,255,255,0.09);
  --border-2:rgba(255,255,255,0.16);
  --text:#FAFAFA;
  --muted:#9a9aa4;
  --muted-2:#63636d;

  --accent:#3B6EFF;          /* brand blue: trust, highlights */
  --accent-2:#6f92ff;
  --accent-soft:rgba(59,110,255,0.12);
  --accent-line:rgba(59,110,255,0.40);

  --cta:#FF6A2C;             /* action orange: buttons only */
  --cta-2:#ff835a;
  --cta-soft:rgba(255,106,44,0.14);

  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter Tight',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;

  --radius:18px;
  --radius-sm:12px;
  --maxw:1200px;
  --ease:cubic-bezier(.16,1,.3,1);
  --topbar-h:44px;
  --header-h:88px;

  --depth:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 50px -26px rgba(0,0,0,.75);
  --depth-hover:0 1px 0 rgba(255,255,255,.08) inset, 0 34px 70px -28px rgba(0,0,0,.85);
}

*{margin:0;padding:0;box-sizing:border-box}
/* no global scroll-behavior:smooth: it turns ScrollTrigger's instant re-measure jumps into
   animated scrolls that fight the user. In-page links are smoothed in JS instead. */
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:300;line-height:1.7;letter-spacing:.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--cta);color:#fff}
html{scrollbar-color:#2c2f38 var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2c2f38;border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.03em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.accent{color:var(--accent)}
.warm{color:var(--cta)}

.label{font-family:var(--font-mono);font-weight:400;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}
.label .n{color:var(--accent)}

/* layered / textured background */
.bg-layer{position:fixed;inset:0;z-index:-3;pointer-events:none;background:var(--bg)}
.bg-glow{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(620px circle at 50% -6%,rgba(59,110,255,.16),transparent 60%),radial-gradient(500px circle at 88% 8%,rgba(255,106,44,.07),transparent 55%)}
.bg-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 15%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 15%,transparent 75%)}
.bg-noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ==========================================================
   BUTTONS
=========================================================== */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:500;font-size:.95rem;padding:14px 26px;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:.3s var(--ease);white-space:nowrap;letter-spacing:-.01em}
.btn svg{width:16px;height:16px;transition:.3s var(--ease)}
.btn-primary{background:var(--cta);color:#fff;box-shadow:0 10px 30px -8px rgba(255,106,44,.5)}
.btn-primary:hover{background:var(--cta-2);transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(255,106,44,.6)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-2)}
.btn-ghost:hover{border-color:var(--text);background:var(--surface-2)}

/* ==========================================================
   TOP BAR + NAV
=========================================================== */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:101;background:linear-gradient(90deg,rgba(59,110,255,.10),rgba(255,106,44,.08));border-bottom:1px solid var(--border);display:flex;align-items:center}
.tb-inner{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.05em;color:var(--muted);white-space:nowrap;overflow:hidden}
.tb-inner .dot{width:7px;height:7px;border-radius:50%;background:var(--cta);box-shadow:0 0 10px var(--cta)}
.tb-phone{color:var(--text);font-weight:700;transition:.25s}
.tb-phone:hover{color:var(--accent)}
header{position:fixed;top:var(--topbar-h);left:0;right:0;z-index:100;transition:.35s}
header.scrolled{background:rgba(10,10,11,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
@media (hover:none),(max-width:760px){header.scrolled{background:rgba(10,10,11,.96);backdrop-filter:none}}
nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:15px;font-family:var(--font-display);font-weight:700;font-size:1.62rem;letter-spacing:-.045em}
.logo .mark{width:52px;height:52px;border-radius:14px;background:linear-gradient(140deg,#161d33,#0a0c14);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;box-shadow:0 8px 26px -4px rgba(59,110,255,.5),inset 0 1px 0 rgba(255,255,255,.09);transition:.35s var(--ease)}
.logo:hover .mark{transform:translateY(-1px);box-shadow:0 12px 32px -6px rgba(59,110,255,.65),inset 0 1px 0 rgba(255,255,255,.12)}
.logo .mark svg{width:34px;height:34px}
.logo .lw{color:var(--accent)}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{color:var(--muted);font-size:.92rem;font-weight:400;transition:.25s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--accent);transition:.3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;gap:12px;align-items:center}
.menu-btn{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.menu-btn span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s}
.mobile-menu{display:none}

/* ==========================================================
   HERO
=========================================================== */
.hero{position:relative;padding:150px 0 60px;text-align:center}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-size:clamp(2.7rem,7.4vw,5.6rem);margin-bottom:20px;letter-spacing:-.045em}
.hero p.lead{font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--muted);max-width:640px;margin:0 auto 28px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.hero-micro{font-family:var(--font-mono);font-size:.76rem;color:var(--muted-2);letter-spacing:.04em;margin-bottom:40px}
.trust{display:flex;justify-content:center;flex-wrap:wrap;border:1px solid var(--border);border-radius:16px;max-width:760px;margin:0 auto;overflow:hidden;background:var(--surface);box-shadow:var(--depth)}
.trust>div{flex:1;min-width:200px;padding:24px 26px;text-align:left;border-right:1px solid var(--border)}
.trust>div:last-child{border-right:none}
.trust b{font-family:var(--font-display);font-size:1.5rem;font-weight:700;display:block;letter-spacing:-.03em;margin-bottom:2px}
.trust span{color:var(--muted-2);font-size:.86rem}

/* ==========================================================
   INTRO — "Blueprint to Live" scroll sequence
   Base CSS = the finished state (no JS, reduced motion, short
   screens). A tiny <head> script adds html.motion before first
   paint, so the start frame is already correct (no flash).
   Wipes are transform-only (GPU), never clip-path.
=========================================================== */
.intro{--hdr:132px;padding-bottom:84px}
.stage-wrap{position:relative;z-index:2}
.stage{position:relative;width:min(1120px,90vw);margin:46px auto 0;perspective:1700px;perspective-origin:50% 30%}
.device{position:relative;border-radius:14px;overflow:hidden;background:#101218;border:1px solid var(--border-2);box-shadow:0 60px 120px -50px rgba(0,0,0,.95),0 30px 70px -34px rgba(59,110,255,.22);transform-origin:50% 100%;text-align:left}
.device-bar{display:flex;align-items:center;gap:14px;height:40px;padding:0 16px;background:#15171e;border-bottom:1px solid var(--border)}
.device-bar .dots{display:flex;gap:7px;flex:none}
.device-bar .dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.device-url{flex:0 1 380px;margin:0 auto;padding:5px 14px;border-radius:7px;background:rgba(255,255,255,.05);font-family:var(--font-mono);font-size:.74rem;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device-live{flex:none;display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#3fd07a}
.device-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#3fd07a;box-shadow:0 0 8px #3fd07a}
.screen{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#fff;container-type:inline-size}
.layer{position:absolute;inset:0;overflow:hidden}
.wipe-in{position:absolute;inset:0}
.shot img,.p-shot img{display:block;width:100%;height:auto}
.scan{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#b7cbff;box-shadow:0 0 14px 2px rgba(59,110,255,.85),0 0 42px 8px rgba(59,110,255,.35);opacity:0;visibility:hidden;z-index:5;pointer-events:none}

/* blueprint + design layers: blocks positioned in % / cqw of the screen */
.b{position:absolute;display:block;left:calc(var(--x)*1%);top:calc(var(--y)*1cqw);width:calc(var(--w)*1%);height:calc(var(--h)*1cqw);border-radius:.3cqw}
.b.round{border-radius:50%}
.blue{background-color:#0a1024;background-image:linear-gradient(rgba(111,146,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(111,146,255,.1) 1px,transparent 1px);background-size:2.5cqw 2.5cqw}
.blue .b{border:1px dashed rgba(143,170,255,.7);background:rgba(59,110,255,.07)}
.blue .b.pic{background:linear-gradient(to top right,transparent calc(50% - .6px),rgba(143,170,255,.5) 50%,transparent calc(50% + .6px)),linear-gradient(to top left,transparent calc(50% - .6px),rgba(143,170,255,.5) 50%,transparent calc(50% + .6px)),rgba(59,110,255,.06)}
.note{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1cqw);font-family:var(--font-mono);font-size:clamp(9px,.95cqw,12px);line-height:1;color:#d3ddff;background:rgba(59,110,255,.24);border:1px solid rgba(143,170,255,.55);padding:.35em .6em;border-radius:3px;white-space:nowrap;letter-spacing:.03em}
.design .wipe-in{background:#fff}
.design .b{background:#dfe2e7}
.design .k{background:#141518}
.design .o{background:#e8590c}
.design .ol{background:transparent;box-shadow:inset 0 0 0 1.5px #141518}
.design .logo{background:#ee6a1c;box-shadow:inset 0 0 0 2px #141518}
.design .hand{background:#eceef1}
.design .pic{background:linear-gradient(180deg,#c9d3d6 0%,#9fb09d 42%,#6a8664 70%,#4a6141 100%)}
.design .pic::after{content:"";position:absolute;left:32%;top:18%;width:36%;height:56%;border-radius:8%;background:#1b1e23;box-shadow:0 1.2cqw 2.4cqw rgba(0,0,0,.35)}

/* phone */
.phone{position:absolute;right:-3.5%;bottom:-5%;width:clamp(170px,20%,236px);aspect-ratio:9/19.5;padding:8px;border-radius:36px;background:linear-gradient(150deg,#30333c,#101116 60%);box-shadow:0 50px 90px -30px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.1);z-index:3;text-align:left}
.phone-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:29px;background:#fff;container-type:inline-size}
.phone-screen::after{content:"";position:absolute;top:7px;left:50%;width:32%;height:18px;margin-left:-16%;border-radius:12px;background:#0b0c10;z-index:6}
.p-wire{display:none}

/* captions naming the real client sites */
.chip{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:100px;background:rgba(10,10,11,.84);border:1px solid var(--border-2);font-family:var(--font-display);font-size:.78rem;font-weight:500;color:var(--text);white-space:nowrap;box-shadow:0 10px 24px -12px rgba(0,0,0,.8)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:#3fd07a;flex:none}
.device .chip{left:16px;top:56px}
.phone .chip{top:-42px;left:0;right:0;margin:0 auto;width:max-content}
.chip .m{display:none}

/* step indicator (motion only) */
.intro-steps{display:none}
.steps-list{display:flex;gap:30px;list-style:none;margin:0 0 10px;padding:0}
.steps-list li{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:.88rem;font-weight:500;color:var(--muted);transition:color .3s var(--ease)}
.steps-list li i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--muted);transition:.3s var(--ease)}
.steps-list li.on{color:var(--text)}
.steps-list li.on i{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.steps-list li.done{color:var(--muted)}
.steps-list li.done i{border-color:var(--accent);background:var(--accent)}
.steps-bar{display:block;height:1px;background:var(--border-2);overflow:hidden}
.steps-bar b{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}

.scroll-cue{display:none}
html.motion .scroll-cue{display:flex;align-items:center;gap:10px;position:absolute;z-index:5;left:0;right:0;bottom:24px;margin:0 auto;width:max-content;padding:9px 16px;border-radius:100px;background:rgba(10,10,11,.88);border:1px solid var(--border-2);font-family:var(--font-display);font-size:.82rem;font-weight:500;color:var(--text);box-shadow:0 14px 30px -14px rgba(0,0,0,.9)}
.scroll-cue svg{width:15px;height:15px;stroke:var(--accent);animation:cue 1.6s var(--ease) infinite}
.intro.started .scroll-cue svg{animation:none}
@keyframes cue{0%{transform:translateY(-3px);opacity:0}40%{opacity:1}100%{transform:translateY(4px);opacity:0}}
.trust-wrap{margin-top:34px}

@media(max-width:760px){
  .stage{width:auto;margin-top:34px;display:flex;justify-content:center}
  .device{display:none}
  .phone{position:relative;right:auto;bottom:auto;width:min(280px,72vw);transform-origin:50% 100%}
  .p-wire{display:block}
  .chip .d{display:none}
  .chip .m{display:inline}
  .phone .chip{top:auto;bottom:-16px}
  .steps-list{gap:18px}
  .steps-list li{font-size:.8rem}
}
@media(max-width:560px){.intro{--hdr:120px}}

/* ---- motion mode: the start frame of the scroll sequence ---- */
html.motion .intro{height:100vh;height:100svh;overflow:hidden;padding-bottom:0}
html.motion .intro-steps{display:block;position:absolute;z-index:4;left:0;right:0;top:calc(var(--hdr) + 16px);margin:0 auto;width:max-content;visibility:hidden}
html.motion .chip,html.motion .device-live{opacity:0;visibility:hidden}
html.motion .layer.design,html.motion .layer.shot,html.motion .wipe-in,html.motion .shot img,
html.motion .stage,html.motion .device,html.motion .phone,html.motion .scan{will-change:transform}
html.motion .intro-copy{will-change:transform,opacity}
@media(min-width:761px){
  html.motion .screen{max-height:calc(100svh - var(--hdr) - 150px)}
  html.motion .device{transform:rotateX(24deg) scale(.9)}
  html.motion .device .design{transform:translateY(-100%)}
  html.motion .device .design>.wipe-in{transform:translateY(100%)}
  html.motion .device .shot{transform:translateX(-100%)}
  html.motion .device .shot>.wipe-in{transform:translateX(100%)}
  html.motion .phone{opacity:0;transform:translate(170px,150px) rotate(9deg)} /* transparent, not hidden: its screenshot stays pre-rendered */
}
@media(max-width:760px){
  html.motion .phone{width:auto;height:min(calc(100svh - var(--hdr) - 110px),600px);transform:rotateX(16deg) scale(.9)}
  html.motion .phone .design{transform:translateY(-100%)}
  html.motion .phone .design>.wipe-in{transform:translateY(100%)}
  html.motion .phone .shot{transform:translateX(-100%)}
  html.motion .phone .shot>.wipe-in{transform:translateX(100%)}
}

/* ==========================================================
   SECTIONS
=========================================================== */
section{padding:72px 0;position:relative}
.sec-head{max-width:660px;margin:0 auto 40px;text-align:center}
.sec-head .label{margin-bottom:18px;display:inline-block}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:18px}
.sec-head p{color:var(--muted);font-size:1.06rem}

.marquee-wrap{overflow:hidden;padding:22px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee{display:flex;white-space:nowrap;animation:scroll 30s linear infinite;width:max-content}
.marquee.paused{animation-play-state:paused}
.marquee span{font-family:var(--font-display);font-weight:500;font-size:1.05rem;color:var(--muted);display:flex;align-items:center;padding:0 34px}
.marquee span::before{content:"";width:6px;height:6px;background:var(--accent);transform:rotate(45deg);margin-right:34px;flex-shrink:0}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ==========================================================
   SERVICES — bento (depth, low text, no busy icons)
=========================================================== */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;grid-auto-rows:minmax(150px,auto)}
.b-card{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);padding:32px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));box-shadow:var(--depth);transition:.45s var(--ease);display:flex;flex-direction:column}
.b-card:hover{transform:translateY(-5px);border-color:var(--border-2);box-shadow:var(--depth-hover)}
.b-card .tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:auto}
.b-card h3{font-size:1.5rem;margin:26px 0 10px;font-weight:600;letter-spacing:-.03em}
.b-card p{color:var(--muted);font-size:.97rem;max-width:42ch}
.b-card .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.b-card .chips span{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);border:1px solid var(--border);border-radius:100px;padding:5px 12px}
.b-card .beam{position:absolute;width:280px;height:200px;border-radius:50%;filter:blur(70px);top:-70px;right:-60px;opacity:.5;transition:.5s var(--ease)}
.b-card:hover .beam{opacity:.9}
.b-lg{grid-column:span 3}
.b-md{grid-column:span 3}
.b-sm{grid-column:span 2}
.b-wide{grid-column:span 6;flex-direction:row;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.b-wide .tag{margin-bottom:0}
.b-wide .txt{max-width:640px}
.b-wide h3{margin:12px 0 8px}
.b-card.blue .beam{background:var(--accent)}
.b-card.warm .beam{background:var(--cta)}
.b-price-pill{font-family:var(--font-mono);font-size:.82rem;color:var(--text);border:1px solid var(--border-2);border-radius:100px;padding:10px 18px;white-space:nowrap}

/* ==========================================================
   PORTFOLIO
=========================================================== */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.project{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--surface);box-shadow:var(--depth);transition:.4s var(--ease);cursor:pointer;display:block}
.project:hover{transform:translateY(-6px);border-color:var(--border-2);box-shadow:var(--depth-hover)}
.project .thumb{aspect-ratio:16/9;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(160deg,#141418,#0a0a0b)}
.project .thumb .idx{position:absolute;right:22px;bottom:8px;font-family:var(--font-mono);font-weight:700;font-size:5.5rem;color:rgba(255,255,255,.04);line-height:1}
.project .thumb .glow{position:absolute;width:280px;height:200px;border-radius:50%;filter:blur(60px);background:rgba(59,110,255,.14);top:-40px;left:-40px;transition:.5s var(--ease)}
.project:hover .thumb .glow{background:rgba(59,110,255,.26)}
.project .thumb .ph{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);border:1px dashed var(--border-2);padding:9px 16px;border-radius:100px;z-index:2}
.project .thumb .live{font-family:var(--font-display);font-weight:600;font-size:1.4rem;color:var(--text);z-index:2}
.project .status{position:absolute;top:18px;left:18px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);z-index:3;display:flex;align-items:center;gap:7px}
.project .status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.project .status.on{color:#3fd07a}.project .status.on::before{background:#3fd07a;box-shadow:0 0 10px #3fd07a}
.project .info{padding:22px 24px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border)}
.project .info h4{font-size:1.12rem;font-weight:600}
.project .info .tag{font-family:var(--font-mono);font-size:.74rem;color:var(--muted-2)}
.project .info .arrow{color:var(--muted-2);transition:.3s var(--ease)}
.project:hover .arrow{color:var(--cta);transform:translate(4px,-4px)}
.project .arrow svg{width:20px;height:20px}

/* ==========================================================
   TESTIMONIALS
=========================================================== */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tst{border:1px solid var(--border);border-radius:var(--radius);padding:30px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01));box-shadow:var(--depth)}
.tst .stars{display:flex;gap:4px;margin-bottom:18px}
.tst .stars svg{width:16px;height:16px;fill:var(--accent)}
.tst p{color:var(--text);font-size:1rem;font-weight:300;margin-bottom:22px}
.tst .who{display:flex;align-items:center;gap:12px}
.tst .who .av{width:40px;height:40px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-2);display:grid;place-items:center;font-family:var(--font-display);font-weight:600;color:var(--muted)}
.tst .who b{font-family:var(--font-display);font-size:.92rem;font-weight:600;display:block}
.tst .who span{font-family:var(--font-mono);font-size:.72rem;color:var(--muted-2)}

/* ==========================================================
   RECENTLY DELIVERED
=========================================================== */
.delivered-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.delivered{display:block;border:1px solid var(--border);border-radius:var(--radius);padding:34px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01));box-shadow:var(--depth);transition:.4s var(--ease)}
.delivered:hover{transform:translateY(-5px);border-color:var(--border-2);box-shadow:var(--depth-hover)}
.d-media{overflow:hidden;border-radius:12px;border:1px solid var(--border);margin-bottom:24px;background:#fff;aspect-ratio:16/10}
.d-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.delivered:hover .d-media img{transform:scale(1.035)}
.d-top{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.d-live{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#3fd07a;display:flex;align-items:center;gap:7px}
.d-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#3fd07a;box-shadow:0 0 10px #3fd07a}
.d-cat{font-family:var(--font-mono);font-size:.72rem;color:var(--muted-2);letter-spacing:.02em}
.delivered h3{font-size:1.5rem;font-weight:600;margin-bottom:10px;letter-spacing:-.03em}
.delivered p{color:var(--muted);font-size:.96rem;margin-bottom:22px}
.d-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:500;font-size:.94rem;color:var(--accent);transition:.3s var(--ease)}
.d-link svg{width:16px;height:16px;transition:.3s var(--ease)}
.delivered:hover .d-link svg{transform:translate(3px,-3px)}

/* ==========================================================
   GUARANTEE BAND
=========================================================== */
.guarantee{border:1px solid var(--border);border-radius:20px;padding:36px 34px;background:radial-gradient(700px circle at 15% 0%,var(--accent-soft),transparent 55%),linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.008));box-shadow:var(--depth);display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.g-item{display:flex;flex-direction:column;gap:10px}
.g-item .ic{width:40px;height:40px;border-radius:10px;border:1px solid var(--accent-line);background:var(--accent-soft);display:grid;place-items:center}
.g-item .ic svg{width:20px;height:20px;stroke:var(--accent)}
.g-item h3{font-size:1.05rem;font-weight:600}
.g-item p{color:var(--muted);font-size:.9rem}

/* ==========================================================
   PROCESS
=========================================================== */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{position:relative;padding:32px 26px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--depth);transition:.4s var(--ease)}
.step:hover{border-color:var(--border-2);transform:translateY(-4px)}
.step .num{font-family:var(--font-mono);font-weight:700;font-size:1rem;color:var(--accent);margin-bottom:22px;letter-spacing:.1em}
.step h3{font-size:1.2rem;margin-bottom:10px;font-weight:600}
.step p{color:var(--muted);font-size:.92rem}

/* ==========================================================
   PRICING
=========================================================== */
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:stretch;max-width:820px;margin:0 auto}
.price-card{border:1px solid var(--border);border-radius:var(--radius);padding:40px 34px;display:flex;flex-direction:column;transition:.4s var(--ease);position:relative;background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.008));box-shadow:var(--depth)}
.price-card:hover{border-color:var(--border-2);transform:translateY(-5px);box-shadow:var(--depth-hover)}
.price-card.featured{border-color:var(--accent-line);background:radial-gradient(500px circle at 100% 0%,var(--accent-soft),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.price-card.featured::before{content:"Most popular";position:absolute;top:-12px;left:34px;background:var(--accent);color:#fff;font-family:var(--font-mono);font-weight:400;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 16px;border-radius:100px}
.price-card .tier{font-family:var(--font-mono);font-weight:400;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.price-card .price{font-family:var(--font-display);font-weight:700;font-size:3rem;letter-spacing:-.04em;line-height:1}
.price-card .price-note{color:var(--muted-2);font-family:var(--font-mono);font-size:.78rem;margin:10px 0 8px}
.price-card .tier-desc{color:var(--muted);font-size:.94rem;margin:16px 0 26px;min-height:44px}
.price-card ul{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:30px;flex:1}
.price-card ul li{display:flex;align-items:flex-start;gap:11px;font-size:.94rem;color:var(--muted)}
.price-card ul li svg{flex-shrink:0;margin-top:4px;width:15px;height:15px;stroke:var(--accent)}
.price-card .btn{width:100%;justify-content:center}

/* ongoing / hosting panel */
.ongoing{margin-top:22px;border:1px solid var(--border);border-radius:var(--radius);padding:34px 38px;background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.006));box-shadow:var(--depth);display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ongoing .o-item .o-h{font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin-bottom:8px;display:flex;align-items:baseline;gap:10px}
.ongoing .o-item .o-h b{font-family:var(--font-mono);color:var(--cta);font-weight:700;font-size:.9rem}
.ongoing .o-item p{color:var(--muted);font-size:.9rem}
.ongoing .o-item .free{color:#3fd07a;font-family:var(--font-mono);font-size:.82rem}

/* ==========================================================
   WHY / STATS
=========================================================== */
.why{display:grid;grid-template-columns:1.05fr 1fr;gap:46px;align-items:center}
.why-list{display:flex;flex-direction:column;gap:26px}
.why-item{display:flex;gap:18px}
.why-item .ic{width:44px;height:44px;border-radius:11px;border:1px solid var(--border-2);display:grid;place-items:center;flex-shrink:0}
.why-item .ic svg{width:20px;height:20px;stroke:var(--accent)}
.why-item h3{font-size:1.08rem;margin-bottom:6px;font-weight:600}
.why-item p{color:var(--muted);font-size:.94rem}
.stat-box{border:1px solid var(--border);border-radius:var(--radius);display:grid;grid-template-columns:1fr 1fr;background:var(--surface);box-shadow:var(--depth);overflow:hidden}
.stat{padding:34px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat:nth-child(2n){border-right:none}
.stat:nth-child(3),.stat:nth-child(4){border-bottom:none}
.stat b{font-family:var(--font-display);font-weight:700;font-size:2.5rem;display:block;letter-spacing:-.04em;color:var(--accent);margin-bottom:6px}
.stat span{color:var(--muted);font-size:.9rem}

/* ==========================================================
   CONTACT
=========================================================== */
.contact-box{border:1px solid var(--border);border-radius:20px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:44px;position:relative;overflow:hidden;background:radial-gradient(600px circle at 100% 0%,var(--cta-soft),transparent 55%),linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.008));box-shadow:var(--depth)}
.contact-info h2{font-size:clamp(1.9rem,4vw,2.6rem);margin:16px 0 16px}
.contact-info p{color:var(--muted);margin-bottom:30px}
.contact-methods{display:flex;flex-direction:column;gap:14px}
.contact-method{display:flex;align-items:center;gap:15px;padding:15px 18px;border:1px solid var(--border);border-radius:12px;transition:.3s var(--ease)}
.contact-method:hover{border-color:var(--accent-line);background:var(--accent-soft);transform:translateX(4px)}
.contact-method .ic{width:42px;height:42px;border-radius:10px;border:1px solid var(--border-2);display:grid;place-items:center;flex-shrink:0}
.contact-method .ic svg{width:19px;height:19px;stroke:var(--accent)}
.contact-method .m-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.contact-method .m-val{font-family:var(--font-display);font-weight:500;font-size:1rem}
form{position:relative;z-index:2;display:flex;flex-direction:column;gap:15px}
form label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:-8px}
form input,form select,form textarea{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;color:var(--text);font-family:var(--font-body);font-weight:300;font-size:.95rem;transition:.25s;width:100%}
form input::placeholder,form textarea::placeholder{color:var(--muted-2)}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px var(--cta-soft)}
form textarea{resize:vertical;min-height:108px}
form .btn{justify-content:center;margin-top:6px}
.form-note{font-family:var(--font-mono);font-size:.74rem;color:var(--muted-2);text-align:center}

/* ==========================================================
   FAQ
=========================================================== */
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:.3s;background:var(--surface)}
.faq-item[open]{border-color:var(--border-2)}
.faq-item summary{padding:22px 26px;cursor:pointer;font-family:var(--font-display);font-weight:500;font-size:1.04rem;display:flex;justify-content:space-between;align-items:center;list-style:none;letter-spacing:-.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{color:var(--cta);font-size:1.4rem;transition:.3s var(--ease);flex-shrink:0;margin-left:16px;font-weight:300}
.faq-item[open] summary .plus{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 26px 24px;color:var(--muted);font-size:.96rem}

/* ==========================================================
   CTA STRIP
=========================================================== */
.cta-strip{text-align:center;padding:64px 40px;border:1px solid var(--border);border-radius:20px;position:relative;overflow:hidden;background:radial-gradient(700px circle at 50% -30%,var(--cta-soft),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.008));box-shadow:var(--depth)}
.cta-strip h2{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:16px}
.cta-strip p{color:var(--muted);font-size:1.08rem;margin:0 auto 32px;max-width:520px}

/* ==========================================================
   FOOTER
=========================================================== */
footer{border-top:1px solid var(--border);padding:44px 0 30px;margin-top:24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:36px}
.footer-brand p{color:var(--muted);font-size:.93rem;margin-top:16px;max-width:300px}
.footer-col .footer-h{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px}
.footer-col a{display:block;color:var(--muted);font-size:.93rem;margin-bottom:12px;transition:.25s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid var(--border);color:var(--muted-2);font-family:var(--font-mono);font-size:.76rem;flex-wrap:wrap;gap:12px}

.wa-float{position:fixed;bottom:26px;right:26px;width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 30px rgba(37,211,102,.45);z-index:99;transition:.3s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:28px;height:28px}

/* motion */
.rise{opacity:0;animation:riseIn .9s var(--ease) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.5s}
@keyframes riseIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(30px);transition:.85s var(--ease)}
.reveal.show{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise,.reveal{animation:none;opacity:1;transform:none}}

/* responsive */
@media(max-width:920px){
  .bento{grid-template-columns:1fr}
  .b-lg,.b-md,.b-sm,.b-wide{grid-column:span 1}
  .b-wide{flex-direction:column;align-items:flex-start}
  .pricing-grid,.portfolio-grid,.tst-grid,.delivered-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr 1fr}
  .guarantee,.ongoing{grid-template-columns:1fr 1fr}
  .why,.contact-box,.footer-grid{grid-template-columns:1fr}
  .nav-links,.nav-cta .btn-ghost{display:none}
  .menu-btn{display:flex}
  .contact-box{padding:34px 24px}
  .mobile-menu{position:fixed;top:calc(var(--topbar-h) + var(--header-h));left:0;right:0;background:rgba(10,10,11,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);flex-direction:column;padding:24px;gap:20px;display:none;z-index:99}
  .mobile-menu.open{display:flex}
  .mobile-menu a{color:var(--muted);font-family:var(--font-display);font-weight:500;font-size:1.05rem}
  section{padding:78px 0}
}
@media(max-width:560px){
  :root{--header-h:76px}
  .process-grid,.guarantee,.ongoing{grid-template-columns:1fr}
  .trust>div{border-right:none;border-bottom:1px solid var(--border)}
  .trust>div:last-child{border-bottom:none}
  .hero{padding:128px 0 44px}
  .hero h1{font-size:clamp(2.3rem,9vw,3.1rem)}
  .stat b{font-size:2.1rem}
  .tb-inner{gap:10px;font-size:.72rem}
  .tb-inner .tb-phone,.tb-extra{display:none}
  .ls-frame,.ls-frame iframe{height:340px}
  .wrap{padding:0 18px}
  .logo{font-size:1.3rem;gap:11px}
  .logo .mark{width:46px;height:46px;border-radius:12px}
  .logo .mark svg{width:30px;height:30px}
  .nav-cta .btn-primary{display:none}
  .b-card{padding:24px}
  .b-card h3{font-size:1.32rem}
  .guarantee,.contact-box,.cta-strip{padding:28px 22px}
  .live-showcase{border-radius:14px}
}

/* ===== SUBPAGES (generated into site.css by _build/build.py; edit the _build copy) ===== */
section[id]{scroll-margin-top:140px}
.more-link{text-align:center;margin-top:26px;font-weight:500}
.page{--hdr:132px;padding:calc(var(--hdr) + 34px) 0 30px}
@media(max-width:560px){.page{--hdr:120px}}
.page-hero,.prose{max-width:820px;margin:0 auto;padding:0 26px}
.page-hero{margin-bottom:30px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;height:auto;gap:8px;margin-bottom:18px;font-family:var(--font-mono);font-size:.76rem;color:var(--muted)}
.crumbs a{color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--text)}
.crumbs .sep{color:var(--muted-2)}
.crumbs [aria-current]{color:var(--text)}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.3rem);letter-spacing:-.04em;line-height:1.08;margin-bottom:16px;text-wrap:balance}
.page-lead{font-size:clamp(1.02rem,2vw,1.15rem);color:var(--muted);max-width:62ch}
.byline{margin-top:18px;font-size:.86rem;color:var(--muted)}
.byline b{color:var(--text);font-weight:500}
.prose h2{font-size:clamp(1.45rem,3vw,1.9rem);margin:48px 0 14px;letter-spacing:-.03em;text-wrap:balance}
.prose h2:first-child{margin-top:8px}
.prose h3{font-size:1.15rem;margin:26px 0 8px;font-weight:600}
.prose p{color:#c6c6ce;margin-bottom:14px;max-width:70ch}
.prose ul,.prose ol{margin:0 0 18px 1.2em;color:#c6c6ce;max-width:68ch}
.prose li{margin-bottom:8px;padding-left:4px}
.prose li::marker{color:var(--accent)}
.prose strong{color:var(--text);font-weight:600}
.prose a:not(.btn){color:var(--accent-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:not(.btn):hover{color:#fff}
.answer{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:14px;padding:20px 22px;margin:4px 0 26px}
.answer p{color:var(--text);margin:0;max-width:none}
.table-wrap{overflow-x:auto;margin:12px 0 10px;border:1px solid var(--border);border-radius:12px}
.prose table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:540px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.prose th{font-family:var(--font-display);font-weight:600;color:var(--text);background:var(--surface-2)}
.prose td{color:#c6c6ce}
.prose td b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.prose tr:last-child td{border-bottom:none}
.method-note{font-size:.84rem;color:var(--muted);margin-bottom:24px}
.price-tag{display:inline-block;font-family:var(--font-mono);font-size:.78rem;color:var(--text);border:1px solid var(--border-2);border-radius:100px;padding:5px 12px;margin:0 0 12px}
.case-shot{margin:4px 0 30px;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#fff;aspect-ratio:16/10}
.case-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 30px}
.facts div{border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--surface)}
.facts span{display:block;font-size:.78rem;color:var(--muted);margin-bottom:2px}
.facts b{font-family:var(--font-display);font-weight:600;font-size:.98rem}
.sources li{font-size:.88rem;color:var(--muted)}
.contact-lines{list-style:none;margin-left:0!important}
.prose .faq-list{max-width:none;margin:8px 0 0}
.not-found{text-align:center}
.not-found .prose p,.not-found .page-lead{margin-left:auto;margin-right:auto}
@media(max-width:640px){.facts{grid-template-columns:1fr}}