/* ===================== Homepage-specific layout ===================== */

/* HERO (airy, Concept 2) */
.hero-block { position:relative; }
.hero { position:relative; padding:172px 0 var(--space-2xl); text-align:center; background:linear-gradient(180deg, var(--brand-50) 0%, rgba(238,244,249,0) 72%); }
.hero .wrap { max-width:1000px; }
.hero .eyebrow { font-size:var(--text-lg); letter-spacing:.16em; margin-bottom:var(--space-s); }
.hero h1 { font-size:var(--step-5); letter-spacing:-.03em; line-height:var(--line-none); margin:0 auto var(--space-m); max-width:15em; }
.hero h1 .hl { color:var(--color-primary); }
.hero .lede { font-size:var(--text-xl); color:var(--color-ink); max-width:35em; margin:0 auto var(--space-l); line-height:var(--line-relaxed); }
.hero .btn-row { justify-content:center; }
.hero-stats { display:flex; justify-content:center; flex-wrap:wrap; gap:var(--space-l); margin:var(--space-xl) auto 0; }
.hero-stats .qs { text-align:center; }
.hero-stats .qv { font-size:var(--step-3); font-weight:var(--weight-extrabold); color:var(--color-secondary); line-height:var(--line-none); }
.hero-stats .qk { font-size:var(--text-sm); color:var(--color-ink-soft); margin-top:var(--space-2xs); }
.hero-stats .div { width:1px; align-self:stretch; background:var(--color-border); }

