/* =====================================================================
   iconmall.shop · Offer landing page — Byte Via Business Solutions
   Layout: one RTL scroll story in beats; brand petals as markers,
   mall floor-plan motif behind the app, retail artefacts (label, ticket,
   card, notification, price tag) as the service visuals.
   ===================================================================== */

/* ---------- tokens ---------- */
:root{
  /* official ICON MALL palette (sampled from the logo) */
  --navy:#172551; --sun:#f0c728; --rust:#c34b1a; --leaf:#7cce4a; --sky:#5bb3d6;
  --ink-on-color:#10183a;

  /* light theme */
  --bg:#f6f7fb;
  --surface:#ffffff;
  --panel:#eceff7;
  --fg:#121a3d;
  --fg-2:#3d4766;
  --muted:#6c7594;
  --line:#dfe3ee;
  --line-2:#c6cde0;
  --brand:#172551;
  --accent:#c34b1a;
  --seg-navy:#172551;
  --icon-navy:#172551;
  --band:#172551;
  --band-2:#21306b;
  --band-fg:#ffffff;
  --band-fg-2:#c9d0e5;
  --btn-bg:#172551;
  --btn-bg-h:#22357a;
  --btn-fg:#ffffff;
  --plate:transparent;
  --plate-pad:0px;
  --hl:rgba(240,199,40,.42);
  --shadow-lg:0 34px 70px -34px rgba(23,37,81,.5);
  --shadow-sm:0 14px 30px -20px rgba(23,37,81,.45);

  --ff-display:"Alexandria","IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --ff-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --ff-latin:"Montserrat","Segoe UI",Arial,sans-serif;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.77,0,.18,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-bs-theme="light"]){
    --bg:#0a1028; --surface:#111a3b; --panel:#141e45; --fg:#eef1fa; --fg-2:#c4cbe2; --muted:#8f99ba;
    --line:#243058; --line-2:#34416f; --brand:#eef1fa; --accent:#f2814f; --seg-navy:#3b5ba5; --icon-navy:#2c3d80;
    --band:#16214f; --band-2:#1f2c66; --band-fg:#ffffff; --band-fg-2:#c9d0e5;
    --btn-bg:#f0c728; --btn-bg-h:#ffd84a; --btn-fg:#10183a; --plate:#ffffff; --plate-pad:5px; --hl:rgba(240,199,40,.28);
    --shadow-lg:0 34px 70px -34px rgba(0,0,0,.75); --shadow-sm:0 14px 30px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-bs-theme="dark"]{
  --bg:#0a1028; --surface:#111a3b; --panel:#141e45; --fg:#eef1fa; --fg-2:#c4cbe2; --muted:#8f99ba;
  --line:#243058; --line-2:#34416f; --brand:#eef1fa; --accent:#f2814f; --seg-navy:#3b5ba5; --icon-navy:#2c3d80;
  --band:#16214f; --band-2:#1f2c66; --band-fg:#ffffff; --band-fg-2:#c9d0e5;
  --btn-bg:#f0c728; --btn-bg-h:#ffd84a; --btn-fg:#10183a; --plate:#ffffff; --plate-pad:5px; --hl:rgba(240,199,40,.28);
  --shadow-lg:0 34px 70px -34px rgba(0,0,0,.75); --shadow-sm:0 14px 30px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}
/* map tokens onto Bootstrap */
:root,[data-bs-theme]{
  --bs-body-font-family:var(--ff-body);
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--fg);
  --bs-border-color:var(--line);
  --bs-link-color:var(--brand);
  --bs-link-hover-color:var(--accent);
  --bs-link-color-rgb:23,37,81;
}

/* ---------- base ---------- */
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg);color:var(--fg);font-family:var(--ff-body);font-size:1.0625rem;line-height:1.85;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{overflow-x:clip}
img{max-width:100%;height:auto}
::selection{background:var(--sun);color:var(--ink-on-color)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.container{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3,h4{font-family:var(--ff-display);color:var(--brand);text-wrap:balance}
p{text-wrap:pretty}
[dir="ltr"]{unicode-bidi:isolate}
.bi{width:1.15em;height:1.15em;flex:none}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;z-index:3000;background:var(--btn-bg);color:var(--btn-fg);padding:.6rem 1rem;border-radius:10px;text-decoration:none}
.skip-link:focus{top:calc(12px + env(safe-area-inset-top, 0px))}

/* type */
.eyebrow{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.55rem;font-size:.95rem;font-weight:600;color:var(--fg-2);margin:0 0 .9rem}
.eyebrow .sep{color:var(--line-2)}
.eyebrow [dir="ltr"]{font-family:var(--ff-latin);font-weight:600;letter-spacing:.04em;color:var(--brand)}
.petal{width:13px;height:13px;border-radius:0 80% 0 80%;background:var(--c,var(--rust));display:inline-block;flex:none}
.display-hero{font-weight:800;font-size:clamp(2.55rem,6.1vw,5.3rem);line-height:1.14;letter-spacing:-.01em;margin:0 0 1.2rem}
@media (min-width:992px){.display-hero{font-size:clamp(3.2rem,4.5vw,4.6rem)}.display-hero .nw{white-space:nowrap}}
.display-hero em,.display-2x em{font-style:normal;color:var(--accent);background:linear-gradient(transparent 68%,var(--hl) 68% 92%,transparent 92%);padding-inline:.06em}
.display-2x{font-weight:800;font-size:clamp(1.95rem,4.2vw,3.5rem);line-height:1.22;margin:0 0 1rem}
.lead-hero{font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--fg-2);max-width:58ch;margin-bottom:1.8rem}
.sec-lead{font-size:clamp(1.02rem,1.25vw,1.15rem);color:var(--fg-2);max-width:62ch;margin:0}
.sub-h{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;margin:clamp(3rem,6vw,4.5rem) 0 1.4rem}
.sub-h small{font-family:var(--ff-body);font-size:.85rem;font-weight:500;color:var(--muted);margin-inline-start:.5rem}
.tagline{font-family:var(--ff-latin);font-weight:300;font-size:clamp(1.15rem,2vw,1.55rem);letter-spacing:.06em;color:var(--brand);margin:1.8rem 0 0;text-align:right}
.tagline b{font-weight:700}

