/* Reconstructed from the supplied video: light opening, Bizu green cards, dark-green narrative. */
:root {
  --brand:#24B060;
  --surface:#FFFFFF;
  --support:#F8FAF9;
  --brand-dark:#163C2B;
  --ink:#1F2937;
  --green:var(--brand);
  --accent:#1C8A4B;
  --muted:#647067;
  --light:var(--support);
  --line:#E1E9E4;
  --brand-soft:#8BD5AA;
  --night:var(--brand-dark);
}
body { background:#fff; }
.announcement { display:none; }
header { position:fixed; inset:18px 4% auto; width:92%; height:70px; padding:0 25px; gap:24px; background:rgba(255,255,255,.95); border:1px solid #F8FAF9; border-radius:15px; box-shadow:0 8px 32px #0D2E1B0b; backdrop-filter:blur(18px); transition:top .35s,border-radius .35s,box-shadow .35s; }
header.scrolled { top:12px; border-radius:42px; box-shadow:0 8px 35px #04120A21; }
header .wordmark { color:#163C2B; font-size:24px; }
header .wordmark span { color:#163C2B; }
nav { gap:28px; font-weight:500; font-size:13px; }
nav .login { margin-left:36px; font-size:12px; }
nav .button { gap:0; padding:11px 21px; min-height:40px; font-size:12px; }
nav .button > span { display:none; }
.button { background:#24B060; border-color:#24B060; color:#fff; border-radius:99px; padding:14px 24px; min-height:50px; gap:16px; box-shadow:0 7px 24px #24B0601c; }
.button:hover { background:#163C2B; border-color:#163C2B; }
.button > span { background:transparent; width:auto; height:auto; flex:0 0 auto; font-size:17px; }
.button.secondary { background:transparent; border-color:#CFE3D8; color:#4D8565; box-shadow:none; }
.button.secondary:hover { background:#F8FAF9; border-color:#71BF93; }
.button.secondary > span { background:transparent; }
.dropdownpanel { top:calc(100% + 10px); left:0; right:0; border-radius:18px; }
.menu-links svg, .menu-links > a > svg, .card svg, .benefits svg, .checklist li::before { color:#24B060; }
.menu-links > a:hover, .menu-intro { background:#F8FAF9; }
.menu-intro > a { color:#24B060; }
.reference-inner main { padding-top:106px; }
.reference-inner .cta { background:#163C2B; }
.reference-inner .cta .eyebrow { color:#A6E3C0; }
.reference-inner .cta .button { color:#228C50; }
.reference-inner .plan.recommended { background:#F8FAF9; border-color:#24B060; }
.reference-inner .recommended .planflag { background:#163C2B; border-color:#163C2B; }
.reference-inner .concept, .reference-inner .editorial, .reference-inner .notice { background:#F8FAF9; }
.reference-inner .concept-head, .reference-inner .flow-art b { color:#163C2B; }
.reference-inner .flow-art svg, .reference-inner .ai-core svg { color:#24B060; }
.reference-inner .flow-art > div, .reference-inner .concept { border-color:#DFEFE6; }
.reference-inner .ai-core { background:#E0F9EB; border-color:#C0ECD3; }
.reference-inner .checklist li { color:#627269; }
.reference-inner .eyebrow { color:#60AD81; }
.reference-inner .price { color:#1F2937; }
.reference-inner thead { background:#F8FAF9; }
.reference-inner td:nth-child(3) { background:#F8FAF9; }

/* Shared layout for the reference landing. */
.reference-home { --ref-width:1160px; }
.reference-home h1, .reference-home h2, .reference-home h3 { font-weight:700; }
.reference-home h1, .reference-home h2 { letter-spacing:-1.8px; }
.reference-home h2 { font-size:46px; line-height:1.13; }
.reference-home p { font-size:16px; line-height:1.65; }
.ref-wrap { padding-inline:max(6%, calc((100% - var(--ref-width))/2)); }
.ref-heading { text-align:center; max-width:760px; margin:0 auto 60px; }
.ref-heading h2 { margin-bottom:14px; }
.ref-heading p { margin:0; }
.ref-heading h2 > span { color:var(--brand); }
.ref-kicker { display:block; color:#85BE9E; font-size:10px; font-weight:600; letter-spacing:2px; margin-bottom:17px; }
.ref-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:7%; min-height:760px; padding-top:150px; padding-bottom:95px; overflow:clip; background:#fff; }
.ref-hero::before { content:''; position:absolute; width:640px; height:640px; right:-180px; top:25px; z-index:-1; background:radial-gradient(ellipse,#91E9B722,transparent 65%); }
.ref-hero h1 { font-size:clamp(55px,5.7vw,82px); line-height:1.04; font-weight:800; letter-spacing:-3px; margin-bottom:26px; }
.ref-hero h1 em { color:#1C8A4B; }
.ref-hero-copy > p { max-width:490px; font-size:17px; color:#818B85; line-height:1.7; }
.ref-hero-action { display:flex; align-items:center; gap:22px; margin-top:34px; }
.ref-hero-action > span { color:#9AA69F; font-size:12px; max-width:170px; }
.ref-hero-action .button { white-space:nowrap; }
.ref-facts { display:flex; gap:55px; margin-top:45px; }
.ref-facts strong { display:block; font-size:27px; line-height:1.2; letter-spacing:-1px; font-weight:700; }
.ref-facts strong span { font-size:16px; letter-spacing:-.3px; }
.ref-facts small { display:block; margin-top:7px; font-size:11px; color:#93A199; }
.hero-objects { position:relative; height:475px; perspective:1000px; transform-style:preserve-3d; --pointer-x:0deg; --pointer-y:0deg; }
.hero-object-front, .hero-object-back { position:absolute; width:270px; height:422px; top:12px; left:50%; transform-style:preserve-3d; will-change:transform; }
.hero-object-front { z-index:2; transform:translateX(-58%) rotateY(calc(-14deg + var(--pointer-x))) rotateX(calc(8deg + var(--pointer-y))) rotateZ(-3deg); animation:hero-card-in 1.1s cubic-bezier(.2,.8,.2,1) both; }
.hero-object-back { transform:translateX(-29%) rotateY(calc(-18deg + var(--pointer-x))) rotateX(calc(5deg + var(--pointer-y))) rotateZ(11deg); top:24px; width:253px; height:405px; }
.hero-object-spark { position:absolute; color:#5BDD93; font-size:25px; }
.spark-one { right:4%; top:28px; transform:rotate(-20deg); }
.spark-two { left:5%; bottom:35px; font-size:38px; color:#C9F4DB; }
@keyframes hero-card-in { from { opacity:0; translate:0 45px; } to { opacity:1; translate:0 0; } }
.product-token { position:relative; width:100%; height:100%; padding:22px; overflow:hidden; text-align:left; color:white; border:1px solid #ffffff2e; border-radius:18px; background:linear-gradient(128deg,#24B060,#1A8749 48%,#163C2B); box-shadow:inset 1px 1px 1px #ffffff45,inset -1px -2px 2px #12583038,0 16px 30px #082A171f; }
.product-token::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 15%,#ffffff13 40%,transparent 60%); }
.token-premium { background:linear-gradient(130deg,#24533C,#163C2B 55%,#102B20); }
.token-mint { background:linear-gradient(130deg,#F8FAF9,#DAF0E2 55%,#A5DBB9); }
.token-forest { background:linear-gradient(130deg,#278651,#1D6841 50%,#163C2B); }
.token-top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; }
.token-mark { color:#fff; font-size:28px; letter-spacing:-1.4px; font-weight:800; line-height:1; }
.token-mark > span { color:#ffffffa3; }
.token-top > svg { width:24px; height:24px; opacity:.6; }
.token-bottom { position:absolute; z-index:1; bottom:20px; left:22px; right:22px; }
.token-bottom small { display:block; font-size:7px; letter-spacing:1.5px; color:#ffffffb5; margin-bottom:7px; }
.token-bottom strong { display:block; font-size:17px; line-height:1.2; font-weight:600; letter-spacing:-.4px; }
.token-bottom > span { display:flex; align-items:center; justify-content:space-between; margin-top:14px; font-size:7px; letter-spacing:2px; opacity:.8; }
.token-bottom i { font-size:18px; font-style:normal; }
.token-engraving { position:absolute; right:-28px; top:28%; width:180px; height:180px; opacity:.11; }
.token-engraving i { position:absolute; inset:0; border:1px solid #fff; border-radius:50%; }
.token-engraving i:nth-child(2) { inset:25px; }
.token-engraving i:nth-child(3) { inset:50px; }
.token-portrait { padding:28px; border-radius:22px; }
.token-portrait .token-mark { font-size:36px; }
.token-portrait .token-top > svg { width:29px; height:29px; }
.token-portrait .token-bottom { left:28px; right:28px; bottom:30px; }
.token-portrait .token-bottom strong { font-size:28px; margin-top:10px; }
.token-portrait .token-bottom small { font-size:8px; line-height:1.6; }
.token-portrait .token-bottom > span { margin-top:30px; }
.token-portrait .token-engraving { top:25%; right:-70px; width:300px; height:300px; opacity:.13; }

/* Three restrained product choices, with a single dark premium tile. */
.ref-choice { padding-top:46px; padding-bottom:96px; background:#fff; }
.ref-choice .ref-heading h2 { font-size:38px; }
.ref-choice .ref-heading p { font-size:14px; color:#849089; }
.choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.choice-card { display:block; padding:30px 28px; border:1px solid #F8FAF9; border-radius:17px; background:#FFFFFF; transition:transform .25s,border-color .25s; }
.choice-card:hover { transform:translateY(-5px); border-color:#B3EFCD; }
.choice-object { width:100px; height:63px; margin:0 0 28px 6px; transform:rotate(-6deg); }
.choice-object .product-token { border-radius:7px; padding:8px; box-shadow:0 9px 15px #27BE681b; }
.choice-object .token-mark { font-size:15px; }
.choice-object .token-top > svg { width:12px; height:12px; }
.choice-object .token-bottom { left:8px; right:8px; bottom:8px; }
.choice-object .token-bottom strong { font-size:8px; }
.choice-object .token-bottom small, .choice-object .token-bottom > span, .choice-object .token-engraving { display:none; }
.choice-card h3 { margin-bottom:10px; font-size:21px; font-weight:700; letter-spacing:-.5px; }
.choice-card p { font-size:13px; color:#86938C; line-height:1.6; margin-bottom:20px; }
.choice-link { display:flex; align-items:center; gap:10px; color:#5A9B76; font-size:12px; }
.choice-premium { background:linear-gradient(125deg,#163C2B,#1B5138); color:white; border-color:#153D26; }
.choice-premium p { color:#B5D1C1; }
.choice-premium .choice-link { color:#C1F2D6; }
.choice-premium .choice-object .product-token { box-shadow:0 6px 20px #0004; }

/* Phone display on a white background. */
.ref-phone { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:11%; padding-top:55px; padding-bottom:115px; background:#fff; }
.phone-visual { position:relative; display:flex; align-items:center; flex-direction:column; padding:15px 0; isolation:isolate; }
.phone-visual::before { content:''; position:absolute; z-index:-1; inset:-15%; background:radial-gradient(ellipse,#7CE4A91c,transparent 66%); }
.phone-device { width:280px; height:544px; padding:8px; border:3px solid #424D47; border-radius:44px; position:relative; background:#18211C; box-shadow:2px 3px 0 #BFC7C2,-2px 0 0 #B8C2BC,0 28px 50px #154C2D21; transform:rotate(-2deg); }
.phone-device::after { content:''; position:absolute; right:-6px; top:140px; width:3px; height:56px; border-radius:3px; background:#6B7A71; }
.phone-island { position:absolute; z-index:2; top:14px; left:50%; transform:translateX(-50%); width:90px; height:23px; border-radius:18px; background:#18211C; }
.phone-screen { border-radius:33px; background:#fff; height:100%; overflow:hidden; padding:12px 17px; color:#1F2937; }
.phone-status { display:flex; justify-content:space-between; padding:0 3px; font-size:9px; font-weight:700; }
.phone-brand { display:flex; align-items:center; margin-top:28px; color:#24B060; font-size:25px; font-weight:800; letter-spacing:-1px; }
.phone-brand > span { color:#7AE4A8; }
.phone-brand > i { display:grid; place-items:center; margin-left:auto; width:29px; height:29px; border-radius:50%; background:#F8FAF9; }
.phone-brand svg { width:17px; height:17px; }
.phone-screen .phone-greeting { font-size:9px; margin:7px 0 19px; color:#90A398; }
.phone-title { font-size:13px; font-weight:600; }
.phone-shortcuts { display:flex; justify-content:space-between; margin:18px 0 23px; gap:8px; }
.phone-shortcuts > span { display:flex; flex-direction:column; align-items:center; gap:7px; font-size:7px; color:#778E81; }
.phone-shortcuts svg { width:31px; height:31px; padding:8px; border-radius:50%; background:#F8FAF9; color:#46D583; }
.phone-chart > div:first-child { display:flex; align-items:center; justify-content:space-between; font-size:10px; }
.phone-chart small { color:#9DC3AD; font-size:8px; }
.phone-bars { display:flex; align-items:flex-end; gap:5px; height:95px; margin-top:15px; border-bottom:1px solid #E7F2EC; padding-bottom:4px; }
.phone-bars i { flex:1; height:var(--bar); background:linear-gradient(0deg,#30C570,#8DE8B4); border-radius:4px 4px 0 0; }
.phone-chart-legend { display:flex; justify-content:space-between; margin:10px 0 13px; font-size:7px; color:#869F91; }
.phone-row { display:flex; align-items:center; gap:8px; padding:12px 0; border-top:1px solid #F8FAF9; font-size:10px; }
.phone-row > span { flex:1; font-weight:500; }
.phone-row small { display:block; margin-top:4px; font-size:7px; color:#99ABA1; font-weight:400; }
.phone-dot { width:6px; height:6px; border-radius:50%; background:#24B060; }
.phone-dot.pale { background:#A8C9B6; }
.phone-tabbar { display:flex; justify-content:space-around; padding:12px 0 2px; border-top:1px solid #F8FAF9; }
.phone-tabbar span { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:7px; color:#9BB7A7; }
.phone-tabbar svg { width:16px; height:16px; }
.visual-caption { font-size:9px; color:#A0B1A7; margin-top:24px; }
.phone-copy h2 { font-size:43px; }
.phone-copy > p { color:#85958C; }
.phone-benefits { margin-top:31px; }
.phone-benefit { display:flex; align-items:flex-start; gap:17px; margin-bottom:28px; }
.phone-benefit > span { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:#F8FAF9; color:#6BCF96; }
.phone-benefit svg { width:17px; height:17px; }
.phone-benefit h3 { font-size:16px; margin-bottom:7px; letter-spacing:-.2px; font-weight:700; }
.phone-benefit p { font-size:13px; color:#909F96; line-height:1.65; margin-bottom:0; }
.phone-copy .button { margin-top:2px; min-height:44px; font-size:12px; }

/* The video shifts into one continuous dark-green canvas. */
.ref-dark { color:#fff; background:radial-gradient(ellipse 65% 20% at 85% 31%,#1567384a,transparent),radial-gradient(ellipse 65% 22% at 4% 59%,#15693944,transparent),#163C2B; overflow:clip; }
.ref-dark p { color:#A0C0AE; }
.ref-dark em { color:#68E09C; }
.ref-dark .ref-kicker { color:#6BBB8D; }
.ref-carousel { padding-top:86px; padding-bottom:85px; text-align:center; }
.ref-carousel .ref-heading { margin-bottom:4px; }
.ref-carousel h2 { font-size:42px; }
.ref-carousel .ref-heading p { font-size:14px; color:#A6C9B5; }
.fan-stage { --fan-step:87px; --fan-card-width:264px; --fan-card-height:168px; position:relative; height:365px; max-width:1000px; margin:0 auto; perspective:1400px; touch-action:pan-y; user-select:none; }
.fan-card { position:absolute; left:50%; top:60px; z-index:var(--card-order); width:var(--fan-card-width); height:var(--fan-card-height); padding:0; border:0; border-radius:18px; background:none; color:white; transform:translate3d(calc(-50% + var(--offset) * var(--fan-step)),calc(var(--depth) * 35px),0) rotate(var(--angle)); transform-origin:50% 80%; transition:transform .75s cubic-bezier(.22,.75,.22,1),filter .5s; filter:brightness(.92); }
.fan-card.is-active { filter:brightness(1.06); }
.fan-card .product-token { pointer-events:none; border-radius:13px; padding:20px; box-shadow:inset 1px 1px 1px #ffffff38,0 15px 26px #0002; }
.fan-card .token-mark { font-size:26px; }
.fan-card .token-bottom { left:20px; right:20px; bottom:16px; }
.fan-card .token-bottom strong { font-size:15px; }
.fan-card .token-bottom small { font-size:6px; }
.fan-card .token-bottom > span { margin-top:10px; }
.fan-card .token-engraving { width:120px; height:120px; }
.fan-card:focus-visible { outline:3px solid #BBF1D2; outline-offset:6px; }
.fan-controls { display:flex; justify-content:center; align-items:center; gap:22px; margin:0 auto; }
.fan-arrow { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border:1px solid #68DC9A75; border-radius:50%; background:transparent; color:#A7EDC5; font-size:29px; line-height:1; transition:background .2s; }
.fan-arrow.next { background:#24B060; border-color:#24B060; color:#fff; }
.fan-arrow:hover { background:#44CE7F; color:#fff; }
.fan-description { width:330px; }
.fan-description strong { display:block; font-size:17px; margin-bottom:7px; }
.fan-description > span { display:block; color:#AFD0BD; font-size:12px; line-height:1.5; min-height:18px; }
.fan-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:10px; color:#A5EDC4; font-size:11px; }
.fan-link:hover { color:#fff; }
.fan-dots { display:flex; justify-content:center; gap:7px; margin-top:9px; }
.fan-dots i { width:4px; height:4px; border-radius:50%; background:#42795A; }
.fan-dots i.active { background:#8BE7B3; }
.ref-wallet { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8%; padding-top:75px; padding-bottom:140px; }
.wallet-copy h2 { font-size:51px; }
.wallet-copy p { max-width:435px; font-size:16px; }
.wallet-copy .button { margin-top:17px; background:#24B060; border-color:#24B060; box-shadow:0 10px 25px #24B06037; }
.wallet-visual { position:relative; width:100%; max-width:500px; height:330px; perspective:1000px; }
.wallet-card { position:absolute; width:280px; height:180px; }
.wallet-card.back { left:10px; top:15px; transform:rotate(-14deg); }
.wallet-card.front { right:8px; top:-4px; transform:rotate(8deg); }
.wallet-case { position:absolute; left:30px; right:20px; bottom:20px; height:205px; border:1px solid #3DB37080; border-radius:18px 18px 32px 32px; background:linear-gradient(170deg,#28744C,#163C2B 38%,#102F21 80%); box-shadow:inset 0 5px 4px #64DB9748,inset 0 -4px 8px #051B0F,0 30px 50px #020A0560; transform:rotate(-3deg); }
.wallet-seam { position:absolute; inset:13px 12px; border:1px solid #66CE9327; border-radius:10px 10px 24px 24px; }
.wallet-case::after { content:''; position:absolute; width:8px; height:14px; left:50%; top:13px; border-radius:4px; background:linear-gradient(90deg,#518969,#C6F1D8,#437F5D); box-shadow:0 2px 7px #092D19; }
.wallet-logo { position:absolute; bottom:25px; right:25px; font-size:29px; letter-spacing:-1.8px; font-weight:800; color:#C9F0DA; }

/* Alternating illuminated timeline. */
.ref-journey { padding-top:25px; padding-bottom:120px; }
.ref-journey .ref-heading { margin-bottom:62px; }
.journey-steps { list-style:none; position:relative; max-width:880px; padding:0; margin:0 auto; }
.journey-steps::before { content:''; position:absolute; left:50%; top:20px; bottom:35px; width:2px; background:linear-gradient(transparent,#35D57A 15%,#87E6B0 60%,#267B4B 90%,transparent); box-shadow:0 0 12px #5BDE9344; }
.journey-step { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-bottom:40px; }
.journey-step:last-child { margin-bottom:0; }
.journey-box { grid-column:2; background:linear-gradient(125deg,#1B4934,#205B3D); border:1px solid #51B77D3d; border-radius:20px; padding:28px; box-shadow:inset 0 1px 0 #91E4B514; }
.journey-step:nth-child(even) .journey-box { grid-column:1; grid-row:1; }
.journey-number { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:46px; height:46px; border:1px solid #89E7B142; border-radius:50%; background:linear-gradient(150deg,#62DF98,#30BE6D); box-shadow:0 0 24px #55DC8F50; font-size:17px; font-weight:700; z-index:1; }
.journey-box > small { display:block; font-size:9px; letter-spacing:2px; color:#91DAB0; margin-bottom:8px; }
.journey-box h3 { font-size:23px; margin-bottom:11px; letter-spacing:-.8px; }
.journey-box p { font-size:13px; line-height:1.65; color:#A9D1BA; margin:0; }
.ref-benefits { padding-top:10px; padding-bottom:95px; }
.ref-benefits .ref-heading { margin-bottom:42px; }
.ref-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.ref-benefit-card { position:relative; padding:24px; background:#1B4934; border:1px solid #427F5C40; border-radius:16px; transition:background .25s,border-color .25s; }
.ref-benefit-card:hover { background:#235C40; border-color:#61BC8888; }
.ref-benefit-card > span { display:grid; place-items:center; width:35px; height:35px; border:1px solid #65CE922a; border-radius:10px; background:#32BB6D29; color:#84E6AE; margin-bottom:22px; }
.ref-benefit-card svg { width:18px; height:18px; }
.ref-benefit-card h3 { font-size:17px; letter-spacing:-.4px; margin-bottom:9px; }
.ref-benefit-card p { font-size:12px; line-height:1.65; color:#A4CAB4; margin:0; }
.ref-benefit-card > i { position:absolute; top:25px; right:23px; font-style:normal; font-size:17px; color:#70C896; }
.ref-close { padding-top:10px; padding-bottom:85px; }
.ref-close-box { padding:58px 36px; text-align:center; border:1px solid #63DF9870; border-radius:20px; background:radial-gradient(ellipse at 20% 0,#56DC905c,transparent 55%),linear-gradient(120deg,#1B7846,#163C2B); box-shadow:0 14px 50px #030C0726; }
.ref-close-box h2 { font-size:38px; margin-bottom:16px; }
.ref-close-box p { color:#B8F0D0; font-size:14px; }
.ref-close-actions { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:27px; }
.ref-close-actions .button { background:#fff; color:#29BC68; border-color:#fff; box-shadow:0 3px 20px #fff2; font-size:13px; }
.ref-close-actions .button.secondary { background:#ffffff05; border-color:#9DE8BD5c; color:#C5F2D8; box-shadow:none; }
.ref-close-actions .button:hover { background:#D9F7E6; color:#239353; }
.ref-marquee { padding:35px 0 40px; background:linear-gradient(110deg,#24B060,#1C8A4B); overflow:hidden; }
.marquee-line { overflow:hidden; width:100%; }
.marquee-line > div { display:flex; align-items:center; width:max-content; gap:34px; animation:marquee 35s linear infinite; }
.marquee-line span { white-space:nowrap; font-size:clamp(40px,4.3vw,64px); line-height:1.45; font-weight:800; letter-spacing:-1.8px; }
.marquee-line b { font-size:39px; font-weight:800; letter-spacing:-2px; color:#C9F4DB; }
.marquee-line.outline > div { animation-direction:reverse; animation-duration:43s; }
.marquee-line.outline span { -webkit-text-stroke:1px #B4F0CEb0; color:transparent; font-weight:700; }
.ref-marquee:hover .marquee-line > div { animation-play-state:paused; }
@keyframes marquee { to { transform:translateX(-50%); } }
.ref-trust { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; padding-top:46px; padding-bottom:28px; }
.ref-trust > span { display:flex; align-items:center; gap:7px; min-height:30px; padding:6px 12px; border:1px solid #518A6A38; border-radius:25px; color:#A3C6B2; font-size:10px; }
.ref-trust svg { width:13px; height:13px; }
.reference-home footer { padding-top:45px; background:#163C2B; border:0; color:#fff; }
.reference-home .footergrid p, .reference-home .footergrid a:not(.wordmark) { color:#93BBA4; }
.reference-home .footergrid a:hover { color:#C5F3D9; }
.reference-home .footergrid b { color:#E2F5EA; font-size:11px; letter-spacing:.7px; text-transform:uppercase; }
.reference-home .footergrid .wordmark b { font-size:29px; text-transform:none; letter-spacing:-1.5px; }
.reference-home .footerbottom { border-color:#55876B32; color:#779C87; font-size:11px; }
.reveal { opacity:1; }
.motion-ready .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }
.motion-ready .reveal.is-visible { opacity:1; transform:translateY(0); }

/* Responsive reconstruction: the video only shows desktop. */
@media (min-width:1600px) { header { left:calc((100% - 1440px)/2); width:1440px; } }
@media (max-width:1200px) {
  nav { gap:20px; }
  nav .login { margin-left:14px; }
  .ref-hero { gap:4%; }
  .ref-hero h1 { font-size:65px; }
  .hero-object-front { width:245px; height:390px; }
  .hero-object-back { width:235px; height:380px; }
  .hero-objects { height:430px; }
  .ref-hero-action { gap:15px; }
  .ref-hero-action > span { max-width:145px; font-size:11px; }
  .fan-stage { --fan-step:75px; --fan-card-width:248px; --fan-card-height:158px; }
  .ref-wallet { gap:6%; }
  .wallet-card { width:245px; height:157px; }
  .wallet-case { left:15px; right:10px; }
  .ref-phone { gap:7%; }
}
@media (max-width:1100px) {
  header { height:66px; padding-inline:22px; }
  .menutoggle { width:40px; height:40px; flex-basis:40px; border-color:#DCECE3; color:#163C2B; border-radius:50%; background:transparent; }
  nav { top:calc(100% + 10px); left:0; right:0; border:1px solid #DFEFE6; border-radius:20px; padding:16px 22px 24px; max-height:calc(100dvh - 110px); }
  nav .login { margin-left:0; }
  nav.open { gap:0; }
  nav .button { min-height:48px; font-size:14px; }
  .dropdownpanel { border-radius:12px; background:#F8FAF9; }
  .ref-hero { min-height:700px; padding-top:140px; }
  .ref-hero h1 { font-size:59px; }
  .ref-hero-action { flex-wrap:wrap; }
  .ref-hero-action > span { max-width:none; width:100%; }
  .ref-facts { gap:30px; margin-top:32px; }
  .hero-object-front { width:230px; height:364px; }
  .hero-object-back { width:220px; height:350px; }
  .hero-objects { height:395px; }
  .ref-wallet { padding-bottom:100px; }
  .wallet-copy h2 { font-size:43px; }
  .wallet-card { width:220px; height:144px; }
  .wallet-visual { height:285px; }
  .wallet-case { height:180px; }
  .fan-stage { --fan-step:64px; --fan-card-width:230px; --fan-card-height:148px; }
}
@media (max-width:820px) {
  .ref-hero { grid-template-columns:1fr; padding-top:135px; padding-bottom:65px; gap:45px; }
  .ref-hero-copy { max-width:600px; }
  .ref-hero h1 { font-size:68px; }
  .ref-hero-action { flex-wrap:nowrap; }
  .ref-hero-action > span { width:auto; max-width:160px; }
  .hero-objects { width:100%; max-width:470px; margin:auto; height:410px; }
  .hero-object-front { width:245px; height:382px; }
  .hero-object-back { width:230px; height:367px; }
  .choice-grid { gap:14px; }
  .choice-card { padding:25px 20px; }
  .choice-card h3 { font-size:20px; }
  .ref-phone { gap:6%; }
  .phone-copy h2 { font-size:34px; }
  .phone-device { width:250px; height:510px; }
  .phone-screen { padding-inline:14px; }
  .phone-brand { margin-top:24px; }
  .phone-shortcuts { margin-bottom:15px; }
  .phone-bars { height:80px; }
  .phone-row { padding:10px 0; }
  .phone-benefit { gap:12px; margin-bottom:23px; }
  .phone-benefit p { font-size:12px; }
  .fan-stage { --fan-step:52px; --fan-card-width:210px; --fan-card-height:138px; height:330px; }
  .fan-card .product-token { padding:15px; }
  .fan-card .token-bottom { left:15px; right:15px; bottom:13px; }
  .fan-card .token-bottom strong { font-size:13px; }
  .ref-wallet { grid-template-columns:1fr; gap:60px; padding-top:30px; }
  .wallet-copy { max-width:530px; }
  .wallet-visual { max-width:450px; height:310px; margin:auto; }
  .wallet-card { width:270px; height:173px; }
  .wallet-case { height:195px; left:30px; right:20px; }
  .journey-step { gap:64px; }
  .journey-box { padding:23px; }
  .journey-box h3 { font-size:21px; }
  .ref-benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ref-close-box h2 { font-size:33px; }
}
@media (max-width:640px) {
  header, header.scrolled { inset:10px 14px auto; width:calc(100% - 28px); height:62px; padding:0 14px 0 19px; border-radius:36px; gap:12px; }
  header .wordmark { font-size:22px; }
  .menutoggle { width:44px; height:44px; flex-basis:44px; border:0; }
  nav { padding:13px 18px 22px; max-height:calc(100dvh - 100px); }
  .reference-inner main { padding-top:88px; }
  .reference-inner .pagehero { padding-top:30px; }
  .ref-wrap { padding-inline:22px; }
  .reference-home h2 { font-size:34px; letter-spacing:-1.2px; }
  .ref-heading { margin-bottom:35px; }
  .ref-kicker { font-size:9px; letter-spacing:1.6px; margin-bottom:14px; }
  .ref-hero { padding-top:122px; padding-bottom:50px; gap:36px; }
  .ref-hero h1 { font-size:clamp(44px,11.7vw,66px); letter-spacing:-2px; line-height:1.06; margin-bottom:22px; }
  .ref-hero-copy > p { font-size:15px; line-height:1.7; max-width:440px; }
  .ref-hero-action { margin-top:25px; flex-direction:column; align-items:flex-start; gap:13px; }
  .ref-hero-action > span { max-width:none; font-size:11px; }
  .ref-hero-action .button { width:100%; justify-content:space-between; min-height:50px; font-size:14px; }
  .ref-facts { justify-content:flex-start; gap:38px; margin-top:28px; }
  .ref-facts strong { font-size:25px; }
  .ref-facts strong span { font-size:14px; }
  .ref-facts small { font-size:9px; max-width:145px; line-height:1.5; }
  .hero-objects { max-width:370px; height:340px; margin-top:10px; }
  .hero-object-front { width:202px; height:315px; transform:translateX(-60%) rotateY(calc(-12deg + var(--pointer-x))) rotateZ(-4deg); }
  .hero-object-back { width:193px; height:300px; transform:translateX(-31%) rotateY(-14deg) rotateZ(11deg); }
  .token-portrait { padding:22px; border-radius:18px; }
  .token-portrait .token-mark { font-size:31px; }
  .token-portrait .token-bottom { left:22px; right:22px; bottom:24px; }
  .token-portrait .token-bottom strong { font-size:23px; }
  .token-portrait .token-bottom small { font-size:6px; }
  .token-portrait .token-engraving { width:240px; height:240px; }
  .spark-one { right:1%; top:14px; }
  .spark-two { left:2%; bottom:17px; font-size:29px; }
  .ref-choice { padding-top:35px; padding-bottom:65px; }
  .ref-choice .ref-heading h2 { font-size:31px; }
  .ref-choice .ref-heading p { font-size:13px; }
  .choice-grid { grid-template-columns:1fr; gap:16px; }
  .choice-card { display:grid; grid-template-columns:85px 1fr; column-gap:20px; padding:25px 23px; align-items:start; }
  .choice-object { width:80px; height:51px; grid-row:1 / 4; margin:5px 0 0; }
  .choice-card h3 { font-size:21px; margin-bottom:8px; }
  .choice-card p { font-size:13px; margin-bottom:16px; }
  .choice-link { grid-column:2; font-size:12px; min-height:28px; }
  .ref-phone { grid-template-columns:1fr; gap:45px; padding-top:5px; padding-bottom:75px; }
  .phone-visual { order:2; padding:0; }
  .phone-copy { order:1; }
  .phone-copy h2 { font-size:35px; }
  .phone-copy > p { font-size:15px; }
  .phone-benefits { margin-top:30px; }
  .phone-benefit { gap:15px; margin-bottom:25px; }
  .phone-benefit h3 { font-size:16px; }
  .phone-benefit p { font-size:13px; }
  .phone-copy .button { min-height:46px; }
  .phone-device { width:270px; height:532px; }
  .phone-bars { height:92px; }
  .phone-shortcuts { margin-bottom:22px; }
  .phone-row { padding:11px 0; }
  .ref-carousel { padding-top:64px; padding-bottom:65px; }
  .ref-carousel h2 { font-size:31px; }
  .ref-carousel .ref-heading p { font-size:12px; line-height:1.65; }
  .fan-stage { --fan-step:27px; --fan-card-width:159px; --fan-card-height:104px; height:245px; max-width:380px; margin-top:14px; }
  .fan-card { top:38px; border-radius:10px; transform:translate3d(calc(-50% + var(--offset) * var(--fan-step)),calc(var(--depth) * 23px),0) rotate(var(--angle)); }
  .fan-card .product-token { padding:12px; border-radius:9px; }
  .fan-card .token-mark { font-size:18px; }
  .fan-card .token-top > svg { width:15px; height:15px; }
  .fan-card .token-bottom { left:12px; right:12px; bottom:10px; }
  .fan-card .token-bottom strong { font-size:10px; letter-spacing:-.1px; }
  .fan-card .token-bottom small { font-size:4px; letter-spacing:.8px; margin-bottom:5px; }
  .fan-card .token-bottom > span { font-size:4px; letter-spacing:1px; margin-top:6px; }
  .fan-card .token-bottom i { font-size:11px; }
  .fan-card .token-engraving { width:90px; height:90px; right:-25px; }
  .fan-controls { gap:12px; }
  .fan-arrow { flex-basis:44px; width:44px; height:44px; font-size:28px; }
  .fan-description { flex:1; width:auto; min-width:0; max-width:255px; }
  .fan-description strong { font-size:15px; }
  .fan-description > span { font-size:11px; min-height:33px; }
  .fan-link { margin-top:13px; font-size:12px; }
  .fan-dots { margin-top:4px; }
  .ref-wallet { padding-top:25px; padding-bottom:75px; gap:50px; }
  .wallet-copy h2 { font-size:38px; }
  .wallet-copy p { font-size:15px; }
  .wallet-copy .button { min-height:48px; font-size:13px; }
  .wallet-visual { height:255px; max-width:355px; }
  .wallet-card { width:205px; height:132px; }
  .wallet-card.back { left:5px; }
  .wallet-card.front { right:0; }
  .wallet-card .product-token { padding:16px; border-radius:13px; }
  .wallet-card .token-mark { font-size:24px; }
  .wallet-card .token-bottom { left:16px; right:16px; bottom:13px; }
  .wallet-card .token-bottom strong { font-size:14px; }
  .wallet-case { height:165px; left:15px; right:5px; bottom:10px; border-radius:14px 14px 26px 26px; }
  .wallet-logo { font-size:25px; bottom:20px; right:22px; }
  .ref-journey { padding-top:15px; padding-bottom:75px; }
  .ref-journey .ref-heading { margin-bottom:40px; }
  .ref-journey .ref-heading p { font-size:14px; }
  .journey-steps::before { left:20px; top:25px; bottom:50px; }
  .journey-step { display:block; padding-left:57px; margin-bottom:26px; }
  .journey-number { left:20px; top:40px; width:38px; height:38px; font-size:14px; }
  .journey-box { padding:23px 20px; border-radius:16px; }
  .journey-box h3 { font-size:21px; letter-spacing:-.5px; }
  .journey-box p { font-size:13px; }
  .ref-benefits { padding-top:0; padding-bottom:65px; }
  .ref-benefits .ref-heading { margin-bottom:30px; }
  .ref-benefit-grid { grid-template-columns:1fr; gap:14px; }
  .ref-benefit-card { padding:24px; }
  .ref-benefit-card > span { margin-bottom:19px; }
  .ref-benefit-card h3 { font-size:18px; }
  .ref-benefit-card p { font-size:13px; }
  .ref-close { padding-top:0; padding-bottom:55px; }
  .ref-close-box { padding:35px 24px; border-radius:17px; }
  .ref-close-box h2 { font-size:31px; }
  .ref-close-box p { font-size:13px; }
  .ref-close-actions { flex-direction:column; align-items:stretch; gap:11px; margin-top:25px; }
  .ref-close-actions .button { justify-content:space-between; min-height:48px; padding-inline:20px; }
  .ref-marquee { padding-block:24px; }
  .marquee-line > div { gap:22px; }
  .marquee-line span { font-size:35px; letter-spacing:-1px; }
  .marquee-line b { font-size:28px; }
  .ref-trust { gap:9px; padding-top:30px; padding-bottom:15px; }
  .ref-trust > span { font-size:9px; padding:7px 10px; }
  .reference-home footer { padding-top:32px; }
  .reference-home .footergrid b { font-size:11px; }
  .reference-home .footergrid a:not(.wordmark) { font-size:12px; }
}
@media (max-width:360px) {
  .ref-wrap { padding-inline:18px; }
  .ref-hero h1 { font-size:41px; }
  .ref-facts { gap:26px; }
  .hero-objects { height:310px; }
  .hero-object-front { width:186px; height:292px; }
  .hero-object-back { width:175px; height:278px; }
  .fan-stage { --fan-step:20px; --fan-card-width:142px; --fan-card-height:94px; height:230px; }
  .fan-card .token-bottom strong { font-size:9px; }
  .fan-card .token-bottom > span { display:none; }
  .choice-card { padding:23px 18px; grid-template-columns:67px 1fr; gap:15px; }
  .choice-object { width:66px; height:43px; }
  .choice-object .token-mark { font-size:11px; }
  .choice-object .token-top > svg { width:9px; height:9px; }
  .choice-object .token-bottom strong { font-size:6px; }
  .journey-step { padding-left:50px; }
  .journey-box { padding:21px 17px; }
  .journey-box h3 { font-size:19px; }
  .wallet-card { width:185px; height:121px; }
  .wallet-case { height:155px; }
  .wallet-visual { height:240px; }
}
@media (prefers-reduced-motion:reduce) {
  .motion-ready .reveal { opacity:1; transform:none; }
  .hero-object-front { animation:none; }
  .marquee-line > div { animation:none; }
  .fan-card, header { transition:none; }
}
/* Keep the illustrative app content inside the physical screen at every breakpoint. */
.phone-screen { display:flex; flex-direction:column; }
.phone-screen .phone-brand { margin-top:20px; }
.phone-screen .phone-greeting { margin:5px 0 10px; font-size:8px; }
.phone-screen .phone-shortcuts { margin:14px 0 16px; }
.phone-screen .phone-shortcuts svg { width:28px; height:28px; }
.phone-screen .phone-bars { height:78px; margin-top:12px; }
.phone-screen .phone-chart-legend { margin:8px 0 9px; }
.phone-screen .phone-row { padding:9px 0; }
.phone-screen .phone-tabbar { margin-top:auto; padding:8px 0 2px; }
.fan-play { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; margin-top:2px; padding:8px 12px; border:0; background:none; color:#7DB294; font-size:10px; }
.fan-play:hover { color:#C8F4DB; }
@keyframes hero-float { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
@media (prefers-reduced-motion:no-preference) { .hero-objects { animation:hero-float 7s ease-in-out infinite; } }
@media (prefers-reduced-motion:reduce) { .fan-play { display:none; } }

/* Official Bizu palette: explicit colors for text and interactive states. */
body { color:var(--ink); background:var(--surface); }
header { background:rgba(255,255,255,.96); }
header .wordmark { color:var(--brand-dark); }
header .wordmark span { color:var(--brand); }
.button { background:var(--brand); border-color:var(--brand); color:var(--ink); }
.button:hover { background:var(--brand-dark); border-color:var(--brand-dark); color:var(--surface); }
.button.secondary { color:var(--brand-dark); border-color:#C9DCD0; background:var(--surface); }
.button.secondary:hover { color:var(--brand-dark); background:var(--support); border-color:var(--brand); }
.ref-hero, .ref-choice, .ref-phone, .choice-card, .phone-screen { background:var(--surface); }
.ref-hero-copy > p, .ref-hero-action > span, .ref-facts small,
.ref-choice .ref-heading p, .choice-card p, .phone-copy > p,
.phone-benefit p, .visual-caption { color:#647067; }
.ref-kicker { color:#34714E; }
.ref-facts strong, .phone-screen { color:var(--ink); }
.choice-premium { background:linear-gradient(125deg,var(--brand-dark),#1C5139); color:var(--surface); }
.choice-premium p { color:#C7DDCF; }
.choice-premium .choice-link { color:#91DBAF; }
.token-mint { color:var(--brand-dark); }
.token-mint .token-mark, .token-mint .token-mark > span,
.token-mint .token-bottom small { color:var(--brand-dark); }
.token-mint .token-engraving i { border-color:var(--brand-dark); }
.token-brand .token-mark { color:#102B20; }
.token-brand .token-mark > span { color:#163C2B; }
.ref-dark { background:radial-gradient(ellipse 65% 20% at 85% 31%,#24B06012,transparent),radial-gradient(ellipse 65% 22% at 4% 59%,#24B0600D,transparent),var(--brand-dark); }
.ref-dark em { color:var(--brand); }
.ref-dark .ref-kicker { color:#9ACDAE; }
.ref-dark p, .ref-carousel .ref-heading p, .fan-description > span { color:#CADFD2; }
.wallet-copy .button, .fan-arrow.next { background:var(--brand); border-color:var(--brand); color:var(--ink); }
.wallet-copy .button:hover, .fan-arrow.next:hover { background:#91DBAF; border-color:#91DBAF; color:var(--brand-dark); }
.fan-dots i.active, .phone-dot { background:var(--brand); }
.journey-number { background:var(--brand); color:var(--brand-dark); }
.ref-benefit-card h3, .journey-box h3 { color:var(--surface); }
.ref-benefit-card > span, .phone-benefit > span { color:var(--brand); }
.ref-close-box p { color:#E4F3EA; }
.ref-close-actions .button { background:var(--surface); border-color:var(--surface); color:var(--brand-dark); }
.ref-close-actions .button.secondary { background:transparent; border-color:#9ACDAE80; color:var(--surface); }
.ref-close-actions .button:hover { background:#DCEFE3; color:var(--brand-dark); }
.ref-marquee { background:linear-gradient(110deg,var(--brand),#1C8A4B); color:var(--brand-dark); }
.marquee-line b { color:var(--brand-dark); }
.marquee-line.outline span { -webkit-text-stroke:1px var(--brand-dark); }
.reference-home footer { background:var(--brand-dark); }
.reference-home .footergrid p, .reference-home .footergrid a:not(.wordmark),
.reference-home .footerbottom, .ref-trust > span, .fan-play { color:#BCD5C6; }
.reference-home .footergrid b, .reference-home .footergrid .wordmark { color:var(--surface); }
.reference-inner .plan.recommended, .reference-inner .notice, .reference-inner .concept { background:var(--support); }
.reference-inner .card, .reference-inner form { background:var(--surface); }
.reference-inner .plan.recommended { border-color:var(--brand); }
.reference-inner .cta { background:var(--brand-dark); }
.reference-inner .cta .button { background:var(--surface); border-color:var(--surface); color:var(--brand-dark); }
.reference-inner .cta .button:hover { background:#DCEFE3; color:var(--brand-dark); }

.phone-brand > img { display:block; width:97px; height:auto; }
.wallet-logo > img { display:block; width:120px; height:auto; }