/* ============================================================
   SCALEWELL — landing page sections
   ============================================================ */

/* ---------- HERO ---------- */
.hero { position: relative; padding-top: 112px; padding-bottom: clamp(44px, 6vw, 88px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border:1px solid var(--line); border-radius:999px; background:rgba(15,23,42,.03); font-size:13px; font-weight:600; color:var(--dim); margin-bottom:20px; }
.hero-eyebrow .pill { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.02em; }
.hero-eyebrow .pulse { width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)} 70%{box-shadow:0 0 0 7px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} }
.hero h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); letter-spacing: -0.04em; line-height: 0.98; }
.hero .lead { margin-top: 18px; max-width: 540px; }
.hero .accent-text {
  background: linear-gradient(100deg, var(--accent-2), color-mix(in oklab, var(--accent) 55%, #c084fc), var(--accent-2));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: hueShift 7s ease-in-out infinite;
}
@keyframes hueShift { 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 24px; }
.trust-badge { display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border:1px solid var(--line); border-radius:12px; background:rgba(15,23,42,.025); font-size:13.5px; font-weight:600; color:var(--dim); }
.trust-badge svg { width:16px; height:16px; color:var(--accent-2); flex:none; }

/* hero visual */
.hero-viz { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; border:1px solid var(--line); }
.hero-viz .viz { position:absolute; inset:0; border:none; border-radius:0; }
.hero-viz .float-card { position:absolute; background:color-mix(in oklab, var(--surface) 52%, transparent); border:1px solid rgba(255,255,255,.12); border-radius:13px; padding:11px 14px; backdrop-filter:blur(18px) saturate(140%); box-shadow:0 16px 40px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); opacity:.92; }
.hero-viz .fc-1 { top:46px; left:-18px; animation: cardIn .7s var(--ease-out) .3s both, floaty 6s ease-in-out 1.2s infinite; }
.hero-viz .fc-2 { bottom:30px; right:-14px; animation: cardIn .7s var(--ease-out) .5s both, floaty 7s ease-in-out 1.4s infinite reverse; }
.hero-viz .fc-3 { bottom:42%; left:-26px; animation: cardIn .7s var(--ease-out) .7s both, floaty 8s ease-in-out 1.7s infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes cardIn { from { opacity:0; transform:translateY(16px) scale(.95); } to { opacity:.92; transform:none; } }
.fc-label { font-size:11px; color:var(--faint); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.fc-value { font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-.02em; margin-top:3px; }
.fc-value small { color:var(--accent-2); font-size:14px; }
.fc-stars { color:var(--accent-2); font-size:15px; letter-spacing:2px; }

.logo-strip { margin-top: clamp(48px, 6vw, 80px); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.logo-strip .lab { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:700; }
.logo-strip .marquee { display:flex; gap:34px; flex-wrap:wrap; opacity:.62; }
.logo-strip .marquee span { font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--dim); }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-viz { aspect-ratio: 16/12; max-width: 460px; }
}

/* ---------- HERO BACKGROUND MODES (mesh / reel / static) ---------- */
.hero-viz .viz-reel, .hero-viz .viz-static { position:absolute; inset:0; display:none; }
.hero-viz[data-hero-bg="reel"] .viz { display:none; }
.hero-viz[data-hero-bg="reel"] .viz-reel { display:block; }
.hero-viz[data-hero-bg="static"] .viz { display:none; }
.hero-viz[data-hero-bg="static"] .viz-static { display:block; }
/* in reel mode, clear the two cards overlapping the mock screen; keep the rating card as proof */
.hero-viz[data-hero-bg="reel"] .fc-1,
.hero-viz[data-hero-bg="reel"] .fc-3 { display:none; }
.hero-viz[data-hero-bg="reel"] .fc-2 { z-index:4; }

/* --- Static option: clean single gradient, no motion --- */
.viz-static {
  background:
    radial-gradient(70% 75% at 28% 24%, color-mix(in oklab, var(--accent-2) 85%, #fff), transparent 64%),
    radial-gradient(72% 76% at 82% 78%, color-mix(in oklab, var(--accent) 50%, #c084fc), transparent 66%),
    linear-gradient(150deg, color-mix(in oklab, var(--accent) 76%, #000), color-mix(in oklab, var(--accent) 22%, #4c1d95));
}

/* --- Reel option: looping montage of mock site screens (mocked video) --- */
.viz-reel { overflow:hidden; background:#eef1f6; }
.reel-frame { position:absolute; inset:0; opacity:0; will-change:opacity, transform; animation:reelCycle 18s infinite; }
.reel-frame.rf2 { animation-delay:-13.5s; } /* frames evenly offset across 18s loop */
.reel-frame.rf3 { animation-delay:-9s; }
.reel-frame.rf4 { animation-delay:-4.5s; }
@keyframes reelCycle {
  0%   { opacity:0; transform:scale(1.06); }
  2.5% { opacity:1; }
  22%  { opacity:1; transform:scale(1.0); }
  25%  { opacity:0; transform:scale(1.0); }
  100% { opacity:0; transform:scale(1.06); }
}
.rf-screen { position:absolute; inset:0; padding:0; display:flex; flex-direction:column; }
.rf-bar { display:flex; align-items:center; gap:7px; padding:13px 16px; background:rgba(15,23,42,.04); border-bottom:1px solid rgba(15,23,42,.07); }
.rf-bar i { width:9px; height:9px; border-radius:50%; background:rgba(15,23,42,.16); }
.rf-bar .rf-url { margin-left:10px; height:16px; flex:1; max-width:60%; border-radius:5px; background:rgba(15,23,42,.08); }
.rf-body { flex:1; padding:26px 28px; position:relative; }
.b-line { height:13px; border-radius:5px; background:rgba(15,23,42,.78); margin-bottom:12px; }
.b-line.dim { background:rgba(15,23,42,.22); height:10px; }
.b-line.w70{width:70%} .b-line.w55{width:55%} .b-line.w45{width:45%} .b-line.w35{width:35%} .b-line.w25{width:25%}
.b-btn { width:120px; height:34px; border-radius:9px; margin-top:20px; background:var(--accent); box-shadow:0 8px 20px -8px var(--glow); }
.b-img { position:absolute; border-radius:12px; }

/* Frame 1 — SaaS landing */
.rf1 .rf-screen { background:linear-gradient(160deg,#ffffff,#f4f6f9); }
.rf1 .rf-img { right:28px; top:64px; width:38%; bottom:32px; background:linear-gradient(150deg,var(--accent),#7c3aed); opacity:.9; }
/* Frame 2 — gallery grid */
.rf2 .rf-screen { background:linear-gradient(160deg,#ffffff,#f5f4f8); }
.rf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.rf-grid div { aspect-ratio:1; border-radius:10px; }
.rf-grid div:nth-child(1){background:linear-gradient(140deg,var(--accent),#22d3ee)}
.rf-grid div:nth-child(2){background:linear-gradient(140deg,#c084fc,var(--accent))}
.rf-grid div:nth-child(3){background:linear-gradient(140deg,#34d399,var(--accent))}
.rf-grid div:nth-child(4){background:linear-gradient(140deg,#fb7185,#c084fc)}
.rf-grid div:nth-child(5){background:linear-gradient(140deg,var(--accent-2),var(--accent))}
.rf-grid div:nth-child(6){background:linear-gradient(140deg,#22d3ee,#7c3aed)}
/* Frame 3 — portfolio hero */
.rf3 .rf-screen { background:linear-gradient(160deg,#ffffff,#f3f6f9); }
.rf3 .rf-img { inset:60px 28px 90px; background:linear-gradient(150deg,#22d3ee,var(--accent),#7c3aed); }
.rf3 .rf-cap { position:absolute; left:28px; right:28px; bottom:26px; }
/* Frame 4 — dashboard */
.rf4 .rf-screen { background:linear-gradient(160deg,#ffffff,#f4f6f9); }
.rf4 .rf-dash { display:flex; gap:14px; height:100%; }
.rf4 .rf-side { width:64px; border-radius:10px; background:rgba(15,23,42,.05); }
.rf4 .rf-main { flex:1; display:flex; flex-direction:column; gap:12px; }
.rf4 .rf-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.rf4 .rf-cards div { height:46px; border-radius:9px; background:rgba(15,23,42,.06); }
.rf4 .rf-cards div:first-child { background:color-mix(in oklab,var(--accent) 40%,transparent); }
.rf4 .rf-chart { flex:1; border-radius:10px; background:rgba(15,23,42,.04); display:flex; align-items:flex-end; gap:8px; padding:14px; }
.rf4 .rf-chart i { flex:1; border-radius:4px 4px 0 0; background:linear-gradient(var(--accent-2),var(--accent)); }

.reel-tag { position:absolute; top:14px; left:14px; z-index:3; display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.8); border:1px solid rgba(15,23,42,.1); backdrop-filter:blur(8px); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text); box-shadow:0 4px 14px -6px rgba(15,23,42,.3); }
.reel-tag span { width:8px; height:8px; border-radius:50%; background:#fb5050; box-shadow:0 0 8px #fb5050; animation:pulse 2s infinite; }
.reel-progress { position:absolute; left:0; right:0; bottom:0; height:3px; z-index:3; background:rgba(15,23,42,.1); }
.reel-progress > div { height:100%; width:25%; background:var(--accent-2); animation:reelBar 4.5s linear infinite; }
@keyframes reelBar { from{transform:translateX(-100%)} to{transform:translateX(400%)} }

@media (prefers-reduced-motion: reduce) {
  .reel-frame { animation-duration:0s; }
  .reel-frame.rf1 { opacity:1; }
  .reel-frame.rf2, .reel-frame.rf3, .reel-frame.rf4 { display:none; }
  .reel-progress > div { animation:none; }
}

/* ---------- PORTFOLIO ---------- */
.work-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom: clamp(36px,4vw,56px); }
.work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.work-card { display:block; cursor:pointer; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:var(--surface); box-shadow:0 1px 2px rgba(15,23,42,.04), 0 16px 36px -24px rgba(15,23,42,.22); transition:transform .5s var(--ease), border-color .4s, box-shadow .5s; }
.work-card:hover { transform:translateY(-6px); border-color:rgba(15,23,42,.16); box-shadow:0 34px 70px -34px rgba(15,23,42,.5); }
.work-thumb { position:relative; aspect-ratio:16/10; overflow:hidden; }
.work-thumb > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.work-card:hover .work-thumb > img { transform:scale(1.03); transition:transform .6s var(--ease); }
.work-thumb .viz { position:absolute; inset:0; border:none; border-radius:0; }
.work-thumb .num { position:absolute; top:16px; left:18px; font-family:var(--font-display); font-weight:700; font-size:14px; color:rgba(255,255,255,.7); z-index:2; }
.work-open { position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; background:rgba(8,9,12,.55); border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:#fff; z-index:2; backdrop-filter:blur(6px); transform:scale(.6); opacity:0; transition:all .4s var(--ease); }
.work-card:hover .work-open { transform:none; opacity:1; }
.work-open svg{width:16px;height:16px}
.work-meta { padding:22px 24px 26px; }
.work-meta .tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:13px; }
.tag { font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--accent-2); background:color-mix(in oklab, var(--accent) 14%, transparent); border:1px solid color-mix(in oklab, var(--accent) 26%, transparent); padding:4px 10px; border-radius:999px; }
.work-meta h3 { font-size:1.5rem; margin-bottom:8px; }
.work-meta p { font-size:14.5px; margin:0; color:var(--faint); }
@media (max-width:760px){ .work-grid{grid-template-columns:1fr} }

/* ---------- FEATURED (full-width live) WORK CARD ---------- */
.work-card.feature { grid-column:1 / -1; display:grid; grid-template-columns:1.5fr 1fr; align-items:stretch; }
.work-card.feature .work-thumb { aspect-ratio:16/10; height:100%; }
.work-card.feature .work-meta { display:flex; flex-direction:column; justify-content:center; gap:8px; padding:clamp(26px,3vw,46px); }
.work-card.feature .work-meta h3 { font-size:clamp(1.5rem,2.3vw,2.15rem); margin:2px 0 4px; }
.work-card.feature .work-meta p { font-size:15.5px; max-width:44ch; }
.work-card.feature .work-meta .link-arrow { margin-top:14px; }
@media (max-width:760px){ .work-card.feature { grid-template-columns:1fr; } }

/* live badge (replaces the number on live cards) */
.live-badge { position:absolute; top:14px; left:16px; z-index:3; display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 11px; border-radius:999px; background:rgba(8,9,12,.6); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:12px; font-weight:700; letter-spacing:.02em; backdrop-filter:blur(6px); }
.live-badge .dot { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.55); animation:livePulse 2.2s infinite; }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(74,222,128,.5);} 70%{box-shadow:0 0 0 7px rgba(74,222,128,0);} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0);} }

/* ---------- LIVE WORK PREVIEWS (iframe embeds) ---------- */
.work-card[data-embed] .work-thumb { background:#0b0d12; }
.work-card[data-embed] .work-thumb::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg, rgba(8,9,12,.55) 0%, rgba(8,9,12,0) 34%); }
.work-embed { position:absolute; inset:0; z-index:1; overflow:hidden; background:#fff; opacity:0; transition:opacity .6s var(--ease); }
.work-embed.ready { opacity:1; }
.work-embed iframe { width:1280px; height:800px; border:0; transform-origin:top left; pointer-events:none; background:#fff; }
.work-card[data-embed] .work-thumb .num { z-index:3; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.work-card[data-embed] .work-open { z-index:3; }

/* ---------- LIVE SITE LIGHTBOX ---------- */
#live-modal { position:fixed; inset:0; z-index:200; display:none; }
#live-modal.open { display:block; }
#live-modal .lm-backdrop { position:absolute; inset:0; background:rgba(8,9,12,.78); backdrop-filter:blur(6px); animation:lmFade .25s var(--ease); }
#live-modal .lm-dialog { position:absolute; inset:clamp(14px,3.5vh,44px) clamp(14px,4vw,72px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 50px 130px -40px rgba(0,0,0,.75); animation:lmRise .3s var(--ease); }
#live-modal .lm-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 14px 13px 20px; border-bottom:1px solid var(--line); background:var(--bg-2); flex:none; }
#live-modal .lm-title { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text); min-width:0; }
#live-modal .lm-title .dot { width:8px; height:8px; border-radius:50%; background:#4ade80; flex:none; animation:livePulse 2.2s infinite; }
#live-modal .lm-hint { font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#live-modal .lm-actions { display:flex; align-items:center; gap:10px; flex:none; }
#live-modal .lm-newtab { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--dim); padding:9px 14px; border-radius:999px; border:1px solid var(--line); transition:all .25s; }
#live-modal .lm-newtab:hover { color:var(--text); border-color:color-mix(in oklab,var(--accent) 50%,transparent); }
#live-modal .lm-newtab svg { width:14px; height:14px; }
#live-modal .lm-close { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--dim); display:grid; place-items:center; transition:all .25s; }
#live-modal .lm-close:hover { color:var(--text); border-color:var(--accent); transform:rotate(90deg); }
#live-modal .lm-close svg { width:18px; height:18px; }
#live-modal .lm-frame { flex:1; background:#fff; min-height:0; }
#live-modal .lm-frame iframe { width:100%; height:100%; border:0; display:block; }
@keyframes lmFade { from{opacity:0;} to{opacity:1;} }
@keyframes lmRise { from{opacity:0; transform:translateY(12px) scale(.99);} to{opacity:1; transform:none;} }
@media (max-width:600px){ #live-modal .lm-hint { display:none; } #live-modal .lm-newtab span { display:none; } }

/* ---------- SERVICES ---------- */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc-card { padding:30px 28px 28px; border-radius:var(--radius-lg); border:1px solid var(--line); background:linear-gradient(180deg,var(--surface),var(--bg-2)); position:relative; overflow:hidden; transition:transform .5s var(--ease), border-color .4s; }
.svc-card:hover { transform:translateY(-5px); border-color:color-mix(in oklab, var(--accent) 40%, transparent); }
.svc-card::after { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent),transparent); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.svc-card:hover::after { transform:scaleX(1); }
.svc-icon { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:color-mix(in oklab, var(--accent) 13%, transparent); border:1px solid color-mix(in oklab, var(--accent) 26%, transparent); color:var(--accent-2); margin-bottom:22px; }
.svc-icon svg { width:23px; height:23px; }
.svc-card .idx { position:absolute; top:26px; right:28px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--faint); }
.svc-card h3 { font-size:1.32rem; margin-bottom:11px; }
.svc-card p { font-size:14.5px; color:var(--dim); margin-bottom:18px; }
.svc-card.span-2 { grid-column: span 2; }
@media (max-width:920px){ .svc-grid{grid-template-columns:1fr 1fr} .svc-card.span-2{grid-column:span 2} }
@media (max-width:600px){ .svc-grid{grid-template-columns:1fr} .svc-card.span-2{grid-column:auto} }

/* ---------- PROCESS TIMELINE ---------- */
.proc-wrap { display:grid; grid-template-columns: 0.9fr 1.1fr; gap:clamp(32px,5vw,68px); align-items:start; }
.proc-rail { display:flex; flex-direction:column; gap:6px; }
.proc-step { display:flex; align-items:center; gap:18px; padding:18px 20px; border-radius:16px; border:1px solid transparent; cursor:pointer; transition:all .35s var(--ease); }
.proc-step:hover { background:rgba(15,23,42,.03); }
.proc-step.on { background:linear-gradient(180deg,var(--surface),var(--bg-2)); border-color:var(--line); }
.proc-step .pnum { font-family:var(--font-display); font-weight:700; font-size:14px; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--line); color:var(--faint); flex:none; transition:all .35s; }
.proc-step.on .pnum { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 6px 18px -6px var(--glow); }
.proc-step h4 { font-size:1.18rem; }
.proc-step.on h4 { color:var(--text); }
.proc-step:not(.on) h4 { color:var(--dim); }
.proc-step .ps-sub { font-size:13px; color:var(--faint); margin-top:2px; }
.proc-stage { position:relative; min-height:340px; }
.proc-panel { position:absolute; inset:0; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.proc-panel.on { opacity:1; transform:none; pointer-events:auto; position:relative; }
.proc-panel .pp-viz { aspect-ratio:16/9; margin-bottom:24px; }
.proc-panel h3 { font-size:1.8rem; margin-bottom:12px; }
.proc-panel p { font-size:15.5px; }
.proc-panel ul { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:11px; }
.proc-panel li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--dim); }
.proc-panel li svg { width:18px; height:18px; color:var(--accent-2); flex:none; margin-top:1px; }
@media (max-width:860px){ .proc-wrap{grid-template-columns:1fr} .proc-step .ps-sub{display:none} }

/* ---------- ABOUT preview ---------- */
.about-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:center; }
.about-photo { aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); position:relative; }
.about-photo .viz { position:absolute; inset:0; border:none; border-radius:0; }
.about-photo .badge { position:absolute; bottom:18px; left:18px; right:18px; background:rgba(255,255,255,.92); border:1px solid rgba(15,23,42,.08); border-radius:14px; padding:14px 16px; backdrop-filter:blur(10px); display:flex; align-items:center; gap:13px; box-shadow:0 18px 40px -22px rgba(15,23,42,.4); }
.about-photo .badge .av { width:42px;height:42px;border-radius:50%; background:linear-gradient(140deg,var(--accent),#b06bff); flex:none; }
.about-photo .badge b { font-family:var(--font-display); font-size:15px; display:block; }
.about-photo .badge span { font-size:12px; color:var(--faint); }
.why-list { list-style:none; padding:0; margin:26px 0 30px; display:grid; gap:14px; }
.why-list li { display:flex; gap:13px; align-items:flex-start; }
.why-list .ic { width:26px; height:26px; border-radius:8px; background:color-mix(in oklab,var(--accent) 14%,transparent); border:1px solid color-mix(in oklab,var(--accent) 26%,transparent); display:grid; place-items:center; flex:none; color:var(--accent-2); margin-top:1px; }
.why-list .ic svg{width:14px;height:14px}
.why-list b { font-weight:700; color:var(--text); }
.why-list span { color:var(--dim); font-size:14.5px; }
.tool-row { display:flex; gap:9px; flex-wrap:wrap; margin-top:8px; }
.chip { font-size:13px; font-weight:600; color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:7px 14px; background:rgba(15,23,42,.025); }
@media (max-width:820px){ .about-grid{grid-template-columns:1fr} .about-photo{max-width:380px} .about-info{max-width:460px} }

/* ---------- ABOUT info panel ---------- */
.about-info { border-radius:var(--radius-lg); border:1px solid var(--line); background:linear-gradient(180deg,var(--surface),var(--bg-2)); padding:clamp(24px,3vw,32px); display:flex; flex-direction:column; gap:24px; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 16px 38px -26px rgba(15,23,42,.2); }
.about-info .ai-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.about-info .ai-tag { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--dim); }
.about-info .ai-name { text-align:right; }
.about-info .ai-name b { font-family:var(--font-display); font-size:15px; display:block; }
.about-info .ai-name span { font-size:12px; color:var(--faint); }
.about-info .ai-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,30px); }
.about-info .ai-num { font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,3.4vw,2.7rem); letter-spacing:-.03em; line-height:1; }
.about-info .ai-num .accent-text { color:var(--accent-2); }
.about-info .ai-lab { color:var(--faint); font-size:13px; margin-top:8px; font-weight:600; }

/* ---------- STATS band ---------- */
.stats-band { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:clamp(36px,4vw,52px) clamp(28px,4vw,56px); border-radius:var(--radius-lg); border:1px solid var(--line); background:linear-gradient(180deg,var(--surface),var(--bg-2)); }
.stat .num { font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,4vw,3rem); letter-spacing:-.03em; line-height:1; }
.stat .num .accent-text{ color:var(--accent-2); }
.stat .lab { color:var(--faint); font-size:13.5px; margin-top:9px; font-weight:600; }
@media (max-width:680px){ .stats-band{grid-template-columns:1fr 1fr; gap:32px 24px} }

/* ---------- PRICING ---------- */
.price-toggle { display:inline-flex; background:rgba(15,23,42,.05); border:1px solid var(--line); border-radius:999px; padding:5px; margin:0 auto 48px; gap:4px; }
.price-toggle button { background:transparent; border:none; color:var(--dim); padding:9px 20px; border-radius:999px; font-weight:700; font-size:14px; transition:all .25s; }
.price-toggle button.on { background:var(--accent); color:#fff; }
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.price-card { padding:32px 30px; border-radius:var(--radius-lg); border:1px solid var(--line); background:linear-gradient(180deg,var(--surface),var(--bg-2)); position:relative; }
.price-card.featured { border-color:color-mix(in oklab,var(--accent) 55%,transparent); box-shadow:0 30px 80px -40px var(--glow); }
.price-card.featured::before { content:"Most popular"; position:absolute; top:-12px; left:30px; background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.04em; padding:5px 12px; border-radius:999px; }
.price-card .pname { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--accent-2); letter-spacing:.02em; }
.price-card .pdesc { font-size:13.5px; color:var(--faint); margin:6px 0 22px; }
.price-card .pamt { font-family:var(--font-display); font-weight:700; font-size:3rem; letter-spacing:-.03em; line-height:1; }
.price-card .pamt sup { font-size:1.3rem; top:-1.1em; color:var(--dim); }
.price-card .psuf { color:var(--faint); font-size:13.5px; margin:8px 0 24px; }
.price-card ul { list-style:none; padding:0; margin:0 0 28px; display:grid; gap:13px; }
.price-card li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--dim); }
.price-card li svg { width:18px; height:18px; color:var(--accent-2); flex:none; margin-top:1px; }
.price-card .btn { width:100%; justify-content:center; }
@media (max-width:880px){ .price-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto} }

/* ---------- TESTIMONIALS ---------- */
.tst-viewport { overflow:hidden; border-radius:var(--radius-lg); }
.tst-track { display:flex; transition:transform .6s var(--ease-out); }
.tst-slide { min-width:100%; padding:clamp(36px,5vw,60px); border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg,var(--surface),var(--bg-2)); }
.tst-stars { color:var(--accent-2); font-size:18px; letter-spacing:3px; margin-bottom:22px; }
.tst-quote { font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.3; letter-spacing:-.02em; color:var(--text); margin-bottom:30px; text-wrap:balance; }
.tst-author { display:flex; align-items:center; gap:14px; }
.tst-author .av { width:48px; height:48px; border-radius:50%; background:linear-gradient(140deg,var(--accent),#b06bff); flex:none; }
.tst-author b { font-family:var(--font-display); font-size:16px; }
.tst-author span { color:var(--faint); font-size:13.5px; display:block; }
.tst-nav { display:flex; align-items:center; justify-content:space-between; margin-top:26px; }
.tst-dots { display:flex; gap:8px; }
.tst-dot { width:9px; height:9px; border-radius:50%; background:var(--line); border:none; transition:all .3s; padding:0; }
.tst-dot.on { background:var(--accent); width:26px; border-radius:999px; }
.tst-arrows { display:flex; gap:10px; }
.tst-arrows button { width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:rgba(15,23,42,.03); color:var(--text); display:grid; place-items:center; transition:all .3s; }
.tst-arrows button:hover { border-color:var(--accent); transform:translateY(-2px); }
.tst-arrows svg{width:18px;height:18px}

/* ---------- LEAD GEN / CONTACT ---------- */
.contact-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(28px,4vw,52px); }
.contact-card { padding:clamp(30px,4vw,44px); border-radius:var(--radius-lg); border:1px solid var(--line); background:linear-gradient(180deg,var(--surface),var(--bg-2)); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label { font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.field input, .field select, .field textarea { background:#ffffff; border:1px solid var(--line); border-radius:12px; padding:13px 15px; color:var(--text); font-family:var(--font-body); font-size:15px; transition:border-color .25s, box-shadow .25s; }
.field input::placeholder, .field textarea::placeholder { color:var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent); }
.field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236c7585' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; }
.chip-select { display:flex; gap:8px; flex-wrap:wrap; }
.chip-select button { background:rgba(15,23,42,.03); border:1px solid var(--line); color:var(--dim); padding:9px 15px; border-radius:999px; font-size:13.5px; font-weight:600; transition:all .25s; }
.chip-select button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.form-success { display:none; text-align:center; padding:40px 10px; }
.form-success.show { display:block; }
.form-success .ic { width:64px; height:64px; border-radius:50%; background:color-mix(in oklab,var(--accent) 16%,transparent); border:1px solid color-mix(in oklab,var(--accent) 32%,transparent); display:grid; place-items:center; margin:0 auto 20px; color:var(--accent-2); }
.form-success .ic svg{width:30px;height:30px}
.form-success h3{font-size:1.6rem;margin-bottom:10px}

.booking-card { padding:clamp(26px,3vw,34px); border-radius:var(--radius-lg); border:1px solid var(--line); background:linear-gradient(180deg,var(--surface),var(--bg-2)); display:flex; flex-direction:column; gap:18px; }
.booking-card .bk-top { display:flex; align-items:center; gap:14px; }
.booking-card .bk-ic { width:50px; height:50px; border-radius:14px; background:color-mix(in oklab,var(--accent) 14%,transparent); border:1px solid color-mix(in oklab,var(--accent) 26%,transparent); display:grid; place-items:center; color:var(--accent-2); flex:none; }
.booking-card .bk-ic svg{width:24px;height:24px}
.booking-card h3 { font-size:1.3rem; }
.booking-card .bk-sub { font-size:13.5px; color:var(--faint); }
.bk-slots { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }
.bk-slot { background:rgba(15,23,42,.03); border:1px solid var(--line); border-radius:11px; padding:11px 6px; text-align:center; font-size:13px; font-weight:600; color:var(--dim); transition:all .25s; }
.bk-slot:hover, .bk-slot.on { border-color:var(--accent); color:var(--text); background:color-mix(in oklab,var(--accent) 12%,transparent); }
.bk-slot small { display:block; font-size:11px; color:var(--faint); margin-top:2px; }
.bk-info { display:flex; flex-direction:column; gap:8px; }
.bk-info .bk-info-label { font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-bottom:4px; }
.ci-row { display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:14px; border:1px solid var(--line-2); background:rgba(15,23,42,.02); transition:border-color .3s var(--ease), background .3s, transform .3s var(--ease); }
a.ci-row:hover { border-color:color-mix(in oklab,var(--accent) 40%,transparent); background:color-mix(in oklab,var(--accent) 7%,transparent); transform:translateY(-2px); }
.ci-ic { width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center; color:var(--accent-2); background:color-mix(in oklab,var(--accent) 13%,transparent); border:1px solid color-mix(in oklab,var(--accent) 24%,transparent); }
.ci-ic svg{ width:18px; height:18px; }
.ci-text { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.ci-text b { font-family:var(--font-display); font-weight:700; font-size:14.5px; letter-spacing:-.01em; color:var(--text); }
.ci-text span { font-size:13px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci-arrow { width:16px; height:16px; color:var(--faint); flex:none; transition:transform .3s var(--ease), color .3s; }
a.ci-row:hover .ci-arrow { color:var(--accent-2); transform:translateX(3px); }
.ci-dot { width:9px; height:9px; border-radius:50%; flex:none; background:#34d399; box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pulse 2.4s infinite; }
@media (max-width:880px){ .contact-grid{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} }

/* ---------- CTA band ---------- */
.cta-band { text-align:center; padding:clamp(48px,6vw,80px) clamp(28px,5vw,72px); border-radius:var(--radius-lg); border:1px solid color-mix(in oklab,var(--accent) 35%,var(--line)); position:relative; overflow:hidden; background:linear-gradient(180deg,var(--surface),var(--bg-2)); }
.cta-band::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 100% at 50% 0%, var(--glow-soft), transparent 70%); }
.cta-band > * { position:relative; }
.cta-band h2 { font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.03em; }
.cta-band p { max-width:520px; margin:18px auto 32px; }
.cta-band .hero-cta { justify-content:center; }

/* ---------- CASE MODAL ---------- */
#case-modal { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .35s; }
#case-modal.open { opacity:1; pointer-events:auto; }
.cm-backdrop { position:absolute; inset:0; background:rgba(4,5,8,.78); backdrop-filter:blur(8px); }
.cm-dialog { position:relative; width:min(880px,100%); max-height:90vh; overflow-y:auto; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 40px 120px -30px rgba(0,0,0,.9); transform:translateY(20px) scale(.98); transition:transform .4s var(--ease-out); }
#case-modal.open .cm-dialog { transform:none; }
.cm-close { position:absolute; top:18px; right:18px; z-index:5; width:42px; height:42px; border-radius:50%; background:rgba(8,9,12,.6); border:1px solid rgba(255,255,255,.18); color:#fff; display:grid; place-items:center; backdrop-filter:blur(6px); }
.cm-viz { aspect-ratio:21/9; border-radius:0; border:none; border-bottom:1px solid var(--line); }
.cm-content { padding:clamp(28px,4vw,44px); }
.cm-content .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.cm-content h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); letter-spacing:-.03em; }
.cm-subtitle { color:var(--dim); font-size:1.05rem; margin:12px 0 30px; }
.cm-sections { display:grid; gap:26px; }
.cm-block h4 { font-family:var(--font-body); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); margin-bottom:10px; }
.cm-block p { font-size:15px; color:var(--dim); margin:0; }
.cm-results { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cm-stat { background:rgba(15,23,42,.03); border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center; }
.cm-stat b { font-family:var(--font-display); font-size:1.9rem; letter-spacing:-.03em; display:block; color:var(--text); }
.cm-stat span { font-size:12.5px; color:var(--faint); }
.cm-tools { display:flex; gap:9px; flex-wrap:wrap; }
.cm-quote { border-left:2px solid var(--accent); padding:6px 0 6px 20px; }
.cm-quote p { font-family:var(--font-display); font-size:1.25rem; font-weight:600; color:var(--text); letter-spacing:-.01em; line-height:1.4; margin-bottom:10px; }
.cm-quote cite { font-style:normal; color:var(--faint); font-size:13.5px; }
.cm-foot { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
@media (max-width:600px){ .cm-results{grid-template-columns:1fr 1fr} }

/* ---------- LIGHT-MODE DEPTH ---------- */
.svc-card, .price-card, .stats-band, .contact-card, .booking-card, .tst-slide {
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 38px -26px rgba(15,23,42,.2);
}
.price-card.featured {
  box-shadow: 0 4px 12px rgba(47,107,255,.08), 0 34px 80px -40px color-mix(in oklab, var(--accent) 55%, transparent);
}
.float-card { box-shadow: 0 18px 44px -22px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.5) !important; }

/* ---------- HERO PROOF ROW ---------- */
.hero-proof { display:flex; align-items:center; gap:14px; margin-top:18px; }
.proof-avatars { display:flex; }
.proof-avatars span { width:36px; height:36px; border-radius:50%; border:2.5px solid var(--bg); margin-left:-11px; background:#e3ebf7 center/cover no-repeat; background-image:url('../images/avatar-1.svg'); box-shadow:0 3px 8px -2px rgba(15,23,42,.25); }
.proof-avatars span:first-child { margin-left:0; }
.proof-avatars span:nth-child(2){ background-image:url('../images/avatar-2.svg'); }
.proof-avatars span:nth-child(3){ background-image:url('../images/avatar-3.svg'); }
.proof-avatars span:nth-child(4){ background-image:url('../images/avatar-4.svg'); }
.proof-text { font-size:14.5px; color:var(--dim); }
.proof-text b { color:var(--text); font-weight:700; }
.proof-stars { color:#f5a623; letter-spacing:1.5px; margin-right:7px; font-size:13px; }

/* ---------- FAQ ---------- */
.faq-list { max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 1px 2px rgba(15,23,42,.04); overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.faq-item.open { border-color:color-mix(in oklab,var(--accent) 40%,transparent); box-shadow:0 16px 38px -24px rgba(15,23,42,.28); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:21px 24px; background:none; border:none; text-align:left; font-family:var(--font-display); font-weight:700; font-size:1.14rem; letter-spacing:-.015em; color:var(--text); transition:color .2s; }
.faq-q:hover { color:var(--accent-2); }
.faq-ic { flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; border:1px solid var(--line); color:var(--accent-2); transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s; }
.faq-item.open .faq-ic { transform:rotate(135deg); background:var(--accent); color:#fff; border-color:var(--accent); }
.faq-ic svg { width:15px; height:15px; }
.faq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.faq-item.open .faq-a { grid-template-rows:1fr; }
.faq-a-inner { overflow:hidden; }
.faq-a p { margin:0; padding:0 24px 23px; color:var(--dim); font-size:15px; line-height:1.62; max-width:64ch; }
.faq-foot { text-align:center; margin:34px 0 0; color:var(--faint); font-size:15px; }
.faq-foot a { color:var(--accent-2); font-weight:700; }
.faq-foot a:hover { text-decoration:underline; }