/* buttons */
.btn{--bs-btn-padding-y:.72rem;--bs-btn-padding-x:1.25rem;--bs-btn-font-weight:600;--bs-btn-border-radius:999px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--ff-body)}
.btn-lg{--bs-btn-padding-y:.85rem;--bs-btn-padding-x:1.6rem;--bs-btn-font-size:1.05rem;--bs-btn-border-radius:999px}
.btn-brand{--bs-btn-color:var(--btn-fg);--bs-btn-bg:var(--btn-bg);--bs-btn-border-color:var(--btn-bg);--bs-btn-hover-color:var(--btn-fg);--bs-btn-hover-bg:var(--btn-bg-h);--bs-btn-hover-border-color:var(--btn-bg-h);--bs-btn-active-color:var(--btn-fg);--bs-btn-active-bg:var(--btn-bg-h);--bs-btn-active-border-color:var(--btn-bg-h);--bs-btn-focus-shadow-rgb:240,199,40}
.btn-ghost{--bs-btn-color:var(--brand);--bs-btn-bg:transparent;--bs-btn-border-color:var(--line-2);--bs-btn-hover-color:var(--brand);--bs-btn-hover-bg:var(--panel);--bs-btn-hover-border-color:var(--line-2);--bs-btn-active-color:var(--brand);--bs-btn-active-bg:var(--panel);--bs-btn-active-border-color:var(--line-2)}
.btn .bi{transition:transform .3s var(--ease-out)}
.btn:hover .bi{transform:translateX(-3px)}

