/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  --ink:        #071b2e;
  --deep:       #0a2748;
  --deep-2:     #0d3a6b;
  --ocean:      #0d63c9;
  --sky:        #29a8ff;
  --aqua:       #4be3d0;
  --foam:       #eef6ff;
  --paper:      #ffffff;
  --copper:     #c1662f;
  --copper-soft:#e8b393;
  --ink-soft:   #47607c;
  --line:       #d7e6f5;

  --grad-water: linear-gradient(135deg, var(--ocean) 0%, var(--sky) 55%, var(--aqua) 100%);
  --grad-deep:  linear-gradient(160deg, #05192e 0%, #0a2748 45%, #0d3a6b 100%);

  --font-display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;
  --font-num: "Outfit", "Zen Kaku Gothic New", sans-serif;

  --container: 1180px;
  --radius: 20px;
  --ease: cubic-bezier(.22,.9,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; cursor:pointer; }
input,textarea{ font:inherit; }

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

.br-mobile{ display:none; }
@media (max-width:640px){
  .br-pc{ display:none; }
  .br-mobile{ display:inline; }
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   Preloader
   ========================================================================== */
html.is-loading{ overflow:hidden; }

.preloader{
  position:fixed; inset:0; z-index:2100;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  background:var(--grad-deep);
  opacity:1; visibility:visible;
  transition:opacity .6s var(--ease), visibility 0s linear 0s;
}
.preloader--done{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s var(--ease), visibility 0s linear .6s;
}
.preloader__svg{ width:104px; height:auto; overflow:visible; filter:drop-shadow(0 18px 30px rgba(3,14,28,.45)); }
.preloader__text{
  display:inline-flex; align-items:flex-end; gap:2px;
  font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.1em;
  color:#a9c7e2;
}
.preloader__text i{
  display:inline-block; width:3px; height:3px; margin-bottom:1px; border-radius:50%;
  background:var(--aqua); animation:ccDotBlink 1.2s steps(1) infinite;
}
.preloader__text i:nth-child(2){ animation-delay:.15s; }
.preloader__text i:nth-child(3){ animation-delay:.3s; }

.preloader__rise{
  transform:translateY(88px);
  animation:preloaderFill 1.7s cubic-bezier(.3,0,.2,1) 1 forwards;
}
.preloader__sway{ transform-box:fill-box; transform-origin:center; }
.preloader__sway--front{ animation:preloaderSwayFront 2.2s ease-in-out infinite; }
.preloader__sway--back{ animation:preloaderSwayBack 3.4s ease-in-out infinite; }
.preloader__shine{ opacity:.8; }

.preloader__bubble{
  fill:rgba(255,255,255,.55); opacity:0; transform-box:fill-box; transform-origin:center;
}
.preloader__bubble--1{ animation:preloaderBubble 3s ease-in 1.9s infinite; }
.preloader__bubble--2{ animation:preloaderBubble 3.4s ease-in 2.5s infinite; }
.preloader__bubble--3{ animation:preloaderBubble 2.7s ease-in 2.1s infinite; }

@keyframes preloaderFill{
  0%{ transform:translateY(88px); }
  100%{ transform:translateY(0); }
}
@keyframes preloaderSwayFront{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(2.5px,-2px); }
}
@keyframes preloaderSwayBack{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(-3px,2px); }
}
@keyframes preloaderBubble{
  0%{ transform:translateY(0); opacity:0; }
  12%{ opacity:.6; }
  85%{ opacity:.25; }
  100%{ transform:translateY(-66px); opacity:0; }
}

/* ==========================================================================
   Scroll tide progress bar
   ========================================================================== */
.tide{
  position:fixed; top:0; left:0; width:100%; height:4px;
  background:rgba(7,27,46,.08);
  z-index:1000;
}
.tide__fill{
  height:100%; width:0%;
  background:var(--grad-water);
  position:relative;
  transition:width .08s linear;
}
.tide__fill::after{
  content:"";
  position:absolute; right:-6px; top:50%; translate:0 -50%;
  width:12px; height:12px; border-radius:50%;
  background:var(--aqua);
  box-shadow:0 0 10px 3px rgba(75,227,208,.85);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; top:4px; left:0; right:0; z-index:900;
  padding:14px 0;
  background:rgba(7,27,46,0);
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s;
}
.site-header.is-scrolled{
  background:rgba(7,27,46,.72);
  backdrop-filter:blur(14px) saturate(140%);
  padding:9px 0;
  box-shadow:0 8px 30px -12px rgba(5,20,36,.5);
}
.header__inner{
  display:flex; align-items:center; gap:22px;
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; line-height:1.15; }
.brand__logo{
  height:26px; width:auto; display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.nav{ display:flex; gap:20px; margin-right:28px; }
.nav__link{
  font-size:.84rem; color:#dceeff; opacity:.85; position:relative; padding:4px 0;
  white-space:nowrap;
  transition:opacity .25s;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:var(--aqua); transition:width .3s var(--ease);
}
.nav__link:hover{ opacity:1; }
.nav__link:hover::after{ width:100%; }
.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:34px; background:none; border:none;
}
.nav__toggle span{ display:block; width:100%; height:2px; background:#fff; border-radius:2px; }
.nav__close{ display:none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:999px; font-weight:700; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  position:relative; overflow:hidden;
}
.btn--small{ padding:9px 18px; font-size:.82rem; }
.btn--lg{ padding:16px 30px; font-size:1rem; }
.btn--primary{
  background:linear-gradient(180deg, var(--ocean), var(--sky) 55%, var(--aqua)); color:#fff;
  box-shadow:0 12px 30px -10px rgba(13,99,201,.55);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -8px rgba(13,99,201,.65); }
.btn--flat{ background:var(--ocean); box-shadow:none; }
.btn--flat:hover{ transform:none; box-shadow:none; }
.btn--ghost{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.45);
}
.btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff; transform:translateY(-3px); }
.arrow-ico{ width:18px; height:18px; transition:transform .35s var(--ease); }
.btn:hover .arrow-ico{ transform:translateX(5px); }
.arrow-ico--down{ animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:var(--grad-deep); overflow:hidden; padding:104px 0 80px;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero__glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; pointer-events:none; }
.hero__glow--a{ width:520px; height:520px; background:radial-gradient(circle, rgba(41,168,255,.55), transparent 70%); top:-160px; right:-120px; animation:drift 14s ease-in-out infinite; }
.hero__glow--b{ width:420px; height:420px; background:radial-gradient(circle, rgba(75,227,208,.4), transparent 70%); bottom:-140px; left:-100px; animation:drift 18s ease-in-out infinite reverse; }
@keyframes drift{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(30px,-30px);} }