.showcase { max-width:1040px; margin:var(--space-m) auto 0; padding:0 var(--space-m) var(--space-2xl); position:relative; z-index:1; }
.showcase-frame { position:relative; }
.showcase-frame img { width:100%; height:auto; display:block; filter:drop-shadow(0 28px 50px rgba(22,56,78,.22)); }
.showcase .badge { position:absolute; background:#fff; color:var(--color-secondary); border-radius:var(--radius-lg); box-shadow:var(--shadow-4); padding:var(--space-xs) var(--space-s); display:flex; align-items:center; gap:var(--space-xs); font-weight:var(--weight-bold); z-index:2; }
.showcase .badge .big { font-size:var(--text-xl); color:var(--color-primary); line-height:var(--line-none); }
.showcase .badge .lbl { font-size:var(--text-xs); color:var(--color-ink-soft); font-weight:var(--weight-semibold); line-height:var(--line-snug); }
.showcase .badge.b1 { top:14%; left:-22px; }
.showcase .badge.b2 { bottom:16%; right:-18px; }

/* "fragmented" letter animation */
.frag-word { display:inline; }
.frag-word .frag-l { display:inline-block; }

/* PROBLEM (dark) */
.problem { background:var(--color-surface-dark); color:#fff; }
.problem h2 { color:#fff; }
.problem .section-head p { color:rgba(255,255,255,.82); }
.prob-body { display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--space-xl); align-items:stretch; max-width:1080px; margin:0 auto; }
.prob-media { margin:0; }
.prob-media .photo-frame { height:100%; display:flex; flex-direction:column; }
.prob-media .kb-wrap { flex:1; aspect-ratio:auto; }
.prob-media .kb-slide { object-position:50% 30%; }
.prob-right .prob-grid { display:grid; grid-template-columns:1fr; gap:var(--space-m); }
.prob { background:rgba(255,255,255,.06); border:1px solid rgba(103,184,220,.3); border-radius:var(--radius-lg); padding:var(--space-m) var(--space-l); backdrop-filter:blur(4px); }
.prob .num { font-size:var(--step-3); font-weight:var(--weight-extrabold); color:var(--color-accent); line-height:var(--line-none); letter-spacing:-.02em; }
.prob .num .in { font-size:.52em; font-weight:var(--weight-semibold); color:#fff; vertical-align:middle; margin:0 .12em; letter-spacing:0; }
.prob p { font-size:var(--text-md); color:rgba(255,255,255,.9); margin:var(--space-xs) 0 0; }
.prob p strong { color:#fff; }
.prob-note { margin:var(--space-s) 0 0; text-align:left; font-size:var(--text-md); color:rgba(255,255,255,.84); line-height:var(--line-relaxed); }
.prob-note strong { color:#fff; }
@media (max-width:880px) {
  .prob-body { grid-template-columns:1fr; gap:var(--space-l); }
  .prob-media { max-width:360px; margin:0 auto; }
  .prob-right .prob-grid { grid-template-columns:1fr 1fr; }
}

/* SOLUTION (split + video mosaic) */
.solution { background:#fff; }
.sol-split { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:center; }
.sol-split h2 { }
.sol-split p { color:var(--color-ink-soft); font-size:var(--text-md); margin:var(--space-s) 0 0; line-height:var(--line-relaxed); }
.sol-split p strong { color:var(--color-ink); }

/* HOW IT WORKS (guided path) */
.how { }
.how.handle { background:#fff; }
.timeline { max-width:940px; margin:0 auto; position:relative; }
.timeline::before { content:""; position:absolute; left:22px; top:14px; bottom:14px; width:2px; background:linear-gradient(180deg, var(--color-accent), var(--brand-100)); }
.tl-line { position:absolute; left:22px; top:14px; bottom:14px; width:2px; background:linear-gradient(180deg, var(--color-accent), var(--brand-100)); transform-origin:top; transform:scaleY(0); z-index:0; display:none; }
.tl-pin-on .timeline::before { display:none; }
.tl-pin-on .tl-line { display:block; }
.tl-pin-on .tstep { opacity:0; transform:translateY(18px); }
.tstep { position:relative; display:grid; grid-template-columns:46px 1fr 200px; gap:var(--space-m); padding:var(--space-m) 0; align-items:center; }
.tnum { width:46px; height:46px; border-radius:var(--radius-full); background:var(--grad-deep); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:var(--weight-extrabold); font-size:var(--text-lg); box-shadow:var(--shadow-md); z-index:2; }
.tbody h3 { margin:0 0 var(--space-2xs); }
.tbody p { margin:0; color:var(--color-ink-soft); }
.tbody .chip { display:inline-flex; align-items:center; gap:var(--space-2xs); margin-top:var(--space-xs); font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--color-primary); background:var(--brand-50); padding:var(--space-3xs) var(--space-xs); border-radius:var(--radius-full); }
.tbody .chip svg { width:14px; height:14px; stroke:var(--color-primary); fill:none; stroke-width:2.2; }
.tshot { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:none; aspect-ratio:4/3; background:var(--brand-50); }
.tshot img { width:100%; height:100%; object-fit:cover; }
.timeline.guided .tstep { grid-template-columns:46px 1fr; }
.how-guided-body { display:grid; grid-template-columns:1fr .82fr; gap:var(--space-2xl); align-items:start; max-width:1100px; margin:0 auto; }
.how-guided .timeline { margin:0; max-width:none; }
.how-guided-media { margin:0; align-self:start; }
.how-guided-media .photo-frame { }
.hiw-slides { position:relative; aspect-ratio:4/5; border-radius:var(--radius-md); overflow:hidden; }
.hiw-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0;
  opacity:0; transition:opacity 0.8s ease; }
.hiw-slide.is-active { opacity:1; }
.how-guided-media figcaption { display:inline-flex; align-items:center; gap:var(--space-2xs); margin-top:var(--space-xs); font-weight:var(--weight-bold); font-size:var(--text-sm); color:var(--color-secondary); }
.how-guided-media figcaption { margin-left:var(--space-s); }
.how-guided-media figcaption .dot { width:9px; height:9px; border-radius:var(--radius-full); flex:none; background:var(--color-primary); box-shadow:0 0 0 0 rgba(67,143,185,.5); animation:dot-pulse 2.2s infinite; }
@keyframes dot-pulse { 0%{ box-shadow:0 0 0 0 rgba(67,143,185,.5);} 70%{ box-shadow:0 0 0 8px rgba(67,143,185,0);} 100%{ box-shadow:0 0 0 0 rgba(67,143,185,0);} }
@media (max-width:880px) {
  .how-guided-body { grid-template-columns:1fr; gap:var(--space-l); }
  .how-guided-media { max-width:440px; margin:0 auto; order:-1; }
  .how-guided-media img { height:auto; aspect-ratio:4/5; }
}

/* NUMBERS (big figures + bar chart) */
.numbers { background:linear-gradient(160deg, var(--brand-50), #fff); }
.bignums { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-l); max-width:1000px; margin:var(--space-xl) auto var(--space-2xl); text-align:center; }
.bignum .v { font-size:var(--step-5); font-weight:var(--weight-extrabold); color:var(--color-secondary); line-height:var(--line-none); letter-spacing:-.03em; }
.bignum .v small { font-size:var(--text-xl); color:var(--color-primary); font-weight:var(--weight-bold); margin-left:.16em; letter-spacing:normal; }
.bignum .k { font-size:var(--text-md); color:var(--color-ink-soft); margin-top:var(--space-xs); max-width:15em; margin-left:auto; margin-right:auto; line-height:var(--line-normal); }
.num-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-l); max-width:1080px; margin:0 auto; }
.num-grid h3 { letter-spacing:-.02em; }
.num-grid p { color:var(--color-ink-soft); font-size:var(--text-md); margin:var(--space-s) 0 var(--space-m); line-height:var(--line-relaxed); }
.num-col { display:flex; flex-direction:column; gap:var(--space-l); }
.num-copy { flex:none; padding-right:14%; }
.num-media { margin:0; flex:1; min-height:200px; }
.num-media .photo-frame { height:100%; display:flex; flex-direction:column; }
.num-media .photo-frame img { flex:1; min-height:0; }
.num-col .bars { flex:none; }
@media (max-width:880px) {
  .num-grid { grid-template-columns:1fr; }
  .num-media { min-height:0; }
  .num-media .photo-frame img { height:auto; aspect-ratio:16/10; flex:none; }
}
.bars { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:var(--space-l); }
.bars h4 { margin:0 0 var(--space-m); color:var(--color-secondary); }
.brow { display:grid; grid-template-columns:150px 1fr; gap:var(--space-xs); align-items:center; margin-bottom:var(--space-xs); }
.brow .label { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-ink); text-align:right; }
.brow .track { background:var(--brand-50); border-radius:var(--radius-md); height:32px; overflow:hidden; }
.brow .fill { height:100%; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:flex-end; padding-right:var(--space-xs); color:#fff; font-weight:var(--weight-bold); font-size:var(--text-sm); background:linear-gradient(90deg, var(--color-accent), var(--color-primary)); width:0; transition:width 1.1s var(--ease); }
.brow.hi .fill { background:linear-gradient(90deg, var(--brand-600), var(--color-secondary)); }
.brow.hi .label { color:var(--color-secondary); font-weight:var(--weight-extrabold); }
.bars .cap { font-size:var(--text-xs); color:var(--color-ink-soft); margin:var(--space-2xs) 0 0; }
.numbers .cta-card { max-width:1080px; margin-left:auto; margin-right:auto; margin-top:var(--space-l); }

/* TESTIMONIALS — horizontal-scrolling row */
.stories { background:linear-gradient(180deg, var(--color-surface), var(--brand-50)); }
.stories .tcard { background: var(--color-surface); }
.h-scroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; margin-top:var(--space-xl); scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.h-scroll::-webkit-scrollbar { display:none; }
.h-track { display:flex; align-items:stretch; gap:var(--space-m); width:max-content; padding:var(--space-2xs) var(--space-m); }
.h-track .tcard { flex:none; width:390px; height:auto; }
.stories.h-on .h-scroll { overflow:hidden; }
.stories.h-on .h-track { padding-left:calc((100% - 390px)/2); padding-right:calc((100% - 390px)/2); will-change:transform; }
@media (max-width:640px){ .h-track .tcard { width:300px; } }

/* MID CTA (rounded card) */
.cta-sec { padding:var(--space-xl) 0 var(--space-3xl); background:#fff; }
.cta-card { position:relative; overflow:hidden; background:var(--grad-hero); border-radius:30px; padding:var(--space-3xl) var(--space-xl); text-align:center; color:#fff; box-shadow:var(--shadow-5); }
.cta-card > .wrap-inner { position:relative; z-index:2; max-width:760px; margin:0 auto; }
.cta-card .banner { display:inline-flex; align-items:center; gap:var(--space-2xs); background:rgba(103,184,220,.18); border:1px solid rgba(103,184,220,.45); color:#fff; font-weight:var(--weight-bold); font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; padding:var(--space-2xs) var(--space-s); border-radius:var(--radius-full); margin-bottom:var(--space-m); }
.cta-card .banner svg { width:15px; height:15px; stroke:var(--color-accent); fill:none; stroke-width:2.2; }
.cta-card h2 { color:#fff; max-width:14em; margin:0 auto var(--space-s); letter-spacing:-.025em; }
.cta-card p { font-size:var(--text-lg); color:rgba(255,255,255,.9); max-width:34em; margin:0 auto var(--space-l); }
.cta-card .row { display:flex; gap:var(--space-xs); justify-content:center; flex-wrap:wrap; }
.cta-card .reassure { margin:var(--space-m) auto 0; font-size:var(--text-sm); color:rgba(255,255,255,.72); text-align:center; }

/* CTA split (photo + text) */
.cta-card.cta-split { display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--space-xl); align-items:center; text-align:left; padding:var(--space-xl); }
.cta-card.cta-split > .wrap-inner { margin:0; max-width:none; text-align:left; }
.cta-card.cta-split h2, .cta-card.cta-split p { margin-left:0; margin-right:0; max-width:none; }
.cta-card.cta-split .row { justify-content:flex-start; }
.cta-card.cta-split .reassure { text-align:left; margin-left:0; }
.cta-media { margin:0; position:relative; z-index:2; }
.cta-media img { width:100%; height:auto; border-radius:var(--radius-xl); box-shadow:var(--shadow-4); object-fit:cover; aspect-ratio:4/3; display:block; }
@media (max-width:880px) {
  .cta-card.cta-split { grid-template-columns:1fr; gap:var(--space-l); padding:var(--space-xl) var(--space-l); }
}

/* Concept 1 step grid */
.c1-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-m); }

/* ---- "What we handle" — sticky text rail + scrolling image panels ---- */
.handle-grid { display:grid; grid-template-columns:0.82fr 1.18fr; gap:var(--space-2xl); align-items:start; margin-top:var(--space-xl); }
.handle-copy .n, .handle-cap .n { display:inline-flex; width:46px; height:46px; border-radius:var(--radius-full); background:var(--grad-deep); color:#fff; align-items:center; justify-content:center; font-weight:var(--weight-extrabold); font-size:var(--text-lg); box-shadow:var(--shadow-md); margin-bottom:var(--space-s); }
.handle-copy h3, .handle-cap h3 { margin:0 0 var(--space-xs); letter-spacing:-.01em; }
.handle-copy p, .handle-cap p { margin:0; color:var(--color-ink-soft); font-size:var(--text-md); line-height:var(--line-relaxed); }
.handle-copy { margin-bottom:var(--space-l); }
.handle-panel .shot { display:flex; justify-content:center; }
.handle-panel .shot img { max-width:100%; max-height:550px; width:auto; height:auto; display:block; filter:drop-shadow(0 8px 24px rgba(13,38,56,.15)); }
.handle-panel { margin-bottom:var(--space-l); }
.handle-cap { margin-top:var(--space-s); }

/* scrolly enabled (added by JS) */
.scrolly-on { --panelH: clamp(440px, 66vh, 640px); }
.scrolly-on .handle-text { position:sticky; top:calc(50vh - (var(--panelH) / 2)); align-self:start; }
.scrolly-on .handle-copy-stack { position:relative; min-height:320px; }
.scrolly-on .handle-copy { position:absolute; inset:0; margin:0; opacity:0; transform:translateY(26px); transition:opacity .55s var(--ease), transform .55s var(--ease); pointer-events:none; }
.scrolly-on .handle-copy.is-active { opacity:1; transform:none; pointer-events:auto; }
.scrolly-on .handle-cap { display:none; }
.scrolly-on .handle-panel { min-height:var(--panelH); display:flex; align-items:flex-start; margin-bottom:0; }
.scrolly-on .handle-panel .shot { width:100%; opacity:.4; transform:scale(.97); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.scrolly-on .handle-panel.is-active .shot { opacity:1; transform:none; }

@media (max-width:860px){
  .handle-grid { grid-template-columns:1fr; gap:var(--space-2xs); }
  .handle-text { display:none; }
}
.c1-step { position:relative; }
.c1-step .shot { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:none; aspect-ratio:4/3; background:var(--brand-50); margin-bottom:var(--space-s); }
.c1-step .shot img { width:100%; height:100%; object-fit:cover; }
.c1-step .n { position:absolute; top:-14px; left:-10px; z-index:2; width:44px; height:44px; border-radius:var(--radius-full); background:var(--grad-deep); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:var(--weight-extrabold); font-size:var(--text-md); box-shadow:var(--shadow-md); }
.c1-step .n svg { width:21px; height:21px; stroke:#fff; fill:none; stroke-width:2; }
.c1-step h3 { margin:0 0 var(--space-2xs); }
.c1-step p { margin:0; font-size:var(--text-sm); color:var(--color-ink-soft); }

/* Concept 1 final CTA (full-bleed) */
.c1-cta { background:var(--grad-hero); color:#fff; text-align:center; padding:var(--space-3xl) 0; position:relative; overflow:hidden; }
.c1-cta::before { content:""; position:absolute; inset:0; background:radial-gradient(700px 400px at 50% -20%, rgba(103,184,220,.35), transparent 65%); z-index:0; }
.c1-cta .banner { display:inline-flex; align-items:center; gap:var(--space-2xs); background:rgba(103,184,220,.18); border:1px solid rgba(103,184,220,.45); color:#fff; font-weight:var(--weight-bold); font-size:var(--text-sm); letter-spacing:.08em; text-transform:uppercase; padding:var(--space-2xs) var(--space-s); border-radius:var(--radius-full); margin-bottom:var(--space-m); }
.c1-cta .banner svg { width:16px; height:16px; stroke:var(--color-accent); fill:none; stroke-width:2.2; }
.c1-cta h2 { color:#fff; max-width:17em; margin:0 auto var(--space-s); }
.c1-cta p { font-size:var(--text-lg); color:rgba(255,255,255,.9); max-width:36em; margin:0 auto var(--space-l); }
.c1-cta .row { display:flex; gap:var(--space-xs); justify-content:center; flex-wrap:wrap; }

/* USE CASES */
.usecases { background: #fff; }
.uc-hero {
  position: relative; border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: hidden;
  margin-bottom: var(--space-xl);
}
.uc-hero img {
  width: 100%; height: auto; display: block; min-height: 420px; object-fit: cover;
  mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}
.uc-overlay {
  position: absolute; right: 0; bottom: 0; width: 50%;
  height: 66.667%;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-xl);
  background: linear-gradient(to bottom, #fff, rgba(255,255,255,0));
  backdrop-filter: blur(12px);
  border-radius: var(--radius-xl) 0 0 0;
}
.uc-overlay h2 { margin: 0 0 var(--space-xs); }
.uc-overlay p { color: var(--color-ink); font-size: var(--text-lg); margin: 0 0 var(--space-m); }
.uc-badges { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.uc-badge {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-primary);
}
.uc-badge svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.usecases .card { background: var(--brand-25); }

@media (max-width:1000px){ .c1-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .c1-steps,.tgrid2{ grid-template-columns:1fr; } }
@media (max-width:1000px){
  .sol-split,.num-compare{ grid-template-columns:1fr; gap:var(--space-xl); }
  .prob-grid,.bignums{ grid-template-columns:1fr 1fr; }
  .showcase .badge{ display:none; }
  .tstep{ grid-template-columns:56px 1fr; }
  .tstep .tshot{ display:none; }
}
@media (max-width:640px){
  .prob-grid,.bignums{ grid-template-columns:1fr; }
  .hero-stats .div{ display:none; }
  .tq-card{ padding:var(--space-xl) var(--space-m); } .mosaic{ gap:var(--space-2xs); }
  .uc-overlay { position:static; width:auto; height:auto; background:var(--brand-25); padding:var(--space-l); border-radius:0; }
  .uc-hero img { min-height:200px; mask-image:none; -webkit-mask-image:none; }
}