/* icon bubbles */
.ico{width:46px;height:46px;border-radius:13px;display:inline-grid;place-items:center;flex:none}
.ico svg{width:23px;height:23px}
.ico.sm{width:36px;height:36px;border-radius:10px}
.ico.sm svg{width:19px;height:19px}
.ico-navy{background:var(--icon-navy);color:#fff}
.ico-rust{background:var(--rust);color:#fff}
.ico-sun{background:var(--sun);color:var(--ink-on-color)}
.ico-leaf{background:var(--leaf);color:var(--ink-on-color)}
.ico-sky{background:var(--sky);color:var(--ink-on-color)}
.plate{display:inline-flex;align-items:center;background:var(--plate);padding:var(--plate-pad) calc(var(--plate-pad) * 1.8);border-radius:10px}

/* ---------- navbar ---------- */
.site-nav{background:var(--bg);background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid transparent;padding-top:calc(.55rem + env(safe-area-inset-top, 0px));padding-bottom:.55rem;transition:border-color .3s,box-shadow .3s}
.site-nav.scrolled{border-bottom-color:var(--line);box-shadow:0 10px 30px -26px rgba(16,24,58,.6)}
.lockup{display:inline-flex;align-items:center;gap:.6rem;margin:0;padding:0}
.lk-icon{height:34px;width:auto}
.lk-bv{height:15px;width:auto}
.lk-x{color:var(--muted);font-family:var(--ff-latin);font-weight:300;font-size:1.1rem}
.offer-chip{align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;color:var(--brand);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem;margin-inline-start:.4rem}
.site-nav .nav-link{color:var(--fg-2);font-weight:500;padding:.5rem .85rem;border-radius:999px}
.site-nav .nav-link:hover,.site-nav .nav-link.active{color:var(--brand);background:var(--panel)}
.nav-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.navbar-toggler{border-color:var(--line-2);min-width:46px;min-height:44px}
@media (max-width:991.98px){
  .navbar-collapse{padding-block:.8rem 1rem}
  .nav-actions{margin-top:.6rem}
  .nav-actions .btn{flex:1}
}
.scroll-progress{position:absolute;inset-inline:0;bottom:-1px;height:3px;pointer-events:none}
.scroll-progress i{display:block;height:100%;background:linear-gradient(to left,var(--sun) 0 25%,var(--rust) 25% 50%,var(--leaf) 50% 75%,var(--sky) 75%);transform-origin:right center;transform:scaleX(0)}

/* ---------- sections ---------- */
.sec{padding-block:clamp(4.5rem,9vw,8rem)}
.sec-alt{background:var(--panel)}
.sec-head{max-width:820px;margin-bottom:clamp(2.2rem,4.5vw,3.6rem)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(4rem,8vw,6.5rem);position:relative;overflow-x:clip}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem}
.stage{position:relative;width:min(100%,540px);aspect-ratio:1/1.04;margin-inline:auto}
.floorplan{position:absolute;inset:3% 0 auto;width:100%;height:94%}
.fp-out{fill:var(--surface);stroke:var(--line-2);stroke-width:1.4}
.fp-hall{fill:none;stroke:var(--line);stroke-width:1.2;stroke-dasharray:6 6}
.fp-units rect{fill:var(--panel);stroke:var(--line-2);stroke-width:1}
.fp-units .hot{fill-opacity:.38;stroke-opacity:.6}
.fp-units .sun{fill:var(--sun)} .fp-units .rust{fill:var(--rust)} .fp-units .leaf{fill:var(--leaf)} .fp-units .sky{fill:var(--sky)}
.fp-pins circle{fill:var(--rust)}
.fp-pins .pulse{fill:var(--rust);opacity:.25;transform-box:fill-box;transform-origin:center}
.phone{position:absolute;top:50%;left:50%;translate:-50% -50%;width:clamp(212px,50%,266px);aspect-ratio:9/18.6;background:#0d1430;border-radius:42px;padding:9px;box-shadow:var(--shadow-lg),inset 0 0 0 2px #2a3666;z-index:2}
.phone-screen{position:relative;height:100%;background:#ffffff;color:#121a3d;border-radius:34px;overflow:hidden;padding:30px 12px 0;display:flex;flex-direction:column;gap:9px;font-size:10.5px;line-height:1.45}
.ph-notch{position:absolute;top:9px;left:50%;translate:-50% 0;width:72px;height:18px;border-radius:12px;background:#0d1430}
.ph-top{display:flex;justify-content:space-between;align-items:center}
.ph-top img{height:24px;width:auto}
.ph-top svg{width:18px;height:18px;color:#172551}
.ph-search{display:flex;align-items:center;gap:6px;background:#f2f4f9;border-radius:999px;padding:6px 10px;color:#8a92ad}
.ph-search svg{width:13px;height:13px}
.ph-promo{position:relative;background:#172551;color:#fff;border-radius:14px;padding:10px 12px;overflow:hidden;display:grid;gap:1px}
.ph-promo i{position:absolute;inset-inline-end:0;top:0;bottom:0;width:6px;background:linear-gradient(to bottom,var(--sun) 0 25%,var(--rust) 25% 50%,var(--leaf) 50% 75%,var(--sky) 75%)}
.ph-promo small{font-family:var(--ff-latin);font-size:8px;letter-spacing:.14em;color:#8fd0ea;text-align:right}
.ph-promo b{font-family:var(--ff-display);font-size:14px;line-height:1.35}
.ph-promo span{font-size:9.5px;color:#c9d0e5}
.ph-cats{display:flex;gap:5px}
.ph-cats span{background:#eef1f8;border-radius:999px;padding:2px 9px;font-size:9.5px;color:#3d4766}
.ph-cats .on{background:#172551;color:#fff}
.ph-label{font-family:var(--ff-display);font-weight:700;font-size:11.5px}
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ph-grid div{border-radius:12px;padding:8px;display:grid;gap:1px;min-height:64px;align-content:end;position:relative}
.ph-grid svg{position:absolute;top:8px;inset-inline-start:8px;width:15px;height:15px;color:#172551}
.ph-grid b{font-size:10px;line-height:1.3}
.ph-grid small{font-size:8.5px;color:#6c7594}
.ph-grid .t1{background:#eef1f8}.ph-grid .t2{background:#fbeee8}.ph-grid .t3{background:#eaf6fb}.ph-grid .t4{background:#eef9e8}
.ph-ride{display:flex;gap:8px;align-items:center;border:1px solid #e3e7f1;border-radius:12px;padding:7px 9px}
.ph-ride svg{width:18px;height:18px;color:#4a9a2a;flex:none}
.ph-ride b{display:block;font-size:10px}
.ph-ride span{font-size:9px;color:#6c7594}
.ph-nav{margin-top:auto;display:flex;justify-content:space-around;border-top:1px solid #e3e7f1;padding:7px 0 12px;font-size:8.5px;color:#9aa1b2}
.ph-nav span{display:grid;justify-items:center;gap:2px}
.ph-nav svg{width:15px;height:15px}
.ph-nav .on{color:#172551;font-weight:600}
.fchip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:.5rem;padding:.38rem .85rem .38rem .45rem;border-radius:999px;background:var(--surface);color:var(--fg);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:.9rem;font-weight:600;white-space:nowrap}
.fchip .ico{width:30px;height:30px;border-radius:999px}
.fchip .ico svg{width:16px;height:16px}
.fchip b{font-family:var(--ff-latin);font-weight:700}
.f1{top:8%;inset-inline-start:0}
.f2{top:36%;inset-inline-end:0}
.f3{bottom:20%;inset-inline-start:2%}
.f4{bottom:5%;inset-inline-end:3%}
.stats{margin-top:clamp(3rem,6vw,4.5rem)}
.stat{border-top:3px solid var(--c,var(--brand));padding-top:1rem;height:100%}
.stat-v{display:block;font-family:var(--ff-latin);font-weight:600;font-size:clamp(2.5rem,4.6vw,3.8rem);line-height:1.05;color:var(--brand);font-variant-numeric:tabular-nums;text-align:right;letter-spacing:-.01em}
.stat-k{display:block;margin-top:.55rem;color:var(--fg-2);font-size:.98rem;line-height:1.6}
.stat-s{display:block;margin-top:.35rem;color:var(--muted);font-size:.78rem}
.stat.sm .stat-v{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.stat.sm .stat-k{font-size:.92rem}

/* ---------- idea: before / after ---------- */
.vs{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch}
.vs-col{border-radius:18px;padding:clamp(1.4rem,3vw,2.2rem)}
.vs-col h3{font-size:1.25rem;font-weight:700;margin-bottom:1rem}
.vs-before{background:var(--panel);border:1px solid var(--line)}
.vs-before h3{color:var(--muted)}
.vs-after{background:var(--band);color:var(--band-fg)}
.vs-after h3{color:var(--band-fg)}
.vs-arrow{display:grid;place-items:center;color:var(--accent)}
.vs-arrow svg{width:30px;height:30px}
.plist{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.plist li{position:relative;padding-inline-start:1.6rem;line-height:1.7}
.plist li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:11px;height:11px;border-radius:0 80% 0 80%;background:var(--line-2)}
.vs-after .plist li{color:var(--band-fg-2)}
.vs-after .plist li::before{background:var(--sun)}
@media (max-width:767.98px){
  .vs{grid-template-columns:minmax(0,1fr)}
  .vs-arrow{height:56px}
  .vs-arrow svg{transform:rotate(-90deg)}
}

/* ---------- platform: orbit ---------- */
.orbit{position:relative;width:min(100%,820px);aspect-ratio:16/10;margin:0 auto}
.orbit-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit-lines ellipse,.orbit-lines line{fill:none;stroke:var(--line-2);stroke-width:1.2;vector-effect:non-scaling-stroke}
.orbit-lines ellipse{stroke-dasharray:4 7}
.orbit-core{position:absolute;top:50%;left:50%;translate:-50% -50%;width:clamp(170px,26%,210px);aspect-ratio:1;border-radius:50%;background:var(--band);color:var(--band-fg);display:grid;place-content:center;justify-items:center;text-align:center;gap:.1rem;box-shadow:0 0 0 10px var(--panel),0 0 0 11px var(--line-2),var(--shadow-lg);z-index:1}
.orbit-core b{font-family:var(--ff-latin);font-weight:600;font-size:1.2rem;letter-spacing:.02em}
.orbit-core span{font-size:.85rem;color:var(--band-fg-2)}
.orbit-core small{font-family:var(--ff-latin);font-size:.72rem;color:var(--band-fg-2);letter-spacing:.06em}
.onode{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;width:min(232px,30%);display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.7rem .8rem;box-shadow:var(--shadow-sm);z-index:2}
.onode b{display:block;font-family:var(--ff-latin);font-weight:700;font-size:.8rem;letter-spacing:.05em;color:var(--brand)}
.onode span:not(.ico){display:block;font-size:.85rem;color:var(--fg-2);line-height:1.45}
.svc-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.svc-list li{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.8rem}
.svc-list b{display:block;font-family:var(--ff-latin);font-weight:700;font-size:.82rem;letter-spacing:.05em;color:var(--brand)}
.svc-list span:not(.ico){font-size:.92rem;color:var(--fg-2)}

/* journey / numbered steps (true sequences) */
.journey,.steps3{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;position:relative}
.journey.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps3{grid-template-columns:repeat(3,minmax(0,1fr))}
.journey li,.steps3 li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.1rem 1.2rem;display:grid;gap:.25rem;align-content:start}
.j-no{font-family:var(--ff-latin);font-weight:700;font-size:.8rem;letter-spacing:.1em;color:var(--accent);text-align:right}
.journey b,.steps3 b{font-family:var(--ff-display);font-size:1.08rem;color:var(--brand)}
.journey li > span:last-child,.steps3 li > span:last-child{font-size:.92rem;color:var(--fg-2);line-height:1.6}
.journey li:not(:last-child)::after,.steps3 li:not(:last-child)::after{content:"";position:absolute;top:50%;inset-inline-end:-.85rem;width:.7rem;height:.7rem;border-top:2px solid var(--line-2);border-left:2px solid var(--line-2);transform:translateY(-50%) rotate(-45deg);z-index:1}
@media (max-width:991.98px){
  .journey,.journey.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journey li::after,.steps3 li::after{display:none}
}
@media (max-width:575.98px){
  .journey,.journey.four,.steps3{grid-template-columns:minmax(0,1fr)}
}
.friend{margin-top:clamp(2.5rem,5vw,3.5rem);display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-inline-start:5px solid var(--sky);border-radius:14px;padding:1.2rem 1.4rem}
.friend p{margin:0;flex:1 1 360px;min-width:0;color:var(--fg-2)}
.friend p b{color:var(--brand)}
.friend-pair{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-latin);font-weight:700;color:var(--brand);flex:none}
.friend-pair span{color:var(--accent);font-size:1.3rem}
.friend-pair a{color:var(--brand);text-decoration-color:var(--sky);text-underline-offset:4px}

/* ---------- services ---------- */
.svc-card{height:100%;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(1.3rem,2.6vw,2rem);display:flex;flex-direction:column;gap:.6rem;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.svc-top{display:flex;align-items:center;gap:.8rem;margin-bottom:.4rem}
.svc-name{font-family:var(--ff-latin);font-weight:700;font-size:.82rem;letter-spacing:.08em;color:var(--brand)}
.svc-big{margin-inline-start:auto;white-space:nowrap;font-family:var(--ff-latin);font-weight:700;font-size:clamp(2.1rem,3.6vw,2.9rem);line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}
.svc-big small{font-size:.5em;font-weight:600;margin-inline-start:.15em}
.svc-card h3{font-size:1.35rem;font-weight:700;margin:0}
.svc-card > p{color:var(--fg-2);margin:0}
.svc-art{margin-top:auto;padding-top:1.1rem}

/* delivery label */
.ship-label{border:1.5px dashed var(--line-2);border-radius:12px;padding:.9rem 1rem;display:grid;gap:.35rem;background:var(--bg)}
.sl-row{display:flex;gap:.6rem;align-items:baseline;font-size:.93rem}
.sl-k{font-size:.75rem;color:var(--muted);min-width:1.8rem}
.sl-route{display:flex;align-items:center;gap:.4rem;margin:.35rem 0}
.sl-dot{width:10px;height:10px;border-radius:50%;background:var(--rust);flex:none}
.sl-dot.end{background:var(--leaf)}
.sl-track{position:relative;flex:1;height:26px;background:linear-gradient(var(--line-2),var(--line-2)) center/100% 2px no-repeat}
.sl-truck{position:absolute;top:50%;inset-inline-start:0;width:26px;height:26px;translate:0 -50%;color:var(--rust);transform:scaleX(-1);background:var(--bg);border-radius:6px}
.sl-foot{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.barcode{display:block;height:30px;flex:0 1 170px;background:repeating-linear-gradient(to left,var(--fg) 0 2px,transparent 2px 4px,var(--fg) 4px 5px,transparent 5px 8px,var(--fg) 8px 11px,transparent 11px 13px,var(--fg) 13px 14px,transparent 14px 17px)}
.sl-foot b{font-family:var(--ff-latin);font-size:1.25rem;color:var(--brand)}

/* ride ticket */
.ticket{display:flex;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;position:relative;overflow:hidden}
.tk-main{flex:1;min-width:0;padding:1rem 1.1rem;display:grid;gap:.15rem}
.tk-k{font-size:.75rem;color:var(--muted)}
.tk-main > b{font-family:var(--ff-display);font-size:1.12rem;color:var(--brand)}
.tk-meta{font-size:.86rem;color:var(--fg-2)}
.tk-meta b{font-family:var(--ff-latin)}
.tk-stub{width:104px;flex:none;background:var(--leaf);color:var(--ink-on-color);display:grid;place-content:center;text-align:center;border-inline-start:2px dashed rgba(16,24,58,.35);position:relative}
.tk-stub b{font-family:var(--ff-latin);font-size:1.5rem;line-height:1}
.tk-stub span{font-size:.8rem}
.ticket::before,.ticket::after{content:"";position:absolute;inset-inline-end:93px;width:22px;height:22px;border-radius:50%;background:var(--surface);border:1px solid var(--line-2);z-index:2}
.ticket::before{top:-12px}
.ticket::after{bottom:-12px}

/* membership card (always a white plastic card) */
.mcard{position:relative;max-width:360px;aspect-ratio:1.586;background:#ffffff;color:#172551;border-radius:16px;border:1px solid #dfe3ee;box-shadow:var(--shadow-lg);padding:16px 18px 20px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:transform .25s ease-out;transform-style:preserve-3d;margin-inline:auto}
.mc-top{display:flex;justify-content:space-between;align-items:flex-start}
.mc-top img{height:40px;width:auto}
.mc-tier{text-align:left;display:grid;gap:4px;justify-items:end}
.mc-tier small{font-family:var(--ff-latin);font-weight:600;font-size:.62rem;letter-spacing:.2em;color:#6c7594}
.mc-tier span{background:var(--sun);color:#10183a;font-weight:700;font-size:.72rem;border-radius:6px;padding:1px 8px}
.mc-tier span b{font-family:var(--ff-latin)}
.mc-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:.8rem}
.mc-bottom small{display:block;font-size:.66rem;color:#6c7594}
.mc-bottom b{display:block;font-family:var(--ff-display);font-size:1.05rem;color:#172551}
.mc-bottom span{display:block;font-family:var(--ff-latin);font-size:.72rem;letter-spacing:.12em;color:#3d4766}
.mc-qr{position:relative;width:76px;height:76px;flex:none;display:grid;place-items:center}
.mc-qr .qr{width:58px;height:58px}
.qr-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.qr-ring circle{fill:none;stroke:var(--leaf);stroke-width:2.2;stroke-dasharray:103.7;stroke-dashoffset:0;stroke-linecap:round}
.mc-stripe{position:absolute;inset-inline:0;bottom:0;height:6px;display:flex}
.mc-stripe i{flex:1}
.mc-stripe i:nth-child(1){background:var(--sun)}.mc-stripe i:nth-child(2){background:var(--rust)}.mc-stripe i:nth-child(3){background:var(--leaf)}.mc-stripe i:nth-child(4){background:var(--sky)}

/* notification */
.notif{max-width:380px;margin-inline:auto;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:.85rem 1rem 1rem;box-shadow:var(--shadow-sm)}
.nt-head{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted);margin-bottom:.35rem}
.nt-head img{width:26px;height:26px;border-radius:7px;background:#fff;border:1px solid var(--line)}
.nt-head b{font-family:var(--ff-latin);font-size:.74rem;letter-spacing:.08em;color:var(--brand)}
.nt-head span{margin-inline-start:auto}
.nt-title{font-family:var(--ff-display);font-weight:700;color:var(--brand);margin:0;font-size:1.02rem}
.nt-body{margin:0;color:var(--fg-2);font-size:.93rem;line-height:1.6}

/* ---------- app features ---------- */
.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.badge-pill{font-family:var(--ff-latin);font-weight:600;font-size:.85rem;border:1px solid var(--line-2);border-radius:999px;padding:.35rem .9rem;color:var(--brand);background:var(--surface)}
.feat{height:100%;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.4rem 1.2rem}
.feat h3{display:flex;align-items:center;gap:.6rem;font-size:1.25rem;font-weight:700;margin-bottom:1rem}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.ticks li{position:relative;padding-inline-start:1.7rem;line-height:1.65;color:var(--fg-2)}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.42em;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%233b5ba5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.ticks.on-dark li{color:var(--band-fg-2)}
.ticks.on-dark li::before{background-color:rgba(255,255,255,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%23f0c728' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- store package ---------- */
.tag-wrap{position:relative;display:grid;justify-items:center;padding-top:58px}
.tag-wrap::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;width:2px;height:74px;background:var(--line-2);border-radius:2px}
.tag-wrap::after{content:"";position:absolute;top:-6px;left:50%;translate:-50% 0;width:12px;height:12px;border-radius:50%;background:var(--line-2)}
.price-tag{position:relative;width:min(100%,330px);background:var(--sun);color:var(--ink-on-color);padding:62px 28px 34px;text-align:center;display:grid;justify-items:center;gap:.2rem;clip-path:polygon(22% 0,78% 0,100% 15%,100% 100%,0 100%,0 15%);transform-origin:50% -58px;overflow:hidden}
.pt-hole{position:absolute;top:22px;left:50%;translate:-50% 0;width:18px;height:18px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 3px rgba(16,24,58,.22)}
.pt-label{font-family:var(--ff-latin);font-weight:700;font-size:.66rem;letter-spacing:.22em;opacity:.8}
.pt-price{font-family:var(--ff-latin);font-weight:700;font-size:clamp(3.6rem,8vw,4.8rem);line-height:1;letter-spacing:-.02em;margin-top:.3rem}
.pt-per{font-family:var(--ff-display);font-weight:700;font-size:1.15rem}
.pt-note{font-size:.84rem;margin-top:.6rem;padding-top:.6rem;border-top:1.5px dashed rgba(16,24,58,.3)}
.price-tag::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);translate:-130% 0;pointer-events:none}
.checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1.6rem}
.checks li{position:relative;padding-inline-start:1.9rem;line-height:1.6;color:var(--fg)}
.checks li::before{content:"";position:absolute;inset-inline-start:0;top:.2em;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%2310183a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/68% no-repeat}
@media (max-width:575.98px){.checks{grid-template-columns:minmax(0,1fr)}}
.mini{height:100%;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.8rem;row-gap:.15rem;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.1rem}
.mini .ico{grid-row:span 2}
.mini b{font-family:var(--ff-display);color:var(--brand);font-size:1.05rem}
.mini span:not(.ico){color:var(--fg-2);font-size:.92rem;line-height:1.55}
.note-leaf,.note-navy{margin:clamp(2rem,4vw,3rem) 0 0;border-radius:14px;padding:1.1rem 1.3rem;line-height:1.75}
.note-leaf{background:var(--surface);border:1px solid var(--line);border-inline-start:5px solid var(--leaf);color:var(--fg-2)}
.note-navy{background:var(--surface);border:1px solid var(--line);border-inline-start:5px solid var(--seg-navy);color:var(--fg-2)}
.note-leaf b,.note-navy b{color:var(--brand)}

/* ---------- marketing ---------- */
.market{height:100%;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.5rem}
.market h3{font-size:1.35rem;font-weight:700;margin:0}
.m-why{display:block;color:var(--muted);font-size:.9rem;margin:.2rem 0 1rem}
.m-msg{font-family:var(--ff-display);font-weight:700;color:var(--brand);font-size:1.12rem;line-height:1.55;margin:0}
.marquee{direction:ltr;margin-top:clamp(2.5rem,5vw,3.5rem);overflow:hidden;border-block:1px solid var(--line-2);padding-block:1rem;-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;width:max-content}
.mq-track span{display:inline-flex;align-items:center;gap:2.4rem;padding-inline-end:2.4rem;font-family:var(--ff-latin);font-weight:700;font-size:clamp(1.4rem,3vw,2.3rem);color:var(--brand);white-space:nowrap;letter-spacing:-.01em}
.mq-track span::after{content:"";width:14px;height:14px;border-radius:0 80% 0 80%;background:var(--sun)}
.mq-track span:nth-child(3n+2)::after{background:var(--rust)}
.mq-track span:nth-child(3n)::after{background:var(--sky)}
.audience{margin-top:2rem}
.src-line{font-size:.8rem;color:var(--muted);margin:1rem 0 0}
.pillars{display:flex;gap:4px;height:58px;border-radius:12px;overflow:hidden}
.pl{flex:var(--w) 1 0;display:grid;place-items:center;background:var(--c);color:var(--t);transform-origin:right center;min-width:0}
.pl b{font-family:var(--ff-latin);font-weight:700;font-size:1rem}
.pillar-keys{margin-top:1rem}
.pillar-keys b{display:flex;align-items:center;gap:.45rem;font-family:var(--ff-display);color:var(--brand);font-size:.98rem}
.pillar-keys b i{width:11px;height:11px;border-radius:3px;background:var(--c);flex:none}
.pillar-keys span{display:block;font-size:.86rem;color:var(--fg-2);line-height:1.55;margin-top:.15rem}

/* ---------- launch band ---------- */
.band{position:relative;background:var(--band);color:var(--band-fg);overflow:hidden}
.band-inner{padding-block:clamp(4.5rem,9vw,7.5rem)}
.eyebrow.on-band{color:var(--band-fg-2)}
.campaign{font-family:var(--ff-display);font-weight:800;color:var(--band-fg);font-size:clamp(2.6rem,7.6vw,6.4rem);line-height:1.15;margin:0}
.hashtag{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.05rem,2vw,1.4rem);color:var(--sun);margin:.6rem 0 1.2rem}
.band-lead{max-width:60ch;color:var(--band-fg-2);font-size:clamp(1.02rem,1.3vw,1.15rem);margin-bottom:clamp(2.4rem,5vw,3.5rem)}
.act{height:100%;border-radius:16px;padding:1.3rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden}
.act::before{content:"";position:absolute;top:1.3rem;inset-inline-end:1.3rem;width:16px;height:16px;border-radius:0 80% 0 80%;background:var(--c)}
.act b{display:block;font-family:var(--ff-display);font-size:1.12rem;margin-bottom:.35rem;padding-inline-end:1.6rem}
.act span{color:var(--band-fg-2);font-size:.93rem;line-height:1.6}
.band-stripe{display:flex;height:8px}
.band-stripe i{flex:1}
.band-stripe i:nth-child(1){background:var(--sun)}.band-stripe i:nth-child(2){background:var(--rust)}.band-stripe i:nth-child(3){background:var(--leaf)}.band-stripe i:nth-child(4){background:var(--sky)}

/* influencers / ideas / path */
.tier,.idea,.gain{height:100%;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.4rem;display:grid;gap:.3rem;align-content:start}
.tier .ico,.gain .ico{margin-bottom:.6rem}
.tier b,.idea b,.gain b{font-family:var(--ff-display);font-size:1.15rem;color:var(--brand)}
.tier small{color:var(--accent);font-weight:600}
.tier > span:last-child,.idea span,.gain > span:last-child{color:var(--fg-2);font-size:.95rem;line-height:1.65}
.idea{background:var(--panel);border-color:transparent}
.path{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;position:relative}
.path::before{content:"";position:absolute;top:9px;inset-inline:8%;height:2px;background:repeating-linear-gradient(to left,var(--line-2) 0 8px,transparent 8px 14px)}
.path li{position:relative;display:grid;gap:.2rem;justify-items:center;text-align:center;padding-top:1.9rem}
.path .p-dot{position:absolute;top:0;width:20px;height:20px;border-radius:50%;background:var(--surface);border:3px solid var(--rust)}
.path li:nth-child(2) .p-dot{border-color:var(--sun)}.path li:nth-child(3) .p-dot{border-color:var(--leaf)}.path li:nth-child(4) .p-dot{border-color:var(--sky)}.path li:nth-child(5) .p-dot{border-color:var(--seg-navy)}.path li:nth-child(6) .p-dot{border-color:var(--rust)}
.path b{font-family:var(--ff-display);color:var(--brand);font-size:1rem}
.path span:last-child{font-size:.86rem;color:var(--fg-2);line-height:1.5}
@media (max-width:991.98px){
  .path{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2rem}
  .path::before{display:none}
}
@media (max-width:575.98px){.path{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- plan ---------- */
.timeline{margin-bottom:2.6rem;padding:0 1.4rem}
.tl-track{position:relative;height:6px;border-radius:6px;background:var(--line);margin-top:1.8rem}
.tl-fill{position:absolute;inset:0;border-radius:6px;background:linear-gradient(to left,var(--seg-navy) 0 33.3%,var(--rust) 33.3% 66.6%,var(--leaf) 66.6%);transform-origin:right center}
.tl-mark{position:absolute;inset-inline-start:var(--at);top:-1.9rem;translate:50% 0;font-family:var(--ff-latin);font-weight:600;font-size:.8rem;color:var(--muted);white-space:nowrap}
.tl-mark::after{content:"";position:absolute;left:50%;translate:-50% 0;top:1.9rem;width:14px;height:14px;border-radius:50%;background:var(--surface);border:3px solid var(--brand);margin-top:-4px}
.phase{height:100%;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:6px 6px 16px 16px;padding:1.3rem;display:grid;gap:.3rem;align-content:start}
.ph-days{font-size:.82rem;color:var(--muted);font-weight:600}
.phase b{font-family:var(--ff-display);font-size:1.25rem;color:var(--brand)}
.phase > span:last-child{color:var(--fg-2);font-size:.95rem;line-height:1.65}
.targets .sub-h{margin-top:clamp(2.5rem,5vw,3.5rem)}

/* ---------- gains ---------- */
.impact{position:relative;margin-top:clamp(2.6rem,5vw,3.6rem);background:var(--band);color:var(--band-fg);border-radius:20px;padding:clamp(1.6rem,4vw,2.6rem) clamp(1.4rem,4vw,3rem);display:flex;align-items:center;gap:clamp(1rem,4vw,3rem);flex-wrap:wrap;overflow:hidden}
.impact-v{font-family:var(--ff-latin);font-weight:300;font-size:clamp(2.8rem,7vw,5rem);line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.impact p{flex:1 1 320px;min-width:0;margin:0;color:var(--band-fg-2);font-size:1.05rem}
.impact-stripe{position:absolute;inset-block:0;inset-inline-end:0;width:8px;display:flex;flex-direction:column}
.impact-stripe i{flex:1}
.impact-stripe i:nth-child(1){background:var(--sun)}.impact-stripe i:nth-child(2){background:var(--rust)}.impact-stripe i:nth-child(3){background:var(--leaf)}.impact-stripe i:nth-child(4){background:var(--sky)}

/* ---------- partner ---------- */
.role{height:100%;border-radius:20px;padding:clamp(1.5rem,3vw,2.2rem)}
.role h3{font-size:1.35rem;font-weight:700;margin:1rem 0 1.1rem}
.role-owner{background:var(--band);color:var(--band-fg)}
.role-owner h3{color:var(--band-fg)}
.role-host{background:var(--surface);border:1px solid var(--line)}
.role-logo{display:inline-flex;background:#ffffff;border-radius:12px;padding:.6rem .9rem;border:1px solid #e3e7f1}
.role-owner .role-logo img{height:26px;width:auto}
.role-host .role-logo img{height:40px;width:auto}
.next{margin-top:clamp(2.6rem,5vw,3.6rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;background:var(--surface);border:1px solid var(--line);border-inline-start:6px solid var(--sun);border-radius:16px;padding:1.4rem 1.6rem}
.next > div:first-child{flex:1 1 420px;min-width:0}
.next-text{margin:0;color:var(--fg);font-size:1.05rem}
.next-actions{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- footer ---------- */
.site-foot{background:var(--band);color:var(--band-fg-2);padding-block:clamp(3.5rem,7vw,5rem) calc(1.6rem + env(safe-area-inset-bottom, 0px));position:relative}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem}
.foot-logos{display:flex;flex-wrap:wrap;gap:1rem}
.foot-plate{display:inline-flex;align-items:center;gap:.6rem;background:#ffffff;border-radius:14px;padding:.8rem 1.1rem}
.foot-plate small{font-family:var(--ff-latin);font-size:.6rem;letter-spacing:.2em;color:#6c7594}
.fl-icon{height:46px;width:auto}
.fl-bv{height:22px;width:auto}
.foot-links{display:grid;gap:.6rem}
.foot-links p{margin:0;display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline}
.foot-links b,.foot-links a{font-family:var(--ff-latin);font-weight:600;color:var(--band-fg);font-size:1.05rem}
.foot-links a{text-decoration-color:var(--sky);text-underline-offset:4px}
.foot-tag{font-family:var(--ff-latin);font-weight:300;letter-spacing:.16em;color:var(--sky);margin:2.6rem 0 0;font-size:clamp(.95rem,1.6vw,1.1rem);text-align:right}
.foot-tag b{display:inline-block;margin-top:.3rem;font-weight:600;letter-spacing:.02em;color:var(--band-fg);font-size:clamp(1.3rem,3vw,2rem)}
.foot-bottom{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.85rem}
.foot-bottom p{margin:0;flex:1 1 320px;min-width:0}
.btn-replay{--bs-btn-color:var(--band-fg);--bs-btn-border-color:rgba(255,255,255,.3);--bs-btn-hover-bg:rgba(255,255,255,.1);--bs-btn-hover-color:var(--band-fg);--bs-btn-hover-border-color:rgba(255,255,255,.4);--bs-btn-active-color:var(--band-fg);--bs-btn-active-bg:rgba(255,255,255,.14);min-height:40px}

/* offline toast */
.net-toast{position:fixed;z-index:1500;inset-inline:max(16px, env(safe-area-inset-left, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px));margin-inline:auto;max-width:520px;background:var(--band);color:var(--band-fg);border-radius:14px;padding:.85rem 1.1rem;box-shadow:var(--shadow-lg);font-size:.95rem;border-inline-start:5px solid var(--sun)}

/* ---------- responsive tweaks ---------- */
@media (max-width:575.98px){
  body{font-size:1rem}
  .lk-icon{height:28px}
  .lk-bv{height:12px}
  .fchip{font-size:.78rem;padding:.3rem .7rem .3rem .35rem}
  .fchip .ico{width:24px;height:24px}
  .fchip .ico svg{width:13px;height:13px}
  .f1{top:4%}
  .f3{bottom:16%}
  .ticket::before,.ticket::after{inset-inline-end:85px}
  .tk-stub{width:96px}
}

/* =====================================================================
   INTRO
   ===================================================================== */
.intro{display:none;position:fixed;inset:0;z-index:2000;background:#ffffff;color:#172551;place-items:center;overflow:hidden;padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px)}
.intro-on .intro{display:grid}
.intro-on,.intro-on body{overflow:hidden}
.intro-stage{position:relative;display:grid;justify-items:center;gap:clamp(.6rem,2vh,1.1rem);text-align:center;padding-inline:max(16px, env(safe-area-inset-left, 0px))}
.intro-logo{width:clamp(190px,32vw,380px);height:auto}
.intro-tag{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.5rem,3.8vw,3rem);color:#172551;margin:0;line-height:1.35}
.intro-tag span{display:inline-block}
.intro-tag .hl{color:#c34b1a}
.intro-domain{font-family:var(--ff-latin);font-weight:500;letter-spacing:.22em;color:#3b5ba5;margin:0;font-size:clamp(.9rem,1.6vw,1.1rem)}
.intro-by{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;font-size:.85rem;color:#6c7594}
.intro-by img{height:18px;width:auto}
.intro-cols{position:absolute;inset:0;display:flex}
.ic{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem;padding:0 clamp(10px,2.2vw,32px) calc(clamp(56px,12vh,130px) + env(safe-area-inset-bottom, 0px));overflow:hidden}
.ic b{font-family:var(--ff-latin);font-weight:700;font-size:clamp(1.25rem,5.4vw,5rem);line-height:1;letter-spacing:-.02em;text-align:right}
.ic span{font-family:var(--ff-display);font-weight:700;font-size:clamp(.85rem,2.2vw,1.9rem)}
.c1{background:#f0c728;color:#10183a}.c2{background:#c34b1a;color:#ffffff}.c3{background:#7cce4a;color:#10183a}.c4{background:#5bb3d6;color:#10183a}
.intro-bar{position:absolute;inset-inline:0;bottom:0;height:5px;background:#eef1f8;z-index:1}
.intro-bar i{display:block;height:100%;background:linear-gradient(to left,#f0c728 0 25%,#c34b1a 25% 50%,#7cce4a 50% 75%,#5bb3d6 75%);transform-origin:right center;transform:scaleX(0)}
.intro-skip{position:absolute;z-index:3;bottom:calc(18px + env(safe-area-inset-bottom, 0px));left:calc(18px + env(safe-area-inset-left, 0px));min-height:44px;padding:.5rem 1.1rem;border-radius:999px;border:0;background:#ffffff;color:#172551;font-weight:600;font-family:var(--ff-body);box-shadow:0 10px 30px -12px rgba(16,24,58,.5)}
.intro-skip:hover{background:#f6f7fb}

/* =====================================================================
   MOTION (only when the visitor allows it; html.motion is set by boot.js)
   Everything is visible at rest; animations start from a visible page.
   ===================================================================== */
@keyframes colUp{to{transform:translateY(-101%)}}
@keyframes wordIn{from{transform:translateY(22%)}}
@keyframes logoIn{from{opacity:0;transform:scale(.86);filter:blur(10px)}}
@keyframes up{from{opacity:0;transform:translateY(14px)}}
@keyframes bar{to{transform:scaleX(1)}}
@keyframes introOut{to{clip-path:inset(0 0 100% 0)}}
@keyframes introOutFast{to{clip-path:inset(0 0 100% 0)}}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}
@keyframes bob{50%{transform:translateY(-9px)}}
@keyframes floaty{50%{transform:translateY(-10px) rotate(-1deg)}}
@keyframes pinDrop{0%{transform:translateY(-26px);opacity:0}60%{transform:translateY(3px);opacity:1}100%{transform:none}}
@keyframes pulse{0%{transform:scale(1);opacity:.35}100%{transform:scale(3.2);opacity:0}}
@keyframes dash{to{stroke-dashoffset:-110}}
@keyframes coreGlow{50%{box-shadow:0 0 0 16px var(--panel),0 0 0 17px var(--line-2),var(--shadow-lg)}}
@keyframes drive{0%{inset-inline-start:0}45%,55%{inset-inline-start:calc(100% - 26px)}100%{inset-inline-start:0}}
@keyframes ring60{from{stroke-dashoffset:0}to{stroke-dashoffset:103.7}}
@keyframes swing{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes shine{0%,55%{translate:-130% 0}85%,100%{translate:130% 0}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes notifIn{from{opacity:0;transform:translateY(-12px) scale(.98)}}
@keyframes stripeSlide{from{background-position:0 0}to{background-position:-200% 0}}

.motion .intro.play .ic{animation:colUp .95s var(--ease-io) forwards;animation-delay:calc(1.25s + var(--i) * .1s)}
.motion .intro.play .ic b,.motion .intro.play .ic span{animation:wordIn .8s var(--ease-out) both;animation-delay:calc(.05s + var(--i) * .07s)}
.motion .intro.play .intro-logo{animation:logoIn 1.1s var(--ease-out) both;animation-delay:1.55s}
.motion .intro.play .intro-tag span{animation:up .7s var(--ease-out) both;animation-delay:calc(2.15s + var(--i) * .07s)}
.motion .intro.play .intro-domain{animation:up .7s var(--ease-out) both;animation-delay:2.7s}
.motion .intro.play .intro-by{animation:up .7s var(--ease-out) both;animation-delay:2.9s}
.motion .intro.play .intro-bar i{animation:bar 4.3s linear forwards}
.motion .intro.play{animation:introOut .9s var(--ease-io) forwards;animation-delay:4.35s}
.motion .intro.play.skip{animation:introOutFast .5s var(--ease-io) forwards;animation-delay:0s}

.motion .hero .in{animation:heroIn 1s var(--ease-out) both;animation-delay:calc(var(--d,0) * 110ms + .05s)}
.motion.intro-on .hero .in{animation-play-state:paused}
.motion .rv.rv-go{animation:rise .9s var(--ease-out) both;animation-delay:calc(var(--d,0) * 85ms)}

.motion .phone{animation:floaty 7s ease-in-out infinite}
.motion .fchip{animation:bob 5.5s ease-in-out infinite}
.motion .f2{animation-delay:-1.4s}.motion .f3{animation-delay:-2.8s}.motion .f4{animation-delay:-4.1s}
.motion .fp-pins .pin{animation:pinDrop .8s var(--ease-out) both;animation-delay:calc(.9s + var(--i) * .25s)}
.motion .fp-pins .pulse{animation:pulse 2.4s ease-out infinite;animation-delay:calc(var(--i) * .6s)}
.motion.intro-on .fp-pins .pin{animation-play-state:paused}
.motion .orbit-lines ellipse{animation:dash 9s linear infinite}
.motion .orbit-core{animation:coreGlow 4s ease-in-out infinite}
.motion .sl-truck{animation:drive 6s ease-in-out infinite}
.motion .qr-ring circle{animation:ring60 60s linear infinite}
.motion .price-tag{animation:swing 5s ease-in-out infinite}
.motion .price-tag::after{animation:shine 5s ease-in-out infinite}
.motion .mq-track{animation:mq 32s linear infinite}
.motion .marquee:hover .mq-track{animation-play-state:paused}
.motion .pillars.rv-go .pl{animation:grow 1.1s var(--ease-out) both;animation-delay:calc(.15s + var(--i) * 120ms)}
.motion .timeline.rv-go .tl-fill{animation:grow 1.6s var(--ease-out) both;animation-delay:.2s}
.motion .notif.swap{animation:notifIn .6s var(--ease-out)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}