.hero__bubbles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.bubble{
  position:absolute; bottom:-10%; left:var(--x, 50%);
  width:var(--s, 18px); height:var(--s, 18px); border-radius:50%;
  background:radial-gradient(circle at 30% 26%, rgba(255,255,255,.9), rgba(255,255,255,.18) 42%, rgba(160,210,255,.08) 72%, transparent 78%);
  box-shadow:inset 0 0 6px rgba(255,255,255,.3);
  opacity:0;
  animation:bubbleRise var(--dur, 16s) linear infinite;
  animation-delay:var(--delay, 0s);
}
@keyframes bubbleRise{
  0%{ transform:translate(0,0); opacity:0; }
  8%{ opacity:.75; }
  50%{ transform:translate(var(--dx, 20px), -58vh); }
  90%{ opacity:.4; }
  100%{ transform:translate(calc(var(--dx, 20px) * -1), -118vh); opacity:0; }
}
.bubble--1{ --x:8%;  --s:14px; --dur:15s; --delay:-2s;  --dx:22px; }
.bubble--2{ --x:18%; --s:22px; --dur:19s; --delay:-9s;  --dx:-18px; }
.bubble--3{ --x:30%; --s:10px; --dur:13s; --delay:-5s;  --dx:16px; }
.bubble--4{ --x:47%; --s:26px; --dur:22s; --delay:-14s; --dx:-24px; }
.bubble--5{ --x:62%; --s:15px; --dur:17s; --delay:-3s;  --dx:20px; }
.bubble--6{ --x:74%; --s:19px; --dur:20s; --delay:-11s; --dx:-16px; }
.bubble--7{ --x:85%; --s:12px; --dur:14s; --delay:-7s;  --dx:14px; }
.bubble--8{ --x:93%; --s:24px; --dur:23s; --delay:-17s; --dx:-22px; }

.hero__inner{ position:relative; z-index:2; width:100%; text-align:center; display:flex; flex-direction:column; align-items:center; }
.eyebrow{
  font-family:var(--font-num); font-weight:600; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ocean);
  margin:0 0 16px;
}
.eyebrow--light{ color:var(--aqua); }

.brand-lockup{
  display:inline-flex; align-items:center; gap:16px;
  margin-bottom:22px;
}
.brand-lockup__emiir{
  width:128px; height:auto; display:block;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.75))
    drop-shadow(0 0 5px rgba(255,255,255,.55))
    drop-shadow(0 0 12px rgba(255,255,255,.32))
    drop-shadow(0 3px 10px rgba(0,0,0,.5));
}
.brand-lockup__x{
  font-family:var(--font-num); font-weight:500; font-size:1.15rem; color:rgba(255,255,255,.45);
}
.brand-lockup__wt{
  width:128px; height:auto; display:block;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.8))
    drop-shadow(0 0 5px rgba(255,255,255,.6))
    drop-shadow(0 0 12px rgba(255,255,255,.36))
    drop-shadow(0 3px 10px rgba(0,0,0,.4));
}

.brand-lockup--footer{ margin-bottom:0; gap:12px; }
.brand-lockup--footer .brand-lockup__emiir{ width:87px; }
.brand-lockup--footer .brand-lockup__wt{ width:87px; }
.brand-lockup--hero{ margin-bottom:0; }

.hero__collab{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-bottom:22px;
}
.hero__collab-caption{
  font-family:var(--font-num); font-size:1rem; font-weight:700;
  color:#8ff2e4; letter-spacing:.06em;
  text-shadow:
    -1px -1px 0 rgba(4,16,30,.95), 1px -1px 0 rgba(4,16,30,.95),
    -1px 1px 0 rgba(4,16,30,.95), 1px 1px 0 rgba(4,16,30,.95),
    0 2px 14px rgba(4,16,30,.7);
}
.hero__collab-note{
  font-family:var(--font-body); font-size:.78rem; font-weight:500;
  color:#cfe4f7; letter-spacing:.01em; opacity:.9;
  text-shadow:0 1px 6px rgba(4,16,30,.8);
}
.hero__title{
  font-family:var(--font-display); font-weight:900; color:#fff;
  font-size:clamp(2rem, 5vw, 3.3rem); line-height:1.3; margin:0 0 16px;
  letter-spacing:.02em;
  text-shadow:0 4px 28px rgba(20,20,40,.28), 0 1px 4px rgba(20,20,40,.35);
}
.grad-text{
  color:#fff; font-weight:800; white-space:nowrap;
}
.hero__lead{
  color:#fff; font-weight:600; font-size:1.32rem; line-height:1.8; max-width:660px; margin:0 0 12px;
  text-shadow:
    -1px -1px 0 rgba(4,16,30,.85), 1px -1px 0 rgba(4,16,30,.85),
    -1px 1px 0 rgba(4,16,30,.85), 1px 1px 0 rgba(4,16,30,.85),
    0 2px 16px rgba(4,16,30,.6);
}
.num{ font-family:var(--font-num); font-weight:700; font-size:1.9rem; color:#fff; }

@media (max-width:640px){
  .hero__title{ font-size:clamp(1.15rem, 6vw, 2.2rem); }
  .hero__lead{ font-size:clamp(0.6rem, calc(4.3vw - 2.5px), 1.32rem); line-height:1.6; }
}

.hero__products{
  display:flex; align-items:flex-end; justify-content:center; gap:clamp(8px,3vw,32px);
  margin-top:18px;
}
.hero__product{
  height:clamp(190px,28vw,360px); width:auto;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(120,190,255,.28));
  animation:productBob 5s ease-in-out infinite;
}
.hero__product--1{ animation-delay:0s; }
.hero__product--2{ animation-delay:-2.5s; }
@keyframes productBob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

