/* Visual refresh v5: modern, bright and deliberately varied section by section. */
:root{
  --v5-blue:#1767e8;
  --v5-cyan:#24b8e8;
  --v5-violet:#725cf4;
  --v5-coral:#ff7186;
  --v5-ink:#10213e;
  --v5-muted:#64738b;
  --v5-line:rgba(113,139,181,.18);
  --v5-shadow:0 24px 70px rgba(31,64,112,.12);
}

html{background:#f8fbff}
body{color:var(--v5-ink);background:linear-gradient(180deg,#fff 0,#f8fbff 52%,#fff 100%)}
main{overflow:clip}
[id]{scroll-margin-top:86px}
.section,.free-cta{isolation:isolate}

/* Header and typography */
.site-header{
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(122,155,204,.16);
  box-shadow:0 8px 34px rgba(28,73,132,.06);
  backdrop-filter:blur(22px) saturate(1.35);
}
.header-inner{height:72px}
.brand-v3 img{filter:drop-shadow(0 8px 14px rgba(27,105,221,.18))}
.brand-v3>b{letter-spacing:-.035em;color:#122441}
.section-heading h2,.sticky-title h2,.result-intro h2{
  color:var(--v5-ink);
  letter-spacing:-.045em;
  text-wrap:balance;
}
.section-heading p,.sticky-title p,.result-intro p{color:var(--v5-muted)}
.eyebrow{
  padding:7px 11px;
  border:1px solid rgba(45,119,232,.15);
  border-radius:999px;
  background:rgba(239,246,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  letter-spacing:.1em;
}
.eyebrow.light{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.section-heading:after{width:72px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--v5-blue),var(--v5-cyan),var(--v5-coral))}

/* Buttons */
.button{
  border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(125deg,#1267ea 0%,#258be9 52%,#735cf4 100%);
  box-shadow:0 16px 36px rgba(30,106,225,.25),inset 0 1px 0 rgba(255,255,255,.26);
}
.button:hover{box-shadow:0 22px 46px rgba(39,105,219,.34);transform:translateY(-3px) scale(1.01)}
.button.white{background:rgba(255,255,255,.96);color:#145fca;border-color:rgba(255,255,255,.7)}

/* Hero polish */
.hero{background:linear-gradient(180deg,#f7fbff 0%,#fff 82%)}
.hero-bg i{inset:0;background-position:center top!important}
.hero-copy{position:relative}
.hero h1{text-shadow:0 4px 30px rgba(26,76,146,.06)}
.hero-copy>p{max-width:790px;color:#5f6e85}
.editor-card{
  border-color:rgba(224,235,248,.78);
  background:rgba(243,248,255,.74);
  box-shadow:0 34px 90px rgba(27,68,124,.18),0 0 0 1px rgba(255,255,255,.85);
}

/* Every large section gets its own visual atmosphere. */
.audience{
  background-image:linear-gradient(90deg,rgba(255,255,255,.82),rgba(255,255,255,.5) 48%,rgba(255,255,255,.82)),url('/scene-airy-v1.webp')!important;
  background-size:cover!important;
  background-position:center!important;
  animation:v5BackgroundBreath 18s ease-in-out infinite alternate;
}
.pain-section{background:radial-gradient(circle at 12% 16%,rgba(255,209,183,.48),transparent 28%),radial-gradient(circle at 88% 78%,rgba(180,160,255,.34),transparent 30%),linear-gradient(180deg,#fff8f4 0%,#f7f5ff 52%,#fff 100%)!important}
.result-section{background:radial-gradient(circle at 50% 8%,rgba(72,191,239,.17),transparent 30%),linear-gradient(180deg,#fff 0%,#edf5ff 100%)!important}
.blue-section{
  background-image:linear-gradient(110deg,rgba(4,22,62,.82),rgba(12,59,137,.62) 50%,rgba(30,24,92,.72)),url('/scene-dark-speech-v1.webp')!important;
  background-size:cover!important;
  background-position:center!important;
  animation:v5DarkDrift 20s ease-in-out infinite alternate;
}
.blue-section:before,.blue-section:after{opacity:.2!important}
.ai-tools{background:radial-gradient(circle at 14% 30%,rgba(72,210,255,.16),transparent 28%),radial-gradient(circle at 88% 65%,rgba(255,118,157,.12),transparent 30%),linear-gradient(180deg,#fff,#f7fbff)!important}
.case-stories{background:linear-gradient(180deg,#f7fbff 0%,#fff 44%,#fff6f2 100%)!important}
.gallery-section{background:radial-gradient(circle at 8% 18%,rgba(123,103,246,.12),transparent 25%),radial-gradient(circle at 92% 82%,rgba(35,190,229,.13),transparent 28%),#fff!important}
.stats-section{background:linear-gradient(155deg,#f5f9ff 0%,#fff 46%,#fff7f3 100%)!important}
.efficiency-section{background:radial-gradient(circle at 50% 8%,rgba(27,104,231,.11),transparent 28%),#fff!important}
#scenarios{background:linear-gradient(145deg,#eaf3ff 0%,#f9fbff 44%,#f8f2ff 100%)!important}
#structure{background:radial-gradient(circle at 82% 18%,rgba(39,196,230,.14),transparent 28%),linear-gradient(180deg,#fff,#f7faff)!important}
.comparison{background:radial-gradient(circle at 18% 40%,rgba(255,119,141,.11),transparent 25%),#fff!important}
.before-after{position:relative}
.honest{background:linear-gradient(140deg,#09152a 0%,#102a55 52%,#241c55 100%)!important}
.faq-section{background:linear-gradient(180deg,#f6faff 0%,#fff 60%,#fff8f4 100%)!important}
.seo-section{background:radial-gradient(circle at 88% 28%,rgba(113,91,245,.13),transparent 28%),linear-gradient(180deg,#eef5ff,#fff)!important}
.free-cta{
  background-image:linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.88) 48%,rgba(255,255,255,.64)),url('/scene-cta-v1.webp')!important;
  background-size:cover!important;
  background-position:center!important;
  animation:v5CtaDrift 16s ease-in-out infinite alternate;
}
.free-scene{opacity:.12}

/* Floating promo: use the supplied finished 3D artwork as one crisp scene.
   Transparent interactive hit areas preserve the real CTA and close action. */
.floating-offer{
  width:370px!important;
  height:192px!important;
  border:1px solid rgba(33,161,222,.3)!important;
  border-radius:20px!important;
  background:#249af0 url('/floating-offer-v2.webp') center/cover no-repeat!important;
  box-shadow:0 22px 60px rgba(18,76,141,.28)!important;
}
.floating-offer:before,.floating-offer .offer-visual{display:none!important}
.floating-offer .offer-copy{position:absolute;inset:0;padding:0!important}
.floating-offer .offer-copy>b{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.floating-offer .offer-copy>a{
  position:absolute;
  left:5.2%;
  bottom:10.2%;
  width:42.5%;
  height:20.5%;
  padding:0!important;
  border-radius:9px;
  background:transparent!important;
  color:transparent!important;
  box-shadow:none!important;
}
.floating-offer .offer-copy>a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.floating-offer .offer-close{
  right:4.5%;
  top:7%;
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  color:transparent;
}
.floating-offer .offer-close:hover{background:rgba(255,255,255,.16)}

/* The previous theme reused the same large ambient raster in six sections.
   The v5 sections have their own lightweight CSS atmospheres, so keep those
   duplicate pseudo-layers out of both rendering and network work. */
.ai-tools:before,.stats-section:before,#structure:before,.faq-section:before,.seo-section:before,.honest:before{display:none!important}

/* A small blur reads as polish; a heavy blur looks broken on anchor jumps. */
.motion-ready .reveal-item{filter:blur(2px);transition-duration:.66s}
.motion-ready .reveal-item.is-visible{filter:blur(0)}

/* Replace remaining heavy PNG sprite references. */
.tool-cards{--tool-row:0%}
.tool-cards[data-tool-scenario="1"]{--tool-row:25%}
.tool-cards[data-tool-scenario="2"]{--tool-row:50%}
.tool-cards[data-tool-scenario="3"]{--tool-row:75%}
.tool-cards[data-tool-scenario="4"]{--tool-row:100%}
.tool-cards .tool-card:nth-child(1) .tool-art{--tool-column:4.7%}
.tool-cards .tool-card:nth-child(2) .tool-art{--tool-column:35%}
.tool-cards .tool-card:nth-child(3) .tool-art{--tool-column:65%}
.tool-cards .tool-card:nth-child(4) .tool-art{--tool-column:95.3%}
.tool-cards .tool-card .tool-art{
  background-image:url('/tool-scenarios-v3.webp')!important;
  background-size:auto 500%!important;
  background-position:var(--tool-column) var(--tool-row)!important;
  background-repeat:no-repeat!important;
  background-color:#eef4ff!important;
}
.tool-cards.cards-enter .tool-card{animation:v5ToolCardIn .44s cubic-bezier(.2,.75,.25,1) both}
.tool-cards.cards-enter .tool-card:nth-child(2){animation-delay:.045s}
.tool-cards.cards-enter .tool-card:nth-child(3){animation-delay:.09s}
.tool-cards.cards-enter .tool-card:nth-child(4){animation-delay:.135s}
.gallery-preview{
  background-image:url('/gallery-visuals-v2.webp')!important;
  /* The source is a 3×2 grid of square renders. Keep every tile square and
     crop it inside the wide preview instead of stretching it to 16:9. */
  background-size:300% auto!important;
  background-repeat:no-repeat!important;
  background-color:#eef3fa!important;
}
.gallery-preview.future{background-position:0 15.2%!important}
.gallery-preview.brand{background-position:50% 15.2%!important}
.gallery-preview.report{background-position:100% 15.2%!important}
.gallery-preview.strategy{background-position:0 84.8%!important}
.gallery-preview.commerce{background-position:50% 84.8%!important}
.gallery-preview.creative{background-position:100% 84.8%!important}
.efficiency-art{background-image:url('/efficiency-icons-v2.webp')!important}

/* Cards: softer corners, clearer hierarchy, varied depth. */
.audience-grid article,.pain-grid article,.steps article,.tool-card,.case-card,.gallery-card,.stat-card,.comparison-card,.scenario-table,.structure-list article,.quality-table,.before-after>article,.faq-accordion details,.seo-grid article{
  border-color:var(--v5-line)!important;
  box-shadow:0 16px 48px rgba(31,67,120,.075);
}
.audience-grid article,.pain-grid article,.tool-card,.stat-card,.comparison-card,.seo-grid article{border-radius:26px!important}
.audience-grid article{background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(247,251,255,.88))!important;backdrop-filter:blur(8px)}
.pain-grid article{box-shadow:0 20px 50px rgba(80,54,98,.08)}
.tool-card{background:rgba(255,255,255,.9);min-height:238px}
.tool-art{margin:13px 13px 13px 0;border-radius:18px}
.gallery-card{border-radius:18px;background:rgba(255,255,255,.96)}
.gallery-preview{overflow:hidden}
.stat-card{background:rgba(255,255,255,.9);backdrop-filter:blur(10px)}
.comparison-card{box-shadow:0 32px 90px rgba(24,63,119,.13)}
.scenario-table,.quality-table{overflow:hidden;border-radius:24px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px)}
.structure-list article{border-radius:22px;background:rgba(255,255,255,.92)}
.before-after>article{border-radius:26px;background:rgba(255,255,255,.94)}
.faq-accordion details{border-radius:16px!important;background:rgba(255,255,255,.86);backdrop-filter:blur(8px)}
.faq-accordion details[open]{border-color:rgba(48,121,232,.34)!important;box-shadow:0 18px 45px rgba(31,91,181,.11)}
.seo-grid article{background:linear-gradient(150deg,#fff,#f8fbff)}

/* New unique scenario imagery. */
.case-grid{gap:16px}
.case-card{min-height:510px;padding:17px!important;background:rgba(255,255,255,.94)!important;border-radius:24px!important}
.case-art{
  width:100%;
  aspect-ratio:16/10;
  margin:0 0 18px;
  border-radius:16px;
  background-image:url('/case-scenes-v1.webp');
  /* Four square scenes sit in one horizontal sprite. Scale by width only so
     people and objects keep their natural proportions, then crop vertically. */
  background-size:400% auto;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 14px 28px rgba(31,69,120,.12);
  contain:paint;
  animation:v5CardFloat 7s ease-in-out infinite;
}
.case-art-0{background-position:0 50%}
.case-art-1{background-position:33.333% 50%;animation-delay:-1.7s}
.case-art-2{background-position:66.667% 50%;animation-delay:-3.4s}
.case-art-3{background-position:100% 50%;animation-delay:-5.1s}
.case-card h3{font-size:19px}
.case-card>p{margin-bottom:18px}
.case-impact{margin:0 0 14px}
.case-person{margin-bottom:14px}

/* Hover motion is applied only where a pointer exists. */
@media(hover:hover){
  .audience-grid article,.pain-grid article,.tool-card,.case-card,.gallery-card,.stat-card,.structure-list article,.seo-grid article{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
  .audience-grid article:hover,.pain-grid article:hover,.tool-card:hover,.gallery-card:hover,.stat-card:hover,.structure-list article:hover,.seo-grid article:hover{transform:translateY(-8px);box-shadow:var(--v5-shadow);border-color:rgba(66,132,232,.28)!important}
  .case-card:nth-child(2):hover,.case-card:nth-child(4):hover,.case-card:hover{transform:translateY(-8px)!important;box-shadow:var(--v5-shadow)}
  .case-card:hover .case-art{transform:scale(1.025)}
}

/* Ambient motion: only transform/background-position for smooth rendering. */
@keyframes v5BackgroundBreath{from{background-position:48% 50%}to{background-position:52% 50%}}
@keyframes v5DarkDrift{from{background-position:48% 50%}to{background-position:53% 50%}}
@keyframes v5CtaDrift{from{background-position:48% 50%}to{background-position:52% 47%}}
@keyframes v5CardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes v5ToolCardIn{from{opacity:.35;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}

/* Responsive polish */
@media(max-width:1100px){
  .case-card{min-height:500px}
  .case-art{aspect-ratio:4/3}
}
@media(max-width:900px){
  .audience,.blue-section,.free-cta{animation:none;background-position:center!important}
  .case-grid{grid-template-columns:1fr 1fr}
  .case-card{min-height:0}
  .case-art{aspect-ratio:16/10}
}
@media(max-width:700px){
  .section{padding-top:82px;padding-bottom:82px}
  .site-header{backdrop-filter:blur(16px)}
  .eyebrow{font-size:10px;padding:6px 9px}
  .hero h1{font-size:clamp(34px,10.5vw,44px)}
  .hero-copy>p{font-size:15px}
  .audience{background-image:linear-gradient(rgba(255,255,255,.68),rgba(255,255,255,.88)),url('/scene-airy-v1.webp')!important;background-size:auto 70%!important;background-repeat:no-repeat!important}
  .blue-section{background-position:30% center!important}
  .free-cta{background-position:center top!important;background-size:auto 100%!important}
  .case-grid{grid-template-columns:1fr}
  .case-art{aspect-ratio:16/9}
  .tool-art{margin:0 14px 14px}
  .audience-grid article,.pain-grid article,.tool-card,.case-card,.stat-card,.seo-grid article{border-radius:20px!important}
}
@media(max-width:480px){
  .section{padding-top:70px;padding-bottom:70px}
  .button{width:100%;max-width:340px}
  .case-art{aspect-ratio:4/3}
  .free-cta{background-position:55% top!important}
  .gallery-preview.future{background-position:0 10%!important}
  .gallery-preview.brand{background-position:50% 10%!important}
  .gallery-preview.report{background-position:100% 10%!important}
  .gallery-preview.strategy{background-position:0 90%!important}
  .gallery-preview.commerce{background-position:50% 90%!important}
  .gallery-preview.creative{background-position:100% 90%!important}
  .floating-offer{
    left:10px!important;
    right:auto!important;
    bottom:10px!important;
    width:min(370px,calc(100vw - 20px))!important;
    height:auto!important;
    aspect-ratio:1134/588;
  }
}

@media(prefers-reduced-motion:reduce){
  .audience,.blue-section,.free-cta,.case-art{animation:none!important}
  .audience-grid article,.pain-grid article,.tool-card,.case-card,.gallery-card,.stat-card,.structure-list article,.seo-grid article{transition:none!important}
}