:root { --red:#e32d2d; --red-deep:#b8222a; --ink:#24232a; --muted:#646168; --cream:#fff8f2; --line:#eee5e0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font:16px/1.65 ui-rounded,"Avenir Next","Segoe UI",system-ui,sans-serif; }
a { color:inherit; }
a:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:absolute; top:-10rem; left:16px; padding:8px 14px; z-index:9; color:#fff; background:var(--ink); }
.skip-link:focus { top:12px; }
.wrap { width:min(1180px,calc(100% - 52px)); margin-inline:auto; }
.site-header { position:relative; z-index:2; border-bottom:1px solid #f2e5dc; background:var(--cream); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; min-height:94px; }
.wordmark { display:inline-block; flex:0 0 auto; width:150px; height:58px; background:url('zizlee-wordmark.png') left center / contain no-repeat; text-decoration:none; }
.main-nav { display:flex; align-items:center; gap:clamp(15px,2vw,30px); }
.main-nav a { color:#35343a; font-size:.93rem; font-weight:750; text-decoration:none; white-space:nowrap; }
.main-nav a:hover,.main-nav a[aria-current="page"] { color:var(--red-deep); }
.main-nav .nav-cta { padding:10px 18px; border-radius:13px; background:var(--red); color:#fff; box-shadow:0 5px 12px #e32d2d20; }
.main-nav .nav-cta:hover,.main-nav .nav-cta[aria-current="page"] { background:var(--red-deep); color:#fff; }
.eyebrow { margin:0 0 15px; color:var(--red-deep); font-size:.74rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.11; letter-spacing:-.045em; }
h1 { max-width:850px; margin:0 0 25px; font-size:clamp(3rem,6.1vw,5.9rem); font-weight:860; }
h2 { margin:0 0 20px; font-size:clamp(2rem,3.3vw,3.15rem); font-weight:830; }
h3 { margin:0 0 14px; font-size:1.28rem; }
p { margin:0 0 18px; }
.lead { max-width:650px; color:#55545b; font-size:clamp(1.08rem,1.55vw,1.3rem); line-height:1.6; }
.small { font-size:.88rem; color:var(--muted); }
.highlight { color:var(--red); }
.hero { position:relative; isolation:isolate; overflow:hidden; padding:clamp(76px,9vw,112px) 0 clamp(78px,9vw,120px); background:radial-gradient(circle at 86% 18%,#ffe4dc 0,transparent 35%),var(--cream); }
.hero::before { content:""; position:absolute; z-index:-1; right:-410px; bottom:-490px; width:760px; height:760px; border:2px solid #f9c9c1; border-radius:50%; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr); align-items:center; gap:clamp(38px,5vw,70px); }
.hero h1 { font-size:clamp(3rem,5vw,5rem); }
.hero .lead { max-width:590px; }
.hero-visual { position:relative; width:min(100%,530px); justify-self:center; }
.hero-visual::before { content:""; position:absolute; width:102%; height:90%; inset:-3% -2%; border-radius:34px; background:#ffdcd5; transform:rotate(3deg); }
.carousel-stage { position:relative; overflow:hidden; border-radius:28px; background:#e8d6cb; box-shadow:0 25px 55px #8c392825; }
.carousel-slide { position:relative; margin:0; }
.carousel-slide[hidden] { display:none; }
.carousel-slide img,.carousel-slide video { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.carousel-slide figcaption { position:absolute; inset:auto 0 0; padding:42px 28px 26px; background:linear-gradient(transparent,#191614b8); color:#fff; }
.carousel-slide figcaption span { display:block; font-size:.71rem; font-weight:800; letter-spacing:.15em; }
.carousel-slide figcaption strong { display:block; max-width:370px; font-size:clamp(1rem,1.65vw,1.35rem); line-height:1.22; letter-spacing:-.02em; }
.carousel-slide video + figcaption { position:static; padding:15px 22px; background:#fff; color:var(--ink); }
.carousel-controls { position:relative; display:flex; align-items:center; justify-content:center; gap:22px; padding-top:19px; }
.carousel-arrow { display:grid; place-items:center; width:46px; height:46px; border:1px solid #dfc9bd; border-radius:50%; background:#fff; color:var(--red-deep); font:600 1.25rem/1 system-ui,sans-serif; cursor:pointer; }
.carousel-arrow:hover { border-color:var(--red); background:#fff0ea; }
.carousel-dots { display:flex; align-items:center; gap:10px; }
.carousel-dots button { width:11px; height:11px; padding:0; border:0; border-radius:50%; background:#d9b7aa; cursor:pointer; }
.carousel-dots button.is-active { width:31px; border-radius:8px; background:var(--red); }
.carousel-arrow:focus-visible,.carousel-dots button:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.journey-visual { overflow:hidden; margin:0; border:1px solid var(--line); border-radius:25px; background:var(--cream); }
.journey-visual img { display:block; width:100%; height:auto; aspect-ratio:1.95/1; object-fit:cover; object-position:center 48%; }
.journey-visual figcaption { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:22px 30px; font-weight:780; }
.journey-visual b { color:var(--red); font-size:.83rem; margin-right:9px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:30px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:54px; padding:11px 24px; border-radius:15px; font-size:.97rem; font-weight:800; line-height:1.3; text-decoration:none; transition:transform .16s ease,background .16s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--red); color:#fff; box-shadow:0 10px 18px #e32d2d24; }
.button-primary:hover { background:var(--red-deep); }
.button-secondary { border:1px solid #e8dcd5; background:#fff; color:var(--ink); }
.button-secondary:hover { background:#fff4ef; }
.section { padding:clamp(76px,8vw,112px) 0; }
.section-cream { background:var(--cream); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:52px; margin-bottom:38px; }
.section-head h2 { max-width:540px; margin-bottom:0; }
.section-head > p { max-width:420px; margin-bottom:6px; color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.card { min-height:250px; padding:34px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 12px 32px #372a1608; }
.card:nth-child(2) { background:#fff7f4; }
.card p { margin:0; color:var(--muted); }
.card-number { display:inline-flex; align-items:center; min-height:36px; padding:6px 12px; margin-bottom:32px; border-radius:8px; background:#ffedeb; color:var(--red-deep); font-size:.76rem; font-weight:850; letter-spacing:.05em; }
.split { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:clamp(36px,7vw,100px); }
.split p { color:var(--muted); }
.text-link { color:var(--red-deep); font-weight:800; text-decoration-thickness:1px; text-underline-offset:5px; }
.text-link:hover { color:var(--ink); }
.callout { padding:40px; border:1px solid #f0dfda; border-radius:27px; background:#fff; box-shadow:0 15px 40px #4d26210b; }
.callout p { color:var(--muted); }
.info-list { list-style:none; padding:0; margin:0; }
.info-list li { padding:22px 0; border-bottom:1px solid var(--line); }
.info-list li:first-child { border-top:1px solid var(--line); }
.info-list strong { display:block; margin-bottom:6px; }
.info-list span { color:var(--muted); }
.brand-band { overflow:hidden; background:var(--red); color:#fff; }
.brand-band .wrap { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:65px; }
.brand-band .wrap::after { content:""; position:absolute; right:4%; top:-196px; width:310px; height:310px; border:1px solid #ffffff4d; border-radius:50%; pointer-events:none; }
.brand-band h2 { max-width:670px; margin:0; }
.brand-band .button { position:relative; background:#fff; color:var(--red-deep); }
.page-hero { position:relative; overflow:hidden; padding:clamp(70px,8vw,104px) 0; border-bottom:1px solid var(--line); background:radial-gradient(circle at 91% -30%,#ffdcd5 0,transparent 42%),var(--cream); }
.page-hero::after { content:""; position:absolute; right:-155px; bottom:-240px; width:480px; height:480px; border:2px solid #f4c9c0; border-radius:50%; pointer-events:none; }
.page-hero .wrap { position:relative; z-index:1; }
.page-hero h1 { max-width:800px; font-size:clamp(2.9rem,5.2vw,4.9rem); }
.page-hero .lead { margin-bottom:0; }
.page-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.95fr); align-items:center; gap:clamp(36px,6vw,80px); }
.page-hero-grid h1 { font-size:clamp(2.75rem,4.45vw,4.55rem); }
.page-hero-image { overflow:hidden; margin:0; border:1px solid #eddad0; border-radius:25px; background:#f3e6db; box-shadow:0 24px 55px #9e4b2518; }
.page-hero-image img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.prose { max-width:800px; }
.prose h2 { margin-top:48px; font-size:1.65rem; }
.prose h2:first-child { margin-top:0; }
.prose p,.prose li { color:#4e5056; }
.prose ul { padding-left:24px; }
.prose li { margin:10px 0; }
.policy-layout { display:grid; grid-template-columns:230px minmax(0,800px); align-items:start; gap:clamp(40px,5vw,84px); }
.policy-nav { position:sticky; top:26px; padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--cream); }
.policy-nav strong { display:block; margin-bottom:12px; color:var(--red-deep); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }
.policy-nav a { display:block; padding:6px 0; color:#44424a; font-size:.88rem; line-height:1.4; text-decoration:none; }
.policy-nav a:hover { color:var(--red-deep); text-decoration:underline; }
.policy-article { max-width:800px; }
.policy-article h2 { scroll-margin-top:22px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.policy-article h3 { margin:26px 0 10px; font-size:1.16rem; letter-spacing:-.02em; }
.policy-article ol { padding-left:24px; }
.policy-note { padding:18px 22px; border-left:4px solid var(--red); border-radius:0 12px 12px 0; background:var(--cream); }
.policy-article a { color:var(--red-deep); text-underline-offset:3px; }
.contact-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.contact-cards .card { min-height:260px; }
.contact-cards a { overflow-wrap:anywhere; }
.footer { padding:70px 0 26px; background:#25242a; color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:35px; padding-bottom:55px; }
.footer p { max-width:360px; margin-top:17px; color:#d5d2d2; }
.footer h2 { margin-bottom:16px; font-size:.95rem; letter-spacing:0; }
.footer a:not(.wordmark) { display:block; margin:8px 0; color:#e5e2e2; font-size:.93rem; text-decoration:none; overflow-wrap:anywhere; }
.footer a:hover { text-decoration:underline; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; padding-top:26px; border-top:1px solid #5b575b; color:#d5d2d2; font-size:.83rem; }
.footer-bottom p { margin:0; max-width:none; }
.footer-bottom .legal-owner { display:block; color:#fff; }
.footer-bottom a { display:inline !important; }
.footer .wordmark { filter:brightness(0) invert(1); }
@media (max-width:900px) {
  .header-inner { flex-direction:row; align-items:center; gap:18px; min-height:76px; padding:12px 0; }
  .main-nav { display:none; }
  .header-inner .wordmark { width:124px; height:46px; }
  .hero-grid,.page-hero-grid { grid-template-columns:1fr; }
  .hero-visual { margin:30px auto 0; }
  .page-hero-image { width:min(100%,700px); }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:1.5fr 1fr; }
  .policy-layout { grid-template-columns:1fr; gap:30px; }
  .policy-nav { position:static; }
  .policy-nav a { display:inline-block; margin-right:18px; }
}
@media (max-width:620px) {
  .wrap { width:min(100% - 36px,1180px); }
  .hero { padding:65px 0 80px; }
  .carousel-stage,.page-hero-image { border-radius:20px; }
  .carousel-slide figcaption { padding:30px 17px 17px; }
  .journey-visual img { aspect-ratio:1.28/1; }
  .journey-visual figcaption { grid-template-columns:1fr; gap:8px; padding:18px; }
  .section { padding:65px 0; }
  .page-hero { padding:66px 0; }
  .section-head { display:block; }
  .cards,.split,.contact-cards,.footer-grid { grid-template-columns:1fr; }
  .card,.callout { padding:27px; }
  .brand-band .wrap { flex-direction:column; align-items:flex-start; padding-block:54px; }
  .footer-grid { gap:26px; }
  .footer-bottom { display:block; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }

/* Zizlee update: WEB-CUSTOMER-20261029-R4 | Destination: public/styles.css */
.mobile-menu { display:none; }
.mobile-menu summary { list-style:none; cursor:pointer; }
.mobile-menu summary::-webkit-details-marker { display:none; }
.mobile-menu summary::marker { content:""; }
.mobile-menu summary:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.play-badge { display:block; flex:0 1 230px; width:230px; max-width:100%; line-height:0; text-decoration:none; }
.play-badge img { display:block; width:100%; height:auto; }
.footer-download { display:grid; grid-template-columns:minmax(0,1fr) 128px; align-items:center; gap:12px; width:min(100%,400px); margin-top:26px; padding:16px; border:1px solid #eadde0; border-radius:20px; background:#fff; color:var(--ink); }
.footer-download-copy { min-width:0; }
.footer .footer-download-title { margin:0 0 4px; color:var(--ink); font-size:1.35rem; font-weight:750; line-height:1.25; letter-spacing:-.035em; }
.footer-download-title strong { color:var(--red); }
.footer .footer-download .play-badge { width:168px; margin:0; }
.footer .footer-download-qr { display:block; width:128px; height:128px; margin:0; background:#fff; line-height:0; }
.footer-download-qr img { display:block; width:128px; height:128px; image-rendering:pixelated; }
.footer-download-platform { display:block; margin:0 0 0 10px; color:var(--muted); font-size:.68rem; line-height:1.4; }
.footer .store-attribution { font-size:.73rem; line-height:1.5; }
@media (max-width:900px) {
  .mobile-menu { display:block; }
  .mobile-menu summary { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
  .mobile-menu[open] summary { border-color:#efc4c0; background:#ffedeb; color:var(--red-deep); }
  .mobile-nav { position:absolute; inset:calc(100% - 4px) 18px auto; display:grid; gap:4px; padding:12px; max-height:calc(100vh - 96px); overflow-y:auto; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 16px 32px #24232a1a; }
  .mobile-nav a { display:block; padding:11px 14px; border-radius:9px; color:var(--ink); font-size:.95rem; font-weight:750; text-decoration:none; }
  .mobile-nav a:hover,.mobile-nav a[aria-current="page"] { background:#fff1ec; color:var(--red-deep); }
  .mobile-nav .nav-cta { background:var(--red); color:#fff; }
  .mobile-nav .nav-cta:hover,.mobile-nav .nav-cta[aria-current="page"] { background:var(--red-deep); color:#fff; }
}
@media (max-width:620px) {
  .hero { padding:44px 0 60px; }
  .hero h1 { font-size:clamp(2.35rem,9.5vw,3rem); }
  .hero .lead { font-size:1.05rem; }
  .hero .actions { gap:10px 16px; margin-top:20px; }
  .hero .actions .play-badge { flex:0 1 220px; width:220px; }
}
@media (max-width:380px) {
  .footer-download { grid-template-columns:minmax(0,1fr) 112px; }
  .footer .footer-download-qr,.footer-download-qr img { width:112px; height:112px; }
}