.scroll-cue{
  position:absolute; left:50%; bottom:34px; translate:-50% 0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#fff; opacity:.85;
}
.scroll-cue__line{ width:1px; height:34px; background:linear-gradient(#fff, transparent); }

/* ==========================================================================
   Wave dividers
   ========================================================================== */
.wave-divider{ line-height:0; margin:-2px 0; position:relative; z-index:1; overflow:visible; }
.wave-divider svg{ width:100%; height:70px; display:block; overflow:visible; }
.wave-divider--to-light{ background:var(--deep); }
.wave-divider--to-dark{ background:var(--foam); }
.wave-divider--to-light svg path{ fill:var(--foam); }
.wave-divider--to-dark svg path{ fill:var(--deep); }
.wave-divider svg path{
  transform-box:fill-box; transform-origin:center bottom;
  animation:waveSway 3.5s ease-in-out infinite;
}
@keyframes waveSway{
  0%,100%{ transform:scaleY(1) skewX(3deg); }
  50%{ transform:scaleY(.75) skewX(-3deg); }
}
.wave-divider--flip{ transform:scaleX(-1); }

/* ==========================================================================
   Sections generic
   ========================================================================== */
.section{ padding:120px 0; position:relative; }
.section--light{ background:var(--foam); }
.section--dark{ background:var(--deep); color:#eaf3fb; }
.section--dark .h2, .section--dark h3{ color:#fff; }

.h2{
  font-family:var(--font-display); font-weight:900; font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.45; margin:0 0 22px; letter-spacing:.01em;
}
.h2--light{ color:#fff; }
.lead{ font-size:1.02rem; line-height:1.95; color:var(--ink-soft); max-width:720px; margin:0 0 30px; }
.lead--light{ color:#c3daf0; }

@media (max-width:640px){
  .h2{ font-size:clamp(0.85rem, calc(4.9vw - 3px), 1.6rem); }
  .lead{ font-size:0.95rem; line-height:1.75; }
}

@media (max-width:820px){
  .section{ padding:80px 0; }
}

/* ==========================================================================
   Authority band (operated-by clarity)
   ========================================================================== */
.section--authority{ padding-top:88px; padding-bottom:88px; }
.authority__grid{ display:flex; flex-direction:column; gap:40px; }
.authority__copy{ max-width:800px; }
.authority__lead{ max-width:800px; margin-bottom:26px; }
.authority__lead strong{ color:var(--ocean); }
.authority__lockup{
  display:inline-flex; align-items:center; gap:14px;
  padding:10px 22px 10px 16px; background:#fff; border:1px solid var(--line);
  border-radius:999px; box-shadow:0 16px 34px -22px rgba(13,60,110,.5);
}
.authority__logo{ height:20px; width:auto; }
.authority__lockup-label{ font-size:.78rem; font-weight:700; color:var(--ink-soft); letter-spacing:.03em; }

.credential-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.credential-card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:24px 18px; text-align:center; display:flex; flex-direction:column; gap:8px;
  box-shadow:0 22px 44px -32px rgba(13,60,110,.4);
}
.credential-card .num{ font-size:1.85rem; color:var(--ocean); }
.credential-card__label{ font-size:.78rem; color:var(--ink-soft); line-height:1.55; }

.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal; font-style:normal;
  line-height:1; letter-spacing:normal; text-transform:none;
  display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr;
  -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
}
.credential-card__icon{ font-size:30px; color:var(--ocean); }
.credential-card__icon--found{ animation:iconFoundPulse 2.4s ease-in-out infinite; }
.credential-card__icon--history{ animation:iconSpin 5s linear infinite; transform-origin:center; }
.credential-card__icon--verified{ animation:iconVerifiedPop 2s ease-in-out infinite; }
.credential-card__icon--handshake{ animation:iconHandshakeRock 1.7s ease-in-out infinite; transform-origin:center; }

@keyframes iconFoundPulse{
  0%,100%{ transform:scale(1) translateY(0); }
  50%{ transform:scale(1.14) translateY(-2px); }
}
@keyframes iconVerifiedPop{
  0%,100%{ transform:scale(1); }
  30%{ transform:scale(1.2); }
  50%{ transform:scale(.94); }
  70%{ transform:scale(1.06); }
}
@keyframes iconHandshakeRock{
  0%,100%{ transform:rotate(0deg); }
  25%{ transform:rotate(-12deg); }
  75%{ transform:rotate(12deg); }
}

.authority__insurers{ margin-top:6px; }
.authority__insurers-note{ font-size:.86rem; color:var(--ink-soft); margin:2px 0 22px; }

.insurer-network{ max-width:420px; margin:0 auto 4px; }
.insurer-network__svg{ width:100%; height:auto; display:block; }
.insurer-network__ring{ transform-origin:200px 34px; animation:problemRing 2.2s ease-out infinite; }

.insurer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.insurer-card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  box-shadow:0 18px 36px -28px rgba(13,60,110,.4);
}
.insurer-card__icon{ font-size:26px; color:var(--ocean); }
.insurer-card__name{ font-size:.78rem; font-weight:500; color:var(--ink-soft); line-height:1.5; }

.insurer-grid .insurer-card:nth-child(1){ transition-delay:0s; }
.insurer-grid .insurer-card:nth-child(2){ transition-delay:.08s; }
.insurer-grid .insurer-card:nth-child(3){ transition-delay:.16s; }
.insurer-grid .insurer-card:nth-child(4){ transition-delay:.24s; }

@media (max-width:820px){
  .credential-grid{ grid-template-columns:repeat(2,1fr); }
  .insurer-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .credential-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Service ecosystem diagram (サービス全体図)
   ========================================================================== */
.section--flow{ padding-top:96px; }

/* ---- Desktop / tablet: connected map, percentage-locked to the SVG's 1100x620 viewBox ---- */
.flow-diagram{
  position:relative; margin:56px auto 0; max-width:1100px;
  aspect-ratio:1100/620;
}
.flow-diagram__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
.flow-line{ fill:none; stroke:var(--sky); stroke-width:3; stroke-linecap:round; }
.flow-line--soft{ stroke:var(--ocean); stroke-width:3.4; stroke-dasharray:1 9; opacity:.65; }
.flow-line--leader{ stroke:var(--ink-soft); stroke-width:2; stroke-dasharray:1 7; opacity:.45; }

.flow-node{
  position:absolute; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-align:center; padding:20px 16px;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 20px 40px -30px rgba(13,60,110,.45);
}

.flow-node--maker{ left:2.73%;  top:6.45%;  width:19.09%; height:25.81%; }
.flow-node--agency{ left:36.36%; top:6.45%;  width:24.55%; height:25.81%; }
.flow-node--cs{ left:75.45%; top:6.45%;  width:21.82%; height:25.81%; }
.flow-node--you{ left:36.36%; top:69.35%; width:24.55%; height:27.42%; }
.flow-node--user{ left:75.45%; top:69.35%; width:21.82%; height:27.42%; }

.flow-node--you{
  background:linear-gradient(160deg,#fff 0%, var(--foam) 100%);
  border:1.5px solid var(--sky);
  box-shadow:0 26px 50px -26px rgba(13,99,201,.5);
  overflow:hidden;
}
.flow-node--you::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:var(--grad-water);
}

.flow-node__eyebrow{ font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--ink-soft); }
.flow-node__logo{ max-height:30px; max-width:85%; width:auto; }
.flow-node__role{ font-family:var(--font-display); font-weight:700; font-size:.96rem; color:var(--ink); line-height:1.4; }
.flow-node__name{ font-size:.82rem; color:var(--ink-soft); }

.flow-node--you .flow-node__role--big{ font-size:1.85rem; font-weight:900; color:var(--ink); }
.flow-node__role--big{ font-size:1.85rem; }

.flow-node__icon{
  width:52px; height:52px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-water); color:#fff;
}
.flow-node__icon svg{ width:26px; height:26px; }

.flow-tag{
  position:absolute; translate:-50% -50%; z-index:3;
  display:inline-flex; align-items:center; white-space:nowrap;
  font-size:.86rem; font-weight:700; color:var(--ink-soft);
  background:var(--foam); padding:7px 16px; border-radius:999px;
  border:1px solid var(--line);
}
.flow-tag--accent{ color:var(--ocean); border-color:rgba(13,99,201,.28); }
.flow-tag--a1{ left:29.09%; top:10.48%; }
.flow-tag--a2{ left:29.09%; top:28.55%; }
.flow-tag--supply{ left:12.27%; top:57.66%; }
.flow-tag--apply{ left:48.64%; top:50.81%; }
.flow-tag--deliver{ left:68.18%; top:61.29%; }
.flow-tag--repair{ left:86.36%; top:50.81%; }

@media (max-width:900px){
  .flow-diagram-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:12px 0 10px;
  }
  .flow-diagram{
    width:1100px;
    max-width:none;
    margin:44px auto 0;
    zoom:0.8;
  }
}

/* ==========================================================================
   Problem section (hook + illustration)
   ========================================================================== */
.problem__grid{
  display:grid; grid-template-columns:1.3fr .7fr; gap:56px; align-items:center;
}
.problem__title{ font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.35; margin-bottom:18px; }
.problem__hook{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem,1.6vw,1.25rem);
  color:var(--ocean); line-height:1.7; margin:0 0 20px;
}
.problem__lead{ font-size:1.12rem; line-height:2; }

.problem__chips{ gap:14px; margin-top:16px; }
.problem__chips .chip{
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 22px 8px 8px; border-radius:16px;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  box-shadow:0 10px 22px -16px rgba(13,99,201,.5);
}
.problem__chips .chip__icon{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:11px;
  background:var(--grad-water);
}
.problem__chips .chip__icon svg{ width:18px; height:18px; }
.problem__chips .chip__label{ font-size:.9rem; font-weight:700; letter-spacing:.01em; }
.problem__chips .chip em{ font-size:.84rem; }

