/* ============ Soft Ocean Futurism, Vocating visual system ============ */
:root{
  --page:#F4FBFF;--panel:rgba(255,255,255,.76);--tint:#E7F7FF;--sand:#FFF4E5;
  --ink:#082846;--ink-2:#345A75;--ink-3:#658198;--line:rgba(8,83,137,.13);
  --accent:#078DD8;--accent-ink:#056CAA;--accent-soft:#D9F4FF;
  --cyan:#13D5E5;--blue:#087FE2;--deep:#073B94;--lilac:#8F82F7;--coral:#FF6B78;
  --r:34px;--max:1240px;
}
body{
  background:
    radial-gradient(circle at 8% 8%,rgba(34,205,238,.16),transparent 34rem),
    radial-gradient(circle at 93% 28%,rgba(143,130,247,.13),transparent 32rem),
    linear-gradient(180deg,#F7FDFF 0%,#EEF9FF 44%,#F8FCFF 100%);
}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.72),transparent 32%,rgba(255,255,255,.24) 68%,transparent)}
section{padding:clamp(78px,9vw,132px) 0}
.vx-grain{opacity:.13;mix-blend-mode:soft-light}
.lede{color:var(--ink-2)}

.nav{background:rgba(245,252,255,.72);border-bottom:1px solid rgba(255,255,255,.86);box-shadow:0 8px 32px rgba(7,83,145,.06);backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%)}
.nav .wrap{height:74px}
.brand img{height:29px;filter:drop-shadow(0 4px 10px rgba(8,126,198,.08))}
.vx-menu-btn{border-color:rgba(7,110,170,.13);background:rgba(255,255,255,.58);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(8,85,140,.06)}
.vx-menu-btn:hover{background:rgba(255,255,255,.92);border-color:rgba(8,141,216,.45)}
.vx-menu-btn i{background:var(--deep)}
.vx-panel{background:rgba(244,251,255,.9);border-color:rgba(255,255,255,.85);box-shadow:0 30px 80px rgba(7,73,126,.15)}
.vx-panel a.vx-mcard{background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(226,246,255,.72));border:1px solid rgba(255,255,255,.88);box-shadow:0 14px 34px rgba(7,88,145,.06)}