.problem__art{ order:2; }
.problem__art-inner{
  animation:problemFloat 5s ease-in-out infinite;
}
.problem__svg{ width:100%; height:auto; display:block; }

.problem__drop{ opacity:0; animation:problemDrip 1.8s ease-in infinite; }
.problem__drop--1{ animation-delay:0s; }
.problem__drop--2{ animation-delay:.6s; }
.problem__drop--3{ animation-delay:1.2s; }

.problem__badge{ transform-origin:283px 96px; animation:problemPulse 1.7s ease-in-out infinite; }
.problem__badge-ring{ transform-origin:283px 96px; animation:problemRing 1.7s ease-out infinite; }
.problem__crack{ animation:problemFlicker 2.4s ease-in-out infinite; }
.problem__display{ animation:problemBlink 1.6s steps(1) infinite; }
.problem__drip{ animation:problemBlink 1.2s steps(1) infinite; }

@keyframes problemFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
@keyframes problemDrip{
  0%{ transform:translateY(0); opacity:0; }
  15%{ opacity:1; }
  75%{ opacity:1; }
  100%{ transform:translateY(30px); opacity:0; }
}
@keyframes problemPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.14); }
}
@keyframes problemRing{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(1.9); opacity:0; }
}
@keyframes problemFlicker{
  0%,40%,100%{ opacity:.9; }
  20%{ opacity:.3; }
}
@keyframes problemBlink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:.25; }
}

@media (max-width:900px){
  .problem__grid{ grid-template-columns:1fr; gap:8px; }
  .problem__art{ order:-1; max-width:380px; margin:0 auto 28px; }
  .problem__title{ font-size:clamp(1.3rem,6.5vw,2.2rem); }
}
@media (max-width:640px){
  .problem__title{ font-size:clamp(0.85rem, calc(4.9vw - 3px), 1.6rem); }
  .problem__lead{ font-size:0.95rem; line-height:1.75; }
}

/* ==========================================================================
   Chips
   ========================================================================== */
.chip-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:999px; font-size:.85rem; font-weight:500;
  background:#fff; border:1px solid var(--line); color:var(--ocean);
}
.chip em{ font-style:normal; color:var(--ink-soft); font-size:.78rem; }
.chip--muted{ color:var(--ink-soft); }
.chip--muted em{ color:#94a9bf; }
.chip--dark{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#dceeff; }
.chip--bare{ background:none; border-color:transparent; padding-left:6px; padding-right:6px; }

/* ==========================================================================
   Diagram (signature arrow)
   ========================================================================== */
.diagram{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:.9fr 1.3fr 1.3fr; align-items:center; gap:18px;
  max-width:900px; margin:50px auto 44px; padding:34px 30px;
  background:linear-gradient(160deg,#fff 0%,var(--foam) 100%);
  border-radius:var(--radius);
  border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(13,60,110,.3);
}
.diagram::after{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad-water);
}
.diagram > *{ position:relative; z-index:1; }
.diagram__block{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.diagram__label{ font-size:.8rem; color:var(--ink-soft); }
.diagram__value{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); }
.diagram__value--big{ font-size:2.6rem; color:var(--ocean); }
.diagram__block--max{ position:relative; gap:20px; }
.diagram__block--max .diagram__label{ color:var(--ink); font-weight:700; font-size:1rem; }
.diagram__block--max .diagram__value--big{
  display:inline-flex; align-items:center; position:relative;
  font-size:clamp(3.5rem, 6vw, 5.5rem);
}
.diagram__block--max .diagram__value--big .num{
  color:#ff4d6d; font-size:1em; font-weight:900; white-space:nowrap;
  display:inline-block; -webkit-text-stroke:3px #fff; paint-order:stroke fill;
  text-shadow:0 .05em 0 rgba(255,77,109,.3), 0 .1em .18em rgba(255,77,109,.35);
  animation:maxWiggle 1.8s ease-in-out infinite;
}
.diagram__sparkle{ position:absolute; width:.26em; height:.26em; animation:sparkleTwinkle 1.6s ease-in-out infinite; }
.diagram__sparkle--1{ top:-.05em; left:-.24em; animation-delay:0s; }
.diagram__sparkle--2{ bottom:-.03em; right:-.24em; width:.2em; height:.2em; animation-delay:.5s; }
@keyframes maxWiggle{
  0%,100%{ transform:rotate(0deg) scale(1); }
  25%{ transform:rotate(-5deg) scale(1.05); }
  75%{ transform:rotate(5deg) scale(1.05); }
}
@keyframes sparkleTwinkle{
  0%,100%{ transform:scale(.5) rotate(0deg); opacity:.35; }
  50%{ transform:scale(1.2) rotate(25deg); opacity:1; }
}
.diagram__arrow-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; }
.diagram__arrow-frame{ display:contents; }
.diagram__arrow{ width:100%; max-width:180px; height:auto; overflow:visible; }
.diagram__arrow-shape{
  transform-origin:center; transform-box:fill-box;
  animation:arrowHop 1.3s ease-in-out infinite;
}
@keyframes arrowHop{
  0%,100%{ transform:translateX(0) scale(1); }
  50%{ transform:translateX(10px) scale(1.03); }
}
.diagram__arrow-caption{ font-size:.76rem; color:var(--ink-soft); text-align:center; display:flex; flex-direction:column; gap:4px; }
.diagram__arrow-caption-main{ font-size:.95rem; color:var(--ocean); font-weight:700; }

@media (max-width:820px){
  .diagram{ grid-template-columns:1fr; }
  .diagram__arrow-frame{
    display:block;
    position:relative;
    width:30px; height:130px;
    margin:6px 0;
  }
  .diagram__arrow{
    position:absolute; top:50%; left:50%;
    width:130px; height:30px; max-width:none;
    margin:-15px 0 0 -65px;
    transform:rotate(90deg);
  }
}

.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature-grid .feature-pill:nth-child(1){ transition-delay:0s; }
.feature-grid .feature-pill:nth-child(2){ transition-delay:.08s; }
.feature-grid .feature-pill:nth-child(3){ transition-delay:.16s; }
.feature-grid .feature-pill:nth-child(4){ transition-delay:.24s; }
.feature-grid .feature-pill:nth-child(5){ transition-delay:.32s; }
.feature-grid .feature-pill:nth-child(6){ transition-delay:.4s; }
.feature-pill{
  border-radius:14px; padding:18px 20px;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
}
.feature-pill strong{
  font-size:.95rem; font-weight:800; color:var(--ocean); letter-spacing:.02em;
  text-shadow:0 0 6px #fff, 0 0 6px #fff, 0 0 10px rgba(255,255,255,.9);
}
.feature-pill span{
  font-family:var(--font-display); font-weight:900; font-size:1.22rem; color:var(--ink);
  text-shadow:0 0 8px #fff, 0 0 8px #fff, 0 0 14px rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center; gap:6px;
}

.feature-pill--highlight span{ font-size:1.15rem; }

.feature-pill__icon{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:52px; height:52px; margin-bottom:10px; color:var(--ocean);
}
.feature-pill__icon svg{ width:48px; height:48px; }

.feature-pill__icon--calendar .feature-pill__pulse{ animation:iconPulseDot 1.8s ease-in-out infinite; transform-origin:12px 14.5px; }
.feature-pill__icon--shield .feature-pill__draw{ stroke-dasharray:14; stroke-dashoffset:14; animation:iconDraw 2.6s ease-in-out infinite; }
.feature-pill__icon--gear svg{ animation:iconSpin 6s linear infinite; transform-origin:center; }
.feature-pill__icon--coin svg{ animation:iconFloat 2.2s ease-in-out infinite; }
.feature-pill__icon--swap svg{ animation:iconSwap 2.6s ease-in-out infinite; transform-origin:center; }
.feature-pill__icon--clock .feature-pill__hand-m{ animation:iconSpin 4s linear infinite; transform-origin:12px 12px; }

@keyframes iconPulseDot{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@keyframes iconDraw{ 0%,10%{ stroke-dashoffset:14; } 45%,100%{ stroke-dashoffset:0; } }
@keyframes iconSpin{ to{ transform:rotate(360deg); } }
@keyframes iconFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
@keyframes iconSwap{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(180deg); } }

@media (max-width:820px){ .feature-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){
  .feature-grid{ gap:12px; }
  .feature-pill{ padding:16px 10px; }
  .feature-pill__icon{ width:40px; height:40px; margin-bottom:6px; }
  .feature-pill__icon svg{ width:36px; height:36px; }
  .feature-pill strong{ font-size:.78rem; }
  .feature-pill span{ font-size:clamp(0.6rem, calc(4.8vw - 6px), 1rem); }
  .feature-pill--highlight span{ font-size:clamp(0.6rem, calc(4.6vw - 6px), 0.96rem); }
}

/* ==========================================================================
   Pillars
   ========================================================================== */
.pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; }
.pillar-card{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:38px 30px;
}
.pillar-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad-water);
}
.pillar-card__icon{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:none;
  background:var(--grad-water); color:#fff; margin-bottom:24px;
  box-shadow:0 12px 26px -10px rgba(41,168,255,.6);
}
.pillar-card__icon{ animation:iconFloat 2.8s ease-in-out infinite; }
.pillar-grid .pillar-card:nth-child(2) .pillar-card__icon{ animation-delay:.3s; }
.pillar-grid .pillar-card:nth-child(3) .pillar-card__icon{ animation-delay:.6s; }
.pillar-card__icon svg{ width:30px; height:30px; }
.pillar-card h3{
  font-family:var(--font-display); font-weight:900; font-size:1.32rem;
  color:#fff; line-height:1.4; margin:0 0 14px; letter-spacing:.01em;
}
.pillar-card p{ color:#c3daf0; line-height:1.9; font-size:.92rem; margin:0; }
@media (max-width:900px){ .pillar-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Stats
   ========================================================================== */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.stat-card{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:48px; padding:40px 28px 32px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.stat-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-water);
}
.stat-card__num{
  font-size:2.15rem; line-height:1.15; letter-spacing:-.01em;
  background:var(--grad-water); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.stat-card__num--text{ white-space:nowrap; }
.stat-card__label{ font-size:.86rem; color:#a9c7e2; letter-spacing:.02em; margin-top:8px; }

/* ---- Card 1: response rate — a gauge reading 95% ---- */
.stat-card__gauge{ width:80px; height:80px; margin:0 0 16px; }
.stat-card__gauge svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.stat-card__gauge-track{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:6; }
.stat-card__gauge-fill{
  fill:none; stroke-width:6; stroke-linecap:round;
  stroke-dasharray:201.06; stroke-dashoffset:201.06;
  transition:stroke-dashoffset 1.5s var(--ease) .2s;
}
.stat-grid.in-view .stat-card__gauge-fill{ stroke-dashoffset:10.05; }

/* ---- Card 2: connect time — a signal spike arriving ---- */
.stat-card__pulse{ width:100%; max-width:170px; height:80px; margin:0 0 16px; display:flex; align-items:center; justify-content:center; }
.stat-card__pulse-inner{ position:relative; width:100%; height:44px; }
.stat-card__pulse-inner svg{ width:100%; height:100%; display:block; }
.stat-card__pulse-line{
  fill:none; stroke:var(--aqua); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:245; stroke-dashoffset:245;
  transition:stroke-dashoffset 1.3s var(--ease) .2s;
}
.stat-grid.in-view .stat-card__pulse-line{ stroke-dashoffset:0; }
.stat-card__pulse-dot{
  position:absolute; top:14%; left:36%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:var(--aqua); box-shadow:0 0 9px 2px rgba(75,227,208,.7);
  opacity:0; transform:scale(.4);
  transition:opacity .3s var(--ease) 1.1s, transform .3s var(--ease) 1.1s;
}
.stat-grid.in-view .stat-card__pulse-dot{
  opacity:1; transform:scale(1);
  animation:ccStatPing 1.7s ease-in-out 1.5s infinite;
}
@keyframes ccStatPing{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.5; transform:scale(.82); }
}

/* ---- Card 3: availability — an orbit that never stops ---- */
.stat-card__orbit{ position:relative; width:80px; height:80px; margin:0 0 16px; }
.stat-card__orbit svg{ width:100%; height:100%; display:block; }
.stat-card__orbit-track{ fill:none; stroke:rgba(255,255,255,.18); stroke-width:1.6; stroke-dasharray:1.5 6; stroke-linecap:round; }
.stat-card__orbit-pivot{ position:absolute; inset:0; animation:ccStatOrbit 7s linear infinite; }
.stat-card__orbit-dot{
  position:absolute; top:4px; left:50%; width:7px; height:7px; margin-left:-3.5px;
  border-radius:50%; background:var(--grad-water); box-shadow:0 0 9px 2px rgba(75,227,208,.65);
}
@keyframes ccStatOrbit{ to{ transform:rotate(360deg); } }

@media (max-width:900px){
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-card:last-child{
    grid-column:1 / -1;
    justify-self:center;
    width:calc(50% - 10px);
  }
}
@media (max-width:560px){
  .stat-grid{ grid-template-columns:1fr; }
  .stat-card:last-child{
    grid-column:auto;
    justify-self:stretch;
    width:auto;
  }
}

/* ==========================================================================
   Call center (dark, lives inside the flagship Support section)
   ========================================================================== */
.cc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:40px 0 30px; }
.cc-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  padding:30px 28px; position:relative; overflow:hidden;
}
.cc-card__tag{
  font-family:var(--font-num); font-weight:700; font-size:.8rem; color:var(--ink);
  background:var(--aqua); display:inline-block; padding:3px 10px; border-radius:8px; margin-bottom:14px;
}
.cc-card h3{ font-family:var(--font-display); font-size:1.15rem; margin:0 0 10px; color:#fff; }
.cc-card p{ color:#b9d3ea; line-height:1.85; margin:0; font-size:.9rem; }
@media (max-width:760px){ .cc-grid{ grid-template-columns:1fr; } }

/* ---- Call center demo: ring → instant pickup → hearing the issue → dispatched ---- */
.cc-demo{ margin:48px 0 4px; }
.cc-demo__stage{
  display:flex; align-items:center; justify-content:center; gap:10px;
  max-width:420px; margin:0 auto;
}
.cc-demo__caller, .cc-demo__operator{
  position:relative; flex:none;
  width:84px; height:84px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.cc-demo__caller{
  background:rgba(193,102,47,.14); border:1px solid rgba(193,102,47,.5); color:var(--copper-soft);
  animation:ccShake 1.1s ease-in-out infinite;
}
.cc-demo:not([data-state="ringing"]) .cc-demo__caller{
  animation:none; transform:none; color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);
}
.cc-demo__icon{ width:36px; height:36px; position:relative; z-index:1; }
.cc-demo__wave{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--copper-soft);
  animation:ccWaveOut 1.65s ease-out infinite;
}
.cc-demo__wave--2{ animation-delay:.4s; }
.cc-demo__wave--3{ animation-delay:.8s; }
.cc-demo:not([data-state="ringing"]) .cc-demo__wave{ animation:none; opacity:0; }

.cc-demo__wire{ position:relative; flex:1; min-width:36px; max-width:150px; height:2px; background:rgba(255,255,255,.16); }
.cc-demo__wire-pulse{
  position:absolute; top:50%; left:0; translate:0 -50%;
  width:8px; height:8px; margin-top:-1px; border-radius:50%;
  background:var(--aqua); box-shadow:0 0 10px 2px rgba(75,227,208,.7);
  opacity:0;
}
.cc-demo[data-state="answered"] .cc-demo__wire-pulse{ animation:ccWireTravel .55s var(--ease) forwards; }

.cc-demo__operator{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.4); }
.cc-demo:not([data-state="ringing"]) .cc-demo__operator{ background:rgba(75,227,208,.14); border-color:var(--aqua); color:var(--aqua); }
.cc-demo__ring{
  position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--aqua); opacity:0;
}
.cc-demo[data-state="answered"] .cc-demo__ring{ animation:ccRingPop .8s ease-out; }
.cc-demo__bars{ position:absolute; left:50%; bottom:-9px; translate:-50% 0; display:flex; align-items:flex-end; gap:3px; height:12px; }
.cc-demo__bars i{ width:3px; height:4px; border-radius:2px; background:var(--aqua); opacity:0; transition:height .3s var(--ease); }
.cc-demo__bars i:nth-child(1){ animation-delay:0s; }
.cc-demo__bars i:nth-child(2){ animation-delay:.15s; }
.cc-demo__bars i:nth-child(3){ animation-delay:.3s; }
.cc-demo__bars i:nth-child(4){ animation-delay:.45s; }
.cc-demo[data-state="answered"] .cc-demo__bars i,
.cc-demo[data-state="handling"] .cc-demo__bars i{ opacity:1; animation:ccBar .9s ease-in-out infinite; }
.cc-demo[data-state="resolved"] .cc-demo__bars i{ opacity:.6; animation:none; height:3px; }