.btn-primary{background:linear-gradient(135deg,var(--blue),#08A7D8 56%,#16CFCF);color:#fff;box-shadow:0 12px 28px rgba(8,128,218,.24),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-primary:hover{background:linear-gradient(135deg,#076ED1,#078ECC 56%,#0EBDBF);box-shadow:0 16px 36px rgba(8,128,218,.32)}

.hero{padding:clamp(42px,6vw,82px) 0 clamp(72px,9vw,118px);isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(10px);z-index:-1;pointer-events:none}
.hero::before{width:min(560px,48vw);height:min(560px,48vw);left:-18%;top:-15%;background:radial-gradient(circle,rgba(40,210,235,.2),transparent 68%)}
.hero::after{width:min(500px,44vw);height:min(500px,44vw);right:-18%;bottom:-14%;background:radial-gradient(circle,rgba(142,125,247,.15),transparent 70%)}
.hero .wrap{gap:clamp(34px,6vw,82px)}
.hero h1{font-size:clamp(42px,5.3vw,68px);max-width:14ch;background:linear-gradient(128deg,#082846 8%,#075FA6 48%,#078ED8 76%,#15C8D5);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:clamp(18px,1.55vw,21px);max-width:52ch}
.hero .scene{border-radius:44px;border:1px solid rgba(255,255,255,.88);box-shadow:0 38px 90px rgba(6,83,145,.17),0 0 0 8px rgba(255,255,255,.32);transform:translateZ(0)}
.hero .scene::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -60px 90px rgba(6,96,171,.08)}
.hero .scene .ph{background:#092346;border:1px solid rgba(255,255,255,.25);box-shadow:0 34px 70px rgba(7,42,91,.32),0 0 0 1px rgba(255,255,255,.32) inset}
.cap{padding:7px;border-radius:999px;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 42px rgba(7,94,151,.09);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.cap input{border:0;background:transparent;padding-left:17px}
.cap input:focus-visible{outline:0;box-shadow:none}

.fog-s{background:linear-gradient(180deg,rgba(232,248,255,.5),rgba(224,243,255,.86) 48%,rgba(244,251,255,.4));border-top:1px solid rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.72)}
.said li{background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.88);box-shadow:0 12px 30px rgba(7,86,143,.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.fog-s h2{background:linear-gradient(120deg,var(--ink),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

.ten{background:radial-gradient(circle at 75% 38%,rgba(140,127,247,.13),transparent 28rem)}
.ten .sec{background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 22px rgba(9,144,209,.13))}
.stack::before{content:"";position:absolute;inset:18% 8% 2%;border-radius:50%;background:radial-gradient(circle,rgba(17,210,229,.2),rgba(143,130,247,.08) 48%,transparent 72%);filter:blur(22px)}
.card{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(231,247,255,.62));border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 60px rgba(7,76,133,.11),inset 0 1px 0 #fff;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.card:nth-child(4){border-color:rgba(10,158,218,.42);box-shadow:0 0 0 4px rgba(19,213,229,.1),0 28px 64px rgba(8,115,184,.17)}
.card .l i{background:linear-gradient(90deg,rgba(8,141,216,.12),rgba(19,213,229,.17))}

.vx-turn{background:transparent;border:0;padding-top:40px}
.vx-turn .wrap{max-width:920px;padding:clamp(36px,6vw,70px);border-radius:42px;background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(223,246,255,.66) 58%,rgba(233,229,255,.62));border:1px solid rgba(255,255,255,.92);box-shadow:0 28px 70px rgba(7,85,142,.1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.vx-turn-k{color:var(--accent)}

.vx-cross{background:linear-gradient(180deg,rgba(244,251,255,.3),rgba(224,246,255,.72) 46%,rgba(242,250,255,.7))}
.vx-cross .vx-stage{border-radius:40px;border:1px solid rgba(255,255,255,.88);box-shadow:0 38px 90px rgba(5,75,131,.17),0 0 0 7px rgba(255,255,255,.26)}
.vx-cross .vx-cap{border-color:rgba(8,100,158,.12)}
.vx-step{background:linear-gradient(135deg,rgba(211,245,255,.95),rgba(232,230,255,.84));color:var(--accent-ink)}
.vx-cross .vx-dots i{background:rgba(8,94,151,.14)}
.vx-cross .vx-dots i.on{background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 0 0 5px rgba(19,213,229,.1)}
.vx-mq{background:rgba(255,255,255,.6);border-color:rgba(8,89,144,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

.journey{background:linear-gradient(180deg,#F5FCFF,rgba(231,247,255,.78) 32%,#F7FCFF)}
.chap{border-color:rgba(8,92,148,.11)}
.chap .k{color:var(--accent)}
.chap .stake{border-left-color:var(--cyan);background:linear-gradient(90deg,rgba(215,246,255,.56),transparent);padding:14px 16px;border-radius:0 16px 16px 0}
.leave li{background:rgba(255,255,255,.72);border-color:rgba(8,112,174,.12);box-shadow:0 8px 20px rgba(7,84,139,.05)}
.jsticky .scene,.chap .scene{border-radius:36px;border:1px solid rgba(255,255,255,.9);box-shadow:0 28px 70px rgba(7,75,130,.13)}
.journey-art{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.018);transition:transform 1.1s var(--ease);will-change:transform}
.jstage .scene.on .journey-art{transform:scale(1)}
.journey-phone{
  box-sizing:border-box;
  aspect-ratio:9/19.5;
  width:min(46vw,180px);
  margin-inline:auto;
  padding:7px;
  border:1px solid rgba(255,255,255,.62)!important;
  border-radius:48px!important;
  background:linear-gradient(125deg,#eef3f5 0%,#8496a2 10%,#223b4d 28%,#091d2e 52%,#38576a 77%,#dbe4e8 100%);
  box-shadow:0 34px 72px rgba(5,46,82,.28),0 0 0 1px rgba(4,21,35,.58),inset 0 1px 0 rgba(255,255,255,.82)!important;
}
.journey-phone::before{
  content:"";
  position:absolute;
  z-index:2;
  top:13px;
  left:50%;
  width:38%;
  height:20px;
  transform:translateX(-50%);
  border-radius:999px;
  background:radial-gradient(circle at 22% 50%,#263f54 0 2px,transparent 2.5px),#020b12;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.76),0 1px 1px rgba(255,255,255,.08);
}
.journey-phone::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:7px;
  border-radius:41px;
  pointer-events:none;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.18),inset -1px -1px 0 rgba(0,0,0,.18);
}
.journey-phone .journey-art{border-radius:41px;transform:scale(1);object-position:50% 52%}
#landfall .journey-art{object-position:38% 50%}
#shore .journey-art{object-position:35% 50%}
.jstage .journey-phone.on .journey-art{transform:scale(1)}
.hero .scene .iphone-frame{
  box-sizing:border-box;
  padding:7px;
  border:1px solid rgba(255,255,255,.64);
  border-radius:42px;
  background:linear-gradient(125deg,#eef3f5 0%,#82939f 11%,#1d3649 28%,#071b2c 52%,#3e5c6d 78%,#dce5e9 100%);
  box-shadow:0 36px 76px rgba(4,35,66,.38),0 0 0 1px rgba(4,21,35,.62),inset 0 1px 0 rgba(255,255,255,.82);
}
.hero .scene .iphone-frame::before{
  content:"";
  position:absolute;
  z-index:2;
  top:13px;
  left:50%;
  width:38%;
  height:18px;
  transform:translateX(-50%);
  border-radius:999px;
  background:radial-gradient(circle at 22% 50%,#263f54 0 2px,transparent 2.5px),#020b12;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.76),0 1px 1px rgba(255,255,255,.08);
}
.hero .scene .iphone-frame::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:7px;
  border-radius:35px;
  pointer-events:none;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.18),inset -1px -1px 0 rgba(0,0,0,.2);
}
.hero .scene .iphone-frame img{display:block;border-radius:35px}
@media(max-width:959px){
  .chap .journey-phone{width:min(46vw,180px);aspect-ratio:9/19.5}
}

/* Journey phones remain supporting visual cues, not full-screen product mockups. */
.journey .journey-phone{
  width:min(64vw,252px)!important;
  aspect-ratio:9/19.5!important;
}
@media(min-width:960px){
  .chap{opacity:.46;transition:opacity .45s var(--ease)}
  .chap.is-active{opacity:1}
}

.flo-s{background:radial-gradient(circle at 20% 50%,rgba(20,213,229,.13),transparent 30rem)}
.flo-s .panel{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(215,244,255,.72) 52%,rgba(227,225,255,.68));border:1px solid rgba(255,255,255,.94);box-shadow:0 36px 90px rgba(6,88,145,.13);border-radius:44px}
.flo-s .panel::after{content:"";position:absolute;width:220px;height:220px;right:-80px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(143,130,247,.18),transparent 70%);pointer-events:none}
.flo-s .scene{border-radius:36px;border:1px solid rgba(255,255,255,.85);box-shadow:0 24px 64px rgba(7,83,139,.14)}
.tenets li{border-color:rgba(8,87,144,.1)}

.proof{background:linear-gradient(180deg,rgba(245,252,255,.5),rgba(232,247,255,.72))}
.cell{border:1px solid rgba(255,255,255,.86);box-shadow:0 24px 60px rgba(7,84,140,.09)}
.cell.a{background:linear-gradient(155deg,#E8F8FF,#CFEFFF 58%,#E6E2FF)}
.cell.b{background:linear-gradient(145deg,#FFF8EC,#EDF9FF)}
.cell.c{background:linear-gradient(135deg,#0879DC,#08A9D1 58%,#14C8CA);box-shadow:0 28px 70px rgba(7,125,199,.24)}

.trust{background:#F8FCFF}
.tgrid{gap:16px}
.tgrid div{padding:26px;border:1px solid rgba(255,255,255,.9);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(232,247,255,.58));box-shadow:0 18px 44px rgba(7,83,139,.07)}

.vx-house{background:linear-gradient(180deg,#F8FCFF,#EEF9FF)}
.vx-house .vx-blk{background:rgba(255,255,255,.68);border-color:rgba(255,255,255,.9);box-shadow:0 26px 66px rgba(7,82,138,.09)}
.vx-stat,.vx-doors a{background:linear-gradient(145deg,rgba(238,250,255,.95),rgba(229,244,255,.72));border:1px solid rgba(255,255,255,.82)}

.join{background:radial-gradient(circle at 50% 10%,rgba(19,213,229,.18),transparent 28rem),linear-gradient(180deg,#EEF9FF,#E7F5FF 60%,#F3FAFF)}
.join .box{max-width:720px;padding:clamp(34px,6vw,68px);border-radius:44px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(230,247,255,.66));border:1px solid rgba(255,255,255,.94);box-shadow:0 36px 90px rgba(7,86,144,.13)}
.f input,.f select{background-color:rgba(255,255,255,.86);border-color:rgba(8,105,166,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
details{background:rgba(255,255,255,.72);border-color:rgba(8,104,164,.12);box-shadow:0 10px 28px rgba(7,83,139,.05)}
footer{background:#F5FBFF;border-color:rgba(8,90,145,.1)}

@media(max-width:900px){
  .hero h1{font-size:clamp(40px,10vw,62px)}
  .hero .scene{border-radius:34px}
  .hero .scene .iphone-frame{width:48%;padding:5px;border-radius:clamp(24px,7.5vw,32px)}
  .hero .scene .iphone-frame::before{top:10px;width:34%;height:12px}
  .hero .scene .iphone-frame::after{inset:5px;border-radius:clamp(19px,6vw,27px)}
  .hero .scene .iphone-frame img{border-radius:clamp(19px,6vw,27px)}
  .pattern-frame{border-radius:30px;padding:7px}
  .pattern-frame img,.pattern-frame::after{border-radius:24px}
  .pattern-frame::after{inset:7px}
  .pattern-frame img{aspect-ratio:16/9}
  .flo-s .panel,.join .box,.vx-turn .wrap{border-radius:32px;margin-inline:clamp(16px,5vw,28px)}
  .said li{font-size:14px;padding:9px 14px}
  .said{gap:8px}
}
@media(max-width:760px){
  .chap{display:flex;flex-direction:column;padding:26px 0}
  .chap .scene{order:-1;width:100%;margin:0 auto 18px;max-height:none;aspect-ratio:4/5}
  .chap .journey-phone{
    width:100%!important;aspect-ratio:4/5!important;
    padding:0!important;border:0!important;border-radius:24px!important;
    background:none!important;
    box-shadow:0 20px 48px rgba(7,75,130,.16)!important;
    margin:0 0 18px;
  }
  .chap .journey-phone::before{display:none}
  .chap .journey-phone::after{display:none}
  .chap .journey-phone .journey-art{border-radius:24px;object-position:50% 50%}
  .chap .k{align-self:flex-start}
  .chap h3{font-size:clamp(22px,6.5vw,28px);margin-top:6px}
}
@media(max-width:620px){
  section{padding:68px 0}
  .nav .wrap{height:68px}
  .brand img{height:24px}
  .cap{padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
  .cap input{background:rgba(255,255,255,.84);border:1px solid rgba(8,105,166,.16);box-shadow:0 12px 28px rgba(7,84,139,.07)}
  .join .box{padding:28px 20px}
}

/* v7 content, carried into the v6 soft-ocean visual language */
.vx-broke{
  background:
    radial-gradient(circle at 8% 18%,rgba(22,207,207,.14),transparent 28rem),
    radial-gradient(circle at 92% 78%,rgba(142,126,246,.12),transparent 30rem),
    transparent;
}
.vx-bimg{
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 30px 74px rgba(7,84,140,.14),inset 0 1px 0 rgba(255,255,255,.9);
}
.vx-walk{
  background:
    radial-gradient(circle at 12% 20%,rgba(20,211,229,.18),transparent 28rem),
    radial-gradient(circle at 88% 72%,rgba(143,130,247,.14),transparent 30rem),
    transparent;
}
.vx-wcard,.vx-q,.vx-card,.vx-stats div,.vx-mx .c,.vx-tbl{
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(231,247,255,.62));
  border-color:rgba(255,255,255,.9);
  box-shadow:0 24px 60px rgba(7,76,133,.1),inset 0 1px 0 #fff;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.vx-wcard:hover,.vx-next a:hover{
  box-shadow:0 30px 68px rgba(7,84,140,.16);
}
.vx-said{
  background:
    radial-gradient(circle at 82% 12%,rgba(255,203,103,.18),transparent 26rem),
    linear-gradient(180deg,rgba(255,248,236,.72),rgba(239,248,255,.72));
}
.vx-q.b::before{background:linear-gradient(180deg,var(--coral),#ff9d70)}
.vx-sub-hero{
  background:
    radial-gradient(circle at 12% 0%,rgba(22,207,207,.18),transparent 30rem),
    radial-gradient(circle at 88% 38%,rgba(143,130,247,.15),transparent 32rem),
    transparent;
}
.vx-sub-hero h1{
  background:linear-gradient(120deg,var(--ink),var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.vx-note-box,.vx-books2 figure,.vx-ms div{
  background:linear-gradient(145deg,rgba(255,249,238,.84),rgba(232,247,255,.7));
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 18px 44px rgba(7,83,139,.07);
}
.vx-next a{
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(226,246,255,.68));
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 14px 34px rgba(7,88,145,.06);
}
.vx-big,.vx-band,.vx-mx .c.me{
  background:linear-gradient(135deg,#0879DC,#08A9D1 58%,#14C8CA);
  box-shadow:0 28px 70px rgba(7,125,199,.24);
}
.vx-tr span:last-child{background:rgba(215,246,255,.54)}
.vx-faces img,.vx-ini{
  box-shadow:0 18px 44px rgba(7,83,139,.11);
  border:1px solid rgba(255,255,255,.9);
}
@media(max-width:760px){
  .vx-wcard,.vx-q,.vx-card,.vx-note-box,.vx-next a{border-radius:24px}
}

/* Responsive narrative visuals */
.vx-bimg{
  position:relative;
  isolation:isolate;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(214,243,255,.64));
}
.vx-bimg picture,.vx-bimg img{
  display:block;
  width:100%;
}
.vx-bimg img{height:auto}
.vx-path-labels{display:none}
@media(max-width:760px){
  .vx-bimg{
    width:min(100%,440px);
    aspect-ratio:4/5;
    margin:28px auto 0;
    overflow:hidden;
  }
  .vx-bimg picture,.vx-bimg img{height:100%}
  .vx-bimg img{min-width:0!important;object-fit:cover}
  .vx-path-labels{display:none!important}
  .vx-broke .vx-swipe{display:none!important}
}
@media(max-width:420px){
  .vx-path-labels li{font-size:9.5px}
}