.cc-demo__status{ text-align:center; margin-top:22px; }
.cc-demo__badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  padding:7px 18px; border-radius:999px;
  background:rgba(193,102,47,.16); border:1px solid rgba(193,102,47,.5); color:var(--copper-soft);
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.cc-demo:not([data-state="ringing"]) .cc-demo__badge{ background:rgba(75,227,208,.16); border-color:var(--aqua); color:var(--aqua); }
.cc-demo__badge-msg{ display:none; align-items:center; gap:2px; }
.cc-demo[data-state="ringing"] .cc-demo__badge-msg--ringing,
.cc-demo[data-state="answered"] .cc-demo__badge-msg--answered,
.cc-demo[data-state="handling"] .cc-demo__badge-msg--handling,
.cc-demo[data-state="resolved"] .cc-demo__badge-msg--resolved{ display:inline-flex; }
.cc-demo__badge-msg--ringing i{ display:inline-block; width:3px; height:3px; margin-left:2px; border-radius:50%; background:currentColor; animation:ccDotBlink 1.2s steps(1) infinite; }
.cc-demo__badge-msg--ringing i:nth-child(2){ animation-delay:.15s; }
.cc-demo__badge-msg--ringing i:nth-child(3){ animation-delay:.3s; }

.cc-demo__caption{ margin:14px auto 0; max-width:480px; font-size:.88rem; color:#b9d3ea; line-height:1.8; }
.cc-demo__caption strong{ font-family:var(--font-num); color:var(--aqua); font-weight:700; }
.cc-demo__caption em{ font-style:normal; color:#fff; }
.cc-demo__line{ display:none; }
.cc-demo[data-state="ringing"] .cc-demo__line--ringing,
.cc-demo[data-state="answered"] .cc-demo__line--answered,
.cc-demo[data-state="handling"] .cc-demo__line--handling,
.cc-demo[data-state="resolved"] .cc-demo__line--resolved{ display:inline; }

@keyframes ccShake{
  0%,100%{ transform:rotate(0deg); }
  85%,95%{ transform:rotate(0deg); }
  87%{ transform:rotate(-12deg); }
  89%{ transform:rotate(10deg); }
  91%{ transform:rotate(-8deg); }
  93%{ transform:rotate(6deg); }
}
@keyframes ccWaveOut{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.55); opacity:0; }
}
@keyframes ccWireTravel{
  0%{ left:0; opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}
@keyframes ccRingPop{
  0%{ transform:scale(.7); opacity:.9; }
  100%{ transform:scale(1.35); opacity:0; }
}
@keyframes ccBar{
  0%,100%{ height:4px; }
  50%{ height:12px; }
}
@keyframes ccDotBlink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:.2; }
}
@media (max-width:560px){
  .cc-demo__caller, .cc-demo__operator{ width:68px; height:68px; }
  .cc-demo__icon{ width:28px; height:28px; }
}

.banner{
  border-radius:16px; padding:22px 28px; font-size:1rem; line-height:1.7;
  background:var(--grad-water); color:#fff; font-weight:500;
}
.banner strong{ font-weight:800; }

.support__rescue{
  margin-top:64px; padding-top:56px;
  border-top:1px solid rgba(255,255,255,.14);
}
.support__rescue-head{
  display:flex; align-items:center; justify-content:space-between; gap:36px;
}
.support__rescue-copy{ flex:1; min-width:0; }
.support__rescue-title{
  font-family:var(--font-display); font-weight:900; color:#fff;
  font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.4; margin:8px 0 16px;
}
.support__rescue-copy .lead{ margin-bottom:0; }

/* ---- Runner: a technician dashing to the rescue ---- */
.rescue-runner{ flex:none; width:150px; height:120px; overflow:visible; }
.rescue-runner__svg{
  width:100%; height:100%; overflow:visible; color:#eaf3fb;
  animation:runDash 2.2s linear infinite;
}
@keyframes runDash{
  0%{ transform:translateX(65px); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform:translateX(-65px); opacity:0; }
}
.rescue-runner__figure{
  fill:none; stroke:currentColor; stroke-width:4.4; stroke-linecap:round; stroke-linejoin:round;
  animation:runBob .42s ease-in-out infinite;
}
.rescue-runner__head{ fill:none; }
.rescue-runner__leg--front{ transform-origin:54px 60px; animation:runLegFront .4s ease-in-out infinite; }
.rescue-runner__leg--back{ transform-origin:54px 60px; animation:runLegBack .4s ease-in-out infinite; }
.rescue-runner__arm--front{ transform-origin:49px 33px; animation:runArmFront .4s ease-in-out infinite; }
.rescue-runner__arm--back{ transform-origin:49px 33px; animation:runArmBack .4s ease-in-out infinite; }
.rescue-runner__shadow{
  rx:24; ry:5; fill:rgba(75,227,208,.28);
  animation:runShadow .42s ease-in-out infinite;
}
.rescue-runner__lines{ stroke:var(--aqua); stroke-width:3; stroke-linecap:round; }
.rescue-runner__line{ opacity:0; animation:runSpeedLine .5s ease-out infinite; }
.rescue-runner__line--1{ animation-delay:0s; }
.rescue-runner__line--2{ animation-delay:.12s; }
.rescue-runner__line--3{ animation-delay:.24s; }

@keyframes runBob{
  0%{ transform:translateY(-2px); }
  25%{ transform:translateY(1px); }
  50%{ transform:translateY(-2px); }
  75%{ transform:translateY(1px); }
  100%{ transform:translateY(-2px); }
}
/* Legs: right-forward/left-back, alternating each half of the cycle */
@keyframes runLegFront{
  0%{ transform:rotate(32deg); }
  50%{ transform:rotate(-30deg); }
  100%{ transform:rotate(32deg); }
}
@keyframes runLegBack{
  0%{ transform:rotate(-30deg); }
  50%{ transform:rotate(32deg); }
  100%{ transform:rotate(-30deg); }
}
/* Arms: swing opposite their same-named leg, for natural cross-body coordination */
@keyframes runArmFront{
  0%{ transform:rotate(-34deg); }
  50%{ transform:rotate(30deg); }
  100%{ transform:rotate(-34deg); }
}
@keyframes runArmBack{
  0%{ transform:rotate(30deg); }
  50%{ transform:rotate(-34deg); }
  100%{ transform:rotate(30deg); }
}
@keyframes runShadow{
  0%{ transform:scaleX(.78); opacity:.38; }
  25%{ transform:scaleX(1); opacity:.6; }
  50%{ transform:scaleX(.78); opacity:.38; }
  75%{ transform:scaleX(1); opacity:.6; }
  100%{ transform:scaleX(.78); opacity:.38; }
}
@keyframes runSpeedLine{
  0%{ transform:translateX(14px); opacity:0; }
  35%{ opacity:.9; }
  100%{ transform:translateX(-18px); opacity:0; }
}
@media (max-width:760px){
  .support__rescue-head{ flex-direction:column; align-items:flex-start; gap:20px; }
  .rescue-runner{ align-self:center; }
}

/* ==========================================================================
   Plan table
   ========================================================================== */
.table-wrap{ overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); background:#fff; }
.plan-table{ width:100%; border-collapse:collapse; min-width:640px; }
.plan-table th, .plan-table td{ padding:20px 22px; text-align:center; border-bottom:1px solid var(--line); }
.plan-table thead th{
  font-family:var(--font-display); font-size:1.02rem; font-weight:700; background:var(--ink); color:#fff;
}
.plan-table__device{ text-align:left !important; border-right:1px solid rgba(255,255,255,.16); }
.plan-table__premium{ background:var(--ocean) !important; }
.plan-table td:first-child{ text-align:left; font-weight:700; font-size:1rem; color:var(--ink); border-right:1px solid var(--line); }
.plan-table td small{ display:block; font-weight:400; color:#4d6883; font-size:.8rem; margin-top:5px; line-height:1.65; }
.plan-table tbody tr:nth-child(even){ background:var(--foam); }
.plan-table tbody tr:last-child td{ border-bottom:none; }
.plan-table td:nth-child(3){ background:rgba(13,99,201,.05); }
.plan-table tbody tr:nth-child(even) td:nth-child(3){ background:rgba(13,99,201,.1); }
.dot-yes{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; background:var(--grad-water);
  box-shadow:0 0 0 4px rgba(41,168,255,.14);
}
.dot-yes::after{
  content:""; width:9px; height:5px; margin-top:-2px;
  border-left:2.4px solid #fff; border-bottom:2.4px solid #fff; transform:rotate(-45deg);
}
.dot-no{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; background:#eef1f6; border:1px solid #dde6ee;
  color:#a6b4c2; font-weight:700; font-size:.95rem; line-height:1;
}
.table-note{ font-size:.8rem; color:var(--ink-soft); margin:16px 0 0; }
.table-note--light{ color:#9fbcd8; }

@media (max-width:640px){
  .table-wrap{ overflow-x:visible; }
  .plan-table{ min-width:0; width:100%; table-layout:fixed; }
  .plan-table th, .plan-table td{ padding:10px 6px; }
  .plan-table thead th{ font-size:.72rem; line-height:1.3; }
  .plan-table td:first-child{ font-size:.8rem; line-height:1.3; }
  .plan-table td small{ display:none; }
  .plan-table__device{ width:46%; }
  .dot-yes, .dot-no{ width:20px; height:20px; }
  .dot-yes::after{ width:7px; height:4px; }
  .dot-no{ font-size:.8rem; }
}

.option-block{ margin-top:44px; }
.option-block__title{ font-family:var(--font-display); font-size:1.1rem; margin:0 0 16px; }

/* ==========================================================================
   Trouble cards
   ========================================================================== */
.trouble-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:12px 0 30px; }
.trouble-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:18px;
  padding:28px 22px;
}
.trouble-card__icon{ width:40px; height:40px; color:var(--aqua); margin-bottom:16px; }
.trouble-card__icon--glass{ animation:troubleShake 3.4s ease-in-out infinite; }
.trouble-card__icon--water{ animation:troubleDrip 1.8s ease-in-out infinite; }
.trouble-card__icon--key{ transform-origin:17px 24px; animation:troubleKeyJiggle 2.6s ease-in-out infinite; }
.trouble-card__icon--electric{ animation:troubleFlicker 2.6s ease-in-out infinite; }
@keyframes troubleShake{
  0%, 78%, 100%{ transform:rotate(0deg); }
  81%{ transform:rotate(-7deg); }
  84%{ transform:rotate(6deg); }
  87%{ transform:rotate(-4deg); }
  90%{ transform:rotate(2deg); }
  93%{ transform:rotate(0deg); }
}
@keyframes troubleDrip{
  0%,100%{ transform:translateY(0) scale(1,1); }
  45%{ transform:translateY(0) scale(1,1); }
  60%{ transform:translateY(5px) scale(1.05,.92); }
  75%{ transform:translateY(0) scale(.95,1.06); }
}
@keyframes troubleKeyJiggle{
  0%,55%,100%{ transform:rotate(0deg); }
  60%{ transform:rotate(-14deg); }
  66%{ transform:rotate(11deg); }
  72%{ transform:rotate(-8deg); }
  78%{ transform:rotate(0deg); }
}
@keyframes troubleFlicker{
  0%,18%,22%,50%,55%,100%{ opacity:1; }
  20%{ opacity:.25; }
  52%{ opacity:.15; }
}
.trouble-card h3{ font-family:var(--font-display); font-size:1.02rem; margin:0 0 10px; color:#fff; }
.trouble-card p{ font-size:.85rem; color:#b9d3ea; line-height:1.75; margin:0; }
@media (max-width:980px){ .trouble-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .trouble-grid{ grid-template-columns:1fr;} }

/* ==========================================================================
   Steps (signature chevrons)
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px; }
.step{ text-align:center; }
.step:nth-child(1){ transition-delay:0s; }
.step:nth-child(2){ transition-delay:.18s; }
.step:nth-child(3){ transition-delay:.36s; }
.step:nth-child(4){ transition-delay:.54s; }
.step__chevron{
  position:relative; height:64px; display:flex; align-items:center; justify-content:center;
  margin:0 -6px 20px; clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%);
  background:linear-gradient(120deg, var(--ocean), var(--sky) 45%, var(--aqua) 90%);
  background-size:220% 100%;
  cursor:pointer;
}
.step__chevron span{ font-family:var(--font-num); font-weight:700; color:#fff; letter-spacing:.05em; font-size:1.05rem; }
.step h3{ font-family:var(--font-display); font-size:1.02rem; margin:0 0 8px; }
.step p{ font-size:.86rem; color:var(--ink-soft); line-height:1.8; margin:0; }
@media (max-width:900px){
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Final appeal
   ========================================================================== */
.appeal-head{ display:flex; align-items:center; justify-content:space-between; gap:40px; }
.appeal-copy{ flex:1; min-width:0; }
.appeal-copy .lead{ margin-bottom:0; }

.care-illust{ flex:none; width:180px; height:150px; }
.care-illust__svg{ width:100%; height:100%; overflow:visible; }
.care-illust__heart{
  fill:none; stroke:var(--aqua); stroke-width:3; stroke-linejoin:round; stroke-linecap:round;
  transform-origin:60px 52px;
  animation:careHeartbeat 2.6s ease-in-out infinite;
}
@keyframes careHeartbeat{
  0%,100%{ transform:scale(1); }
  20%{ transform:scale(1.1); }
  35%{ transform:scale(.97); }
  50%{ transform:scale(1.06); }
  65%{ transform:scale(1); }
}
@media (max-width:760px){
  .appeal-head{ flex-direction:column; align-items:flex-start; gap:24px; }
  .care-illust{ align-self:center; }
}

.appeal-recap{
  display:flex; flex-wrap:wrap; margin-top:44px;
  border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14);
}
.appeal-recap__item{
  flex:1 1 180px; padding:26px 22px; text-align:center;
  display:flex; flex-direction:column; gap:6px;
  border-right:1px solid rgba(255,255,255,.14);
}
.appeal-recap__item:last-child{ border-right:none; }
.appeal-recap__num{
  font-family:var(--font-num); font-weight:700; font-size:1.5rem; letter-spacing:-.01em;
  background:var(--grad-water); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.appeal-recap__label{ font-size:.82rem; color:#a9c7e2; }
@media (max-width:700px){
  .appeal-recap__item{
    flex:1 1 50%;
    border-right:1px solid rgba(255,255,255,.14);
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .appeal-recap__item:nth-child(even){ border-right:none; }
  .appeal-recap__item:last-child{ border-right:none; border-bottom:none; }
  .appeal-recap__num{ font-size:clamp(0.8rem, calc(8.4vw - 13px), 1.5rem); }
}

.family-illust{ max-width:320px; margin:52px auto 0; }
.family-illust__svg{ width:100%; height:auto; overflow:visible; }
.family-illust__roof{ fill:none; stroke:var(--aqua); stroke-width:2.6; stroke-linejoin:round; }
.family-illust__body{ fill:none; stroke:var(--aqua); stroke-width:2.6; }
.family-illust__door{ fill:rgba(75,227,208,.12); stroke:var(--aqua); stroke-width:2; }
.family-illust__window{ fill:var(--aqua); stroke:none; opacity:.5; animation:familyGlow 3.2s ease-in-out infinite; }
.family-illust__people{ transform-origin:50px 76px; animation:familyBreathe 4s ease-in-out infinite; }
.family-illust__figure{ fill:#eaf3fb; }
.family-illust__figure--child{ fill:var(--aqua); }
.family-illust__arm{ fill:none; stroke:#eaf3fb; stroke-width:2.4; stroke-linecap:round; }
@keyframes familyGlow{
  0%,100%{ opacity:.4; }
  50%{ opacity:.9; }
}
@keyframes familyBreathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.02); }
}

/* ==========================================================================
   CTA section
   ========================================================================== */
.section--cta{
  background:var(--grad-deep); position:relative; overflow:hidden; text-align:center;
}
.cta__inner{ position:relative; z-index:2; max-width:720px; }
.section--cta .lead{ margin-inline:auto; }
.section--cta .eyebrow, .section--cta .h2{ text-align:center; }

.btn--xl{
  padding:24px 56px; font-size:1.2rem; gap:14px;
  animation:ctaBounce 2.2s ease-in-out infinite;
}
.btn--xl:hover{ animation-play-state:paused; }
.btn--xl .arrow-ico{ width:22px; height:22px; }
.btn--xl::after{
  content:""; position:absolute; top:0; left:-60%; width:34%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-20deg);
  animation:ctaSheen 3.2s ease-in-out infinite;
}
@keyframes ctaBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}
@keyframes ctaSheen{
  0%{ left:-60%; }
  35%{ left:130%; }
  100%{ left:130%; }
}

.cta__action{ margin-top:44px; display:flex; flex-direction:column; align-items:center; gap:14px; }
@media (max-width:560px){ .btn--xl{ padding:20px 36px; font-size:1.05rem; width:100%; justify-content:center; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--ink); color:#a9c7e2; padding:50px 0 32px; }
.footer__inner{ display:flex; flex-direction:column; gap:26px; align-items:center; text-align:center; }
.footer__brand{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.footer__sub{ font-size:.78rem; color:var(--aqua); letter-spacing:.04em; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; font-size:.85rem; }
.footer__nav a:hover{ color:var(--aqua); }
.footer__copy{ font-size:.75rem; color:#5f7d97; margin:0; }

/* ==========================================================================
   Back to top
   ========================================================================== */
.to-top{
  position:fixed; right:26px; bottom:26px; z-index:800;
  width:52px; height:52px; border-radius:50%; border:none;
  background:var(--grad-water); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(13,99,201,.6);
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top:hover{ transform:translateY(-4px); }

/* ==========================================================================
   Ripple bursts (global, JS-spawned)
   ========================================================================== */
.ripple-ring{
  position:fixed; top:0; left:0; z-index:2000; pointer-events:none;
  width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; border:1.5px solid rgba(75,227,208,.85);
  box-shadow:0 0 12px 1px rgba(41,168,255,.4);
  animation:rippleOut .75s ease-out forwards;
}
@keyframes rippleOut{
  0%{ transform:scale(0); opacity:.9; }
  100%{ transform:scale(9); opacity:0; }
}

/* ==========================================================================
   Mobile nav
   ========================================================================== */
@media (max-width:1180px){
  .nav__toggle{ display:flex; order:3; }
  .nav{
    position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(78vw,320px);
    background:var(--ink); flex-direction:column; padding:110px 34px; gap:26px;
    margin-right:0;
    transform:translateX(100%); transition:transform .4s var(--ease); z-index:950;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__close{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:26px; right:26px;
    width:40px; height:40px; border-radius:50%; flex:none;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff;
  }
  .nav__close svg{ width:18px; height:18px; }
  .header__inner .btn--small{ order:2; }
  .header__inner{ flex-wrap:wrap; }
  .brand__logo{ height:22px; }
}
@media (max-width:480px){
  .brand__logo{ height:18px; }
}
@media (max-width:560px){
  .header__inner{ flex-wrap:nowrap; gap:12px; }
  .brand{ min-width:0; flex:0 1 auto; }
  .brand__logo{ height:16px; }
  .header__inner .btn--small{ padding:8px 14px; font-size:.74rem; gap:6px; }
  .header__inner .btn--small .arrow-ico{ display:none; }
  .nav__toggle{ width:32px; height:32px; gap:4px; }
}