:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: iOS grouped-list language. Large titles, sliding segmented controls, translucent bars, App Store–style shelves, product showcase stage, spring motion. */
:root{
  --bg:#f2f2f7;
  --surface:#ffffff;
  --stage:#ffffff;
  --fill:rgba(120,120,128,.12);
  --fill-strong:rgba(120,120,128,.2);
  --label:#000000;
  --label2:rgba(60,60,67,.62);
  --label3:rgba(60,60,67,.32);
  --sep:rgba(60,60,67,.18);
  --accent:#007aff;
  --accent2:#5ac8fa;
  --accent-tint:rgba(0,122,255,.1);
  --glow:rgba(0,122,255,.22);
  --glow2:rgba(90,200,250,.28);
  --on-accent:#ffffff;
  --bar:rgba(249,249,251,.8);
  --scrim:rgba(0,0,0,.72);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.08);
  --shadow-lg:0 2px 4px rgba(0,0,0,.05),0 24px 60px rgba(0,0,0,.16);
  --thumb:#ffffff;
  --thumb-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);
  --danger:#ff3b30;
  --ok:#34c759;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --r-card:22px;
  --r-ctl:12px;
  --spring:cubic-bezier(.2,.9,.25,1.12);
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000;--surface:#1c1c1e;--stage:#ffffff;--fill:rgba(118,118,128,.24);--fill-strong:rgba(118,118,128,.36);
    --label:#ffffff;--label2:rgba(235,235,245,.62);--label3:rgba(235,235,245,.3);--sep:rgba(84,84,88,.55);
    --accent:#0a84ff;--accent2:#64d2ff;--accent-tint:rgba(10,132,255,.18);--glow:rgba(10,132,255,.32);--glow2:rgba(100,210,255,.22);
    --on-accent:#ffffff;--bar:rgba(22,22,24,.8);--scrim:rgba(0,0,0,.82);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.5);--shadow-lg:0 2px 4px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.7);
    --thumb:#636366;--thumb-shadow:0 1px 3px rgba(0,0,0,.5);--danger:#ff453a;--ok:#30d158;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000;--surface:#1c1c1e;--stage:#ffffff;--fill:rgba(118,118,128,.24);--fill-strong:rgba(118,118,128,.36);
  --label:#ffffff;--label2:rgba(235,235,245,.62);--label3:rgba(235,235,245,.3);--sep:rgba(84,84,88,.55);
  --accent:#0a84ff;--accent2:#64d2ff;--accent-tint:rgba(10,132,255,.18);--glow:rgba(10,132,255,.32);--glow2:rgba(100,210,255,.22);
  --on-accent:#ffffff;--bar:rgba(22,22,24,.8);--scrim:rgba(0,0,0,.82);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.5);--shadow-lg:0 2px 4px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.7);
  --thumb:#636366;--thumb-shadow:0 1px 3px rgba(0,0,0,.5);--danger:#ff453a;--ok:#30d158;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(64px + env(safe-area-inset-top,0px))}
body{background:var(--bg);color:var(--label);font-family:var(--font);font-size:17px;line-height:1.47;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bar)}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.025em}
p{margin:0}
button{-webkit-tap-highlight-color:transparent}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.view{animation:viewin .5s var(--ease)}
@keyframes viewin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Nav bar ---------- */
.navbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bar);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid transparent;transition:border-color .3s ease}
.navbar.scrolled{border-bottom-color:var(--sep)}
.navbar .wrap{display:flex;align-items:center;gap:24px;height:56px}
.brand{display:flex;flex-direction:column;line-height:1.1;color:var(--label);min-width:0}
.brand b{font-size:17px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.brand span{font-size:12px;color:var(--label2);white-space:nowrap}
.navlinks{display:flex;gap:4px;margin-left:auto}
.navlinks a{color:var(--label);font-size:14px;opacity:.75;padding:6px 10px;border-radius:980px;transition:opacity .2s,background-color .2s,color .2s}
.navlinks a:hover{opacity:1;background:var(--fill)}
.navlinks a.on{opacity:1;color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:980px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--spring),box-shadow .3s ease,background-color .2s ease,opacity .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.95);transition-duration:.1s}
.btn svg{width:18px;height:18px;flex:none}
.btn-fill{background:var(--accent);color:var(--on-accent);padding:12px 22px;font-size:17px;box-shadow:0 6px 18px -6px var(--glow)}
.btn-fill:hover{box-shadow:0 10px 26px -8px var(--accent)}
.btn-tint{background:var(--accent-tint);color:var(--accent);padding:12px 22px;font-size:17px}
.btn-sm{padding:7px 14px;font-size:14px}
.btn .shine{position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%)}
.btn-fill:hover .shine{animation:shine .9s var(--ease)}
@keyframes shine{to{transform:translateX(120%)}}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.25;transform:scale(0);animation:ripple .6s var(--ease) forwards;z-index:-1}
@keyframes ripple{to{transform:scale(1);opacity:0}}
@media (max-width:860px){.navlinks{display:none}.navbar .btn-sm{margin-left:auto}}

/* ---------- Hero ---------- */
.hero{background:var(--surface);border-bottom:.5px solid var(--sep);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-block:64px 56px;position:relative}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.hero h1{font-size:clamp(44px,7vw,76px);font-weight:700;line-height:1.02;letter-spacing:-.035em;margin-top:10px}
.hero h1 .grad{background:linear-gradient(100deg,var(--label) 20%,var(--accent) 55%,var(--accent2) 80%,var(--label) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 6s ease-in-out 1.2s infinite}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.hero h1 small{display:block;font-size:.4em;font-weight:600;color:var(--label2);letter-spacing:-.02em;margin-top:10px;line-height:1.2}
.lead{font-size:clamp(19px,2.1vw,21px);color:var(--label2);margin-top:20px;max-width:34ch;line-height:1.4}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;font-size:15px;color:var(--label2)}
.hero-meta span{display:inline-flex;align-items:center;gap:6px}
.hero-meta svg{width:16px;height:16px;color:var(--accent)}
.rise{animation:rise .9s var(--ease) both}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.orb.a{width:46vmax;height:46vmax;right:-14vmax;top:-18vmax;background:var(--glow);animation:drift 14s ease-in-out infinite alternate}
.orb.b{width:34vmax;height:34vmax;right:12vmax;bottom:-20vmax;background:var(--glow2);animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vmax,4vmax) scale(1.12)}}

/* ---------- Hero carousel ---------- */
.carousel{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:18px;outline:none}
.car-stage{position:relative;width:100%;max-width:100%;aspect-ratio:1/1.02;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.car-card{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:2/3;max-width:100%;padding:0;border:0;background:var(--fill);border-radius:20px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-lg);transform:translate(-50%,-50%) var(--t);transition:transform .85s var(--spring),filter .6s ease;will-change:transform}
.car-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.car-card[data-pos="0"]{--t:translateX(0) rotate(0deg) scale(1);z-index:3}
.car-card[data-pos="1"]{--t:translateX(40%) rotate(8deg) scale(.84);z-index:1;filter:brightness(.8) saturate(.9)}
.car-card[data-pos="2"]{--t:translateX(-40%) rotate(-8deg) scale(.84);z-index:2;filter:brightness(.8) saturate(.9)}
.car-card[data-pos="0"]:hover{--t:translateX(0) rotate(0deg) scale(1.03)}
.car-card[data-pos="1"]:hover{--t:translateX(44%) rotate(9deg) scale(.86);filter:brightness(.92)}
.car-card[data-pos="2"]:hover{--t:translateX(-44%) rotate(-9deg) scale(.86);filter:brightness(.92)}
.car-zoom{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.7);transition:opacity .3s,transform .4s var(--spring)}
.car-zoom svg{width:16px;height:16px}
.car-card[data-pos="0"] .car-zoom{opacity:1;transform:none}
.car-ctrl{display:flex;align-items:center;gap:14px;position:relative;z-index:4}
.round-btn{width:44px;height:44px;border-radius:50%;border:0;background:var(--surface);color:var(--label);box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;transition:transform .35s var(--spring),background-color .2s,color .2s;flex:none}
.round-btn:hover{transform:scale(1.08);background:var(--accent);color:var(--on-accent)}
.round-btn:active{transform:scale(.9);transition-duration:.1s}
.round-btn svg{width:18px;height:18px}
.round-btn[disabled]{opacity:.35;pointer-events:none}
.round-btn.nudge svg{animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,70%,100%{transform:none}80%{transform:translateX(3px)}90%{transform:translateX(-1px)}}
.dots{display:flex;gap:8px;align-items:center;background:var(--fill);padding:8px 10px;border-radius:980px}
.dot{width:8px;height:8px;border-radius:980px;border:0;padding:0;background:var(--label3);cursor:pointer;position:relative;overflow:hidden;transition:width .45s var(--spring),background-color .3s}
.dot.on{width:34px;background:var(--fill-strong)}
.dot.on i{position:absolute;inset:0;background:var(--accent);border-radius:inherit;transform-origin:left;transform:scaleX(0);animation:fillbar var(--dur,4s) linear forwards}
.carousel.paused .dot.on i{animation-play-state:paused}
.carousel.static .dot.on i{animation:none;transform:none}
@keyframes fillbar{to{transform:scaleX(1)}}
.car-caption{font-size:15px;font-weight:600;color:var(--label);text-align:center;min-height:1.5em}
.car-caption span{display:inline-block;animation:capin .5s var(--ease)}
@keyframes capin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:28px;padding-block:40px 40px}
  .carousel{max-width:440px;width:100%;margin:0 auto}
  .car-card[data-pos="1"]{--t:translateX(32%) rotate(7deg) scale(.82)}
  .car-card[data-pos="2"]{--t:translateX(-32%) rotate(-7deg) scale(.82)}
}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:40px}
.stat{padding:20px}
.stat b{display:block;font-size:clamp(30px,4vw,40px);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05;color:var(--accent)}
.stat > span{font-size:14px;color:var(--label2)}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Sections ---------- */
section.block{padding-block:72px 8px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.sec-head h2{font-size:clamp(30px,4vw,40px);font-weight:700;line-height:1.1}
.sec-head p{color:var(--label2);font-size:17px;margin-top:8px;max-width:56ch}
.card{background:var(--surface);border-radius:var(--r-card)}
.rv{transition:opacity .8s var(--ease),transform .9s var(--ease)}
.rv.pre{opacity:.35;transform:translateY(36px) scale(.985)}

/* Packages */
.packages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;perspective:1400px}
.pkg{display:flex;flex-direction:column;overflow:hidden;position:relative;transition:transform .5s var(--ease),box-shadow .4s ease}
.pkg.tilting{transition:transform .08s linear,box-shadow .4s ease;box-shadow:var(--shadow-lg)}
.pkg .glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(600px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.22),transparent 40%);opacity:0;transition:opacity .3s;z-index:2}
.pkg.tilting .glare{opacity:1}
.pkg-img{background:var(--fill);aspect-ratio:2/3;max-width:100%;overflow:hidden;border:0;padding:0;cursor:zoom-in;display:block;width:100%}
.pkg-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease),opacity .35s ease}
.pkg:hover .pkg-img img{transform:scale(1.04)}
.pkg-img img.swap{opacity:0;transform:scale(1.06)}
.pkg-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px;flex:1}
.pkg-body h3{font-size:22px;font-weight:700}
.pkg-body p{color:var(--label2);font-size:15px;line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:13px;padding:4px 10px;border-radius:980px;background:var(--fill);color:var(--label);transition:transform .3s var(--spring),background-color .2s}
.chip:hover{transform:translateY(-2px);background:var(--accent-tint);color:var(--accent)}
.pkg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;flex-wrap:wrap}
.pkg-foot .btn{flex:1 1 auto}
@media (max-width:700px){.packages{grid-template-columns:1fr}}

/* Shop teaser */
.teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center;padding:32px;overflow:hidden;position:relative}
.teaser h3{font-size:clamp(26px,3.4vw,34px);font-weight:700;line-height:1.1;margin-top:8px}
.teaser p{color:var(--label2);margin-top:10px;max-width:40ch}
.teaser .btn{margin-top:22px}
.teaser-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding-block:10px}
.teaser-row button{border:0;padding:0;background:var(--stage);border-radius:16px;aspect-ratio:1/1;max-width:100%;overflow:hidden;cursor:pointer;box-shadow:var(--shadow);transition:transform .5s var(--spring)}
.teaser-row button:nth-child(odd){transform:translateY(10px)}
.teaser-row button:hover{transform:translateY(-6px) scale(1.04)}
.teaser-row img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:760px){.teaser{grid-template-columns:1fr;padding:24px 20px}.teaser-row{gap:6px}}

/* Segmented control */
.seg{display:inline-flex;position:relative;background:var(--fill);border-radius:10px;padding:2px;gap:2px;max-width:100%}
.seg button{position:relative;z-index:1;border:0;background:transparent;color:var(--label);font:inherit;font-size:14px;font-weight:500;padding:7px 14px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:transform .2s}
.seg button:active{transform:scale(.95)}
.seg button[aria-pressed="true"]{font-weight:600}
.seg-thumb{position:absolute;top:2px;bottom:2px;left:0;width:0;border-radius:8px;background:var(--thumb);box-shadow:var(--thumb-shadow);transition:transform .45s var(--spring),width .45s var(--spring);z-index:0}
.seg-sm button{font-size:13px;padding:5px 12px}

/* Join */
.join{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px}
.join-main{padding:32px}
.join-main h3{font-size:24px;font-weight:700}
.join-main > p{color:var(--label2);margin-top:10px;max-width:52ch}
.steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:20px;position:relative}
.steps::before{content:"";position:absolute;left:15px;top:16px;bottom:16px;width:2px;background:var(--fill-strong);border-radius:2px}
.steps::after{content:"";position:absolute;left:15px;top:16px;width:2px;height:calc(100% - 32px);background:var(--accent);border-radius:2px;transform-origin:top;transform:scaleY(var(--prog,1));transition:transform 1.4s var(--ease)}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;position:relative;z-index:1}
.num{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;box-shadow:0 0 0 4px var(--surface);transition:transform .5s var(--spring)}
.steps li:hover .num{transform:scale(1.15)}
.steps b{display:block;font-weight:600}
.steps span{color:var(--label2);font-size:15px}
.join-main .btn{margin-top:28px}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;position:relative;transition:background-color .2s}
.list li:hover{background:var(--fill)}
.list li + li::before{content:"";position:absolute;top:0;left:62px;right:0;border-top:.5px solid var(--sep)}
.ico{flex:none;width:28px;height:28px;border-radius:7px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;transition:transform .5s var(--spring)}
.list li:hover .ico{transform:rotate(-10deg) scale(1.12)}
.ico svg{width:17px;height:17px}
.list b{display:block;font-weight:600;font-size:16px}
.list span{display:block;color:var(--label2);font-size:14px;margin-top:2px}
.side-title{font-size:13px;color:var(--label2);text-transform:uppercase;letter-spacing:.04em;padding:0 20px 8px}
.join-side{display:flex;flex-direction:column;gap:8px}
.join-side .card{overflow:hidden}
.fine{font-size:13px;color:var(--label2);padding:4px 20px 0}
@media (max-width:860px){.join{grid-template-columns:1fr}.join-main{padding:24px 20px}}

/* About */
.about{display:grid;grid-template-columns:auto 1fr;gap:28px;padding:32px;align-items:start}
.avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);display:grid;place-items:center;font-size:36px;font-weight:700;letter-spacing:-.02em;position:relative}
.avatar::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:halo 3s ease-out infinite}
@keyframes halo{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.25);opacity:0}}
.about h3{font-size:24px;font-weight:700}
.about .role{color:var(--label2);font-size:15px;margin-top:2px}
.about p.txt{margin-top:14px;max-width:62ch}
.about p.txt + p.txt{margin-top:10px}
@media (max-width:600px){.about{grid-template-columns:1fr;padding:24px 20px;gap:16px}.avatar{width:72px;height:72px;font-size:28px}}

/* FAQ */
.faq{overflow:hidden}
.faq details{position:relative}
.faq details + details::before{content:"";position:absolute;top:0;left:20px;right:0;border-top:.5px solid var(--sep)}
.faq summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;justify-content:space-between;gap:16px;align-items:center;font-weight:500;transition:background-color .2s}
.faq summary:hover{background:var(--fill)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:14px;height:14px;color:var(--label3);flex:none;transition:transform .4s var(--spring)}
.faq details[open] summary svg{transform:rotate(90deg);color:var(--accent)}
.faq .ans{overflow:hidden}
.faq .ans div{padding:0 20px 18px;color:var(--label2);font-size:16px;max-width:68ch}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.form-card{padding:8px 0 0;overflow:hidden}
.field{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;padding:0 20px;min-height:52px;position:relative;transition:background-color .2s}
.field:focus-within{background:var(--accent-tint)}
.field + .field::before{content:"";position:absolute;top:0;left:20px;right:0;border-top:.5px solid var(--sep)}
.field label{font-size:16px;color:var(--label);transition:color .2s}
.field:focus-within label{color:var(--accent)}
.field input,.field select{font:inherit;font-size:16px;color:var(--label);background:transparent;border:0;width:100%;padding:14px 0;min-width:0;outline:none;-webkit-appearance:none;appearance:none}
.field select{cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--label3) 50%),linear-gradient(135deg,var(--label3) 50%,transparent 50%);background-position:calc(100% - 10px) 50%,calc(100% - 5px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:20px}
.field input::placeholder{color:var(--label3)}
.field.err label{color:var(--danger)}
.field.shake{animation:shake .4s ease}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.form-foot{padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px;border-top:.5px solid var(--sep)}
.form-foot .btn{width:100%}
.form-msg{font-size:14px;color:var(--danger);min-height:1em}
.form-help{font-size:13px;color:var(--label2)}
.ready{padding:24px 20px;display:flex;flex-direction:column;gap:12px;animation:rise .6s var(--ease)}
.check{width:52px;height:52px;border-radius:50%;background:var(--ok);display:grid;place-items:center;animation:pop .6s var(--spring)}
.check svg{width:28px;height:28px;color:#fff}
.check path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s .25s ease forwards}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
.ready h3{font-size:20px;font-weight:700}
.ready p{color:var(--label2);font-size:15px}
.ready pre{margin:0;white-space:pre-wrap;font:inherit;font-size:15px;background:var(--fill);border-radius:var(--r-ctl);padding:12px 14px;color:var(--label)}
.ready .row{display:flex;gap:10px;flex-wrap:wrap}
.ready .row .btn{flex:1 1 160px}
.wa-card{padding:28px;display:flex;flex-direction:column;gap:14px}
.wa-card h3{font-size:22px;font-weight:700}
.wa-card p{color:var(--label2)}
.phone{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--fill);border-radius:var(--r-ctl);padding:12px 14px;flex-wrap:wrap}
.phone b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;user-select:all}
.linkbtn{border:0;background:none;color:var(--accent);font:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:4px;transition:transform .3s var(--spring)}
.linkbtn:active{transform:scale(.9)}
.linkbtn.done{color:var(--ok)}
@media (max-width:860px){.contact{grid-template-columns:1fr}.field{grid-template-columns:96px 1fr}}

/* ---------- Products view ---------- */
.shop-head{padding-block:40px 8px}
.shop-head h1{font-size:clamp(36px,5.5vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.shop-head p{color:var(--label2);margin-top:8px;max-width:58ch}
.search{position:relative;margin-top:20px;max-width:520px}
.search input{width:100%;font:inherit;font-size:17px;color:var(--label);background:var(--fill);border:0;border-radius:12px;padding:11px 40px 11px 38px;outline:none;-webkit-appearance:none;appearance:none;transition:box-shadow .2s}
.search input::-webkit-search-cancel-button{display:none}
.search input:focus{box-shadow:0 0 0 3px var(--accent-tint)}
.search input::placeholder{color:var(--label2)}
.search > svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--label2)}
.search .clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:0;background:var(--label3);color:var(--surface);display:grid;place-items:center;cursor:pointer}
.search .clear svg{width:12px;height:12px}
.catbar{position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:15;background:var(--bar);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--sep);margin-top:20px}
.catbar .wrap{overflow-x:auto;scrollbar-width:none;display:flex;gap:8px;align-items:center;padding-block:10px}
.catbar .wrap::-webkit-scrollbar{display:none}
.cat-pill{flex:none;border:0;font:inherit;font-size:14px;font-weight:500;padding:7px 14px;border-radius:980px;background:var(--fill);color:var(--label);cursor:pointer;transition:background-color .25s,color .25s,transform .3s var(--spring)}
.cat-pill:active{transform:scale(.94)}
.cat-pill.on{background:var(--label);color:var(--bg)}
.cat-sep{flex:none;width:1px;height:22px;background:var(--sep);margin-inline:4px}
.group-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:48px 0 4px}
.group-title h2{font-size:clamp(28px,3.6vw,36px);font-weight:700}
.group-title span{color:var(--label2);font-size:15px}
.shelf{padding-top:28px}
.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.shelf-head h3{font-size:22px;font-weight:700}
.shelf-head p{color:var(--label2);font-size:14px;margin-top:2px}
.shelf-nav{display:flex;gap:8px}
.shelf-nav .round-btn{width:34px;height:34px;box-shadow:none;background:var(--fill)}
.shelf-nav .round-btn svg{width:15px;height:15px}
@media (max-width:700px){.shelf-nav{display:none}}
.shelf-track{display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 18px;margin:-6px -2px 0;scroll-padding-left:2px}
.shelf-track::-webkit-scrollbar{display:none}
@media (max-width:480px){.shelf-track{grid-auto-columns:158px;gap:12px}}
.pcard{scroll-snap-align:start;display:flex;flex-direction:column;border:0;padding:0;text-align:left;font:inherit;color:inherit;background:var(--surface);border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .45s var(--spring),box-shadow .35s ease;min-width:0}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pcard:active{transform:scale(.97);transition-duration:.12s}
.pcard-img{background:var(--stage);aspect-ratio:1/1;max-width:100%;overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .7s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.06)}
.pcard-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.pcard-body b{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.pcard-body span{font-size:13px;color:var(--label2)}
.pcard.in{animation:popin .55s var(--spring) both;animation-delay:var(--d,0ms)}
@keyframes popin{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding-top:28px}
@media (max-width:480px){.results{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.empty{padding:48px 0;color:var(--label2);text-align:center}

/* ---------- Product showcase view ---------- */
.pd-top{padding-block:16px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.back{display:inline-flex;align-items:center;gap:2px;color:var(--accent);border:0;background:none;font:inherit;font-size:17px;cursor:pointer;padding:6px 0}
.back svg{width:22px;height:22px;transition:transform .3s var(--spring)}
.back:hover svg{transform:translateX(-3px)}
.pd-counter{font-size:13px;color:var(--label2);font-variant-numeric:tabular-nums}
.pd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding-block:20px 8px}
.showcase{position:relative;aspect-ratio:1/1.02;max-width:100%;border-radius:32px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--glow2),transparent 60%),radial-gradient(90% 70% at 50% 110%,var(--glow),transparent 70%),var(--surface);display:grid;place-items:center;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.spot{position:absolute;top:-30%;left:50%;width:70%;height:90%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent);pointer-events:none;animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6;transform:translateX(-50%) scale(1.08)}}
.podium{position:absolute;bottom:9%;left:50%;width:62%;height:9%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);filter:blur(4px);animation:shadowpulse 6s ease-in-out infinite}
@keyframes shadowpulse{50%{transform:translateX(-50%) scale(.86);opacity:.7}}
.pd-float{width:64%;max-width:100%;animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.pd-frame{position:relative;width:100%;aspect-ratio:1/1;max-width:100%;border-radius:26px;background:var(--stage);box-shadow:0 30px 60px -20px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.05);overflow:hidden;cursor:zoom-in;transition:transform .3s ease}
.pd-frame img{width:100%;height:100%;object-fit:contain;display:block;animation:showin .8s var(--spring)}
@keyframes showin{from{opacity:0;transform:scale(.86) translateY(20px)}to{opacity:1;transform:none}}
.pd-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-100%);animation:glint 5s ease-in-out 1s infinite;pointer-events:none}
@keyframes glint{0%,70%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
.sc-arrow{position:absolute;top:50%;z-index:3;margin-top:-22px}
.sc-arrow.prev{left:14px}.sc-arrow.next{right:14px}
.pd-info{display:flex;flex-direction:column;gap:14px;min-width:0}
.pd-cat{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.pd-info h1{font-size:clamp(30px,4vw,42px);font-weight:700;line-height:1.08;letter-spacing:-.03em}
.pd-size{align-self:flex-start;font-size:14px;font-weight:600;padding:5px 12px;border-radius:980px;background:var(--fill);font-variant-numeric:tabular-nums}
.pd-desc{font-size:18px;line-height:1.5;color:var(--label);max-width:48ch}
.pd-use{background:var(--surface);border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.pd-use b{display:block;font-size:14px;font-weight:600}
.pd-use span{display:block;font-size:15px;color:var(--label2);margin-top:2px}
.pd-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.pd-note{font-size:13px;color:var(--label2)}
.pd > *{animation:rise .7s var(--ease) both}
.pd > *:nth-child(2){animation-delay:.12s}
@media (max-width:860px){.pd{grid-template-columns:1fr;gap:24px}.showcase{border-radius:26px}.pd-float{width:72%}.sc-arrow{width:38px;height:38px;margin-top:-19px}.sc-arrow.prev{left:10px}.sc-arrow.next{right:10px}}

/* Footer */
footer{padding-block:56px 40px;margin-top:72px;border-top:.5px solid var(--sep)}
footer .wrap{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--label2)}
footer b{color:var(--label);font-weight:600}

/* Floating WhatsApp */
.fab{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:25;width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 10px 30px -6px var(--accent);transform:scale(0) rotate(-90deg);transition:transform .55s var(--spring)}
.fab.show{transform:none}
.fab:hover{transform:scale(1.08)}
.fab:active{transform:scale(.92)}
.fab svg{width:28px;height:28px}
.fab::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:halo 2.6s ease-out infinite}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:50;background:var(--scrim);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:grid;place-items:center;padding:calc(20px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:fade .3s ease}
.lightbox img{max-height:100%;max-width:min(100%,640px);border-radius:16px;box-shadow:var(--shadow-lg);animation:zoomin .5s var(--spring);cursor:zoom-out;background:var(--stage)}
.lb-close{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;cursor:pointer}
.lb-close svg{width:18px;height:18px}
@keyframes fade{from{opacity:0}}
@keyframes zoomin{from{transform:scale(.8);opacity:0}}

/* Tab bar (phones) */
.tabbar{display:none}
@media (max-width:860px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bar);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--sep);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:500;color:var(--label2);padding:4px 0;transition:color .25s}
  .tabbar a svg{width:24px;height:24px;transition:transform .45s var(--spring)}
  .tabbar a.on{color:var(--accent)}
  .tabbar a.on svg{transform:translateY(-2px) scale(1.1)}
  .tabbar a.pop svg{animation:tabpop .45s var(--spring)}
  @keyframes tabpop{40%{transform:scale(.75)}100%{transform:translateY(-2px) scale(1.1)}}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .fab{bottom:calc(80px + env(safe-area-inset-bottom,0px));width:52px;height:52px}
}

/* ---------- Theme switcher ---------- */
.navbar .wrap{gap:12px}
.navlinks{margin-right:8px}
.theme-btn{width:36px;height:36px;border-radius:50%;border:0;background:var(--fill);color:var(--label);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .35s var(--spring),background-color .2s}
.theme-btn:hover{background:var(--fill-strong)}
.theme-btn:active{transform:scale(.9)}
.theme-btn svg{width:18px;height:18px}
@media (max-width:860px){.navbar .theme-btn{margin-left:auto}.navbar .btn-sm{margin-left:0}}
.theme-menu{position:fixed;z-index:40;top:calc(60px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;min-width:200px;animation:menuin .28s var(--spring);transform-origin:top right}
@keyframes menuin{from{opacity:0;transform:scale(.88)}}
.theme-menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:var(--label);font:inherit;font-size:15px;padding:10px 12px;border-radius:9px;cursor:pointer;text-align:left}
.theme-menu button:hover{background:var(--fill)}
.theme-menu button svg{width:18px;height:18px;flex:none}
.theme-menu .tick{margin-left:auto;color:var(--accent);opacity:0}
.theme-menu button[aria-checked="true"] .tick{opacity:1}

/* ---------- Packages (dynamic) ---------- */
.packages{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.pkg-price{display:flex;gap:10px;flex-wrap:wrap}
.pkg-price div{flex:1 1 120px;background:var(--fill);border-radius:14px;padding:10px 14px}
.pkg-price span{display:block;font-size:12px;color:var(--label2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.pkg-price b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pkg-price .eft b{color:var(--accent)}
.chip.gift{background:var(--accent-tint);color:var(--accent)}
.car-card{transition:transform .85s var(--spring),filter .6s ease,opacity .6s ease}
.car-card[data-pos="h"]{--t:scale(.7);opacity:0;z-index:0;pointer-events:none}

/* ---------- Owner-only prices ---------- */
.pprice{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;margin-top:4px;font-variant-numeric:tabular-nums}
.pprice b{font-size:15px;color:var(--accent);font-weight:700}
.pprice s{font-size:12px;color:var(--label3)}
.ctag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--accent-tint);color:var(--accent);white-space:nowrap}
.ctag.free{background:rgba(52,199,89,.16);color:var(--ok)}
.admin-box{border:1px dashed var(--accent);border-radius:16px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;background:var(--accent-tint)}
.admin-box .lbl{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;width:100%}
.admin-box .big{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.admin-box s{color:var(--label2);font-size:14px}
.admin-box .code{font-size:13px;color:var(--label2)}

/* ---------- Admin ---------- */
.adm-head{padding-block:32px 4px}
.adm-head h1{font-size:clamp(32px,5vw,44px);font-weight:700;letter-spacing:-.03em;margin-top:4px}
.adm-head p{color:var(--label2);margin-top:6px;max-width:60ch}
.adm-tabs-wrap{overflow-x:auto;scrollbar-width:none;margin-top:18px;padding-bottom:2px}
.adm-tabs-wrap::-webkit-scrollbar{display:none}
.adm-panel{padding-top:20px}
.adm-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.adm-bar h2{font-size:24px;font-weight:700}
.adm-note{font-size:13px;color:var(--label2);margin-top:12px;max-width:70ch}
.sim{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:start}
@media (max-width:980px){.sim{grid-template-columns:1fr}}
.picker{padding:16px;display:flex;flex-direction:column;gap:12px}
@media (min-width:981px){.picker{position:sticky;top:calc(72px + env(safe-area-inset-top,0px));max-height:calc(100vh - 96px)}}
.picker .search{margin-top:0;max-width:none;flex:none}
.picker .pick-cats{flex:none}
.pick-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pick-cats::-webkit-scrollbar{display:none}
.pick-cats .cat-pill{font-size:13px;padding:5px 11px}
.pick-list{overflow-y:auto;display:flex;flex-direction:column;margin:0 -8px;max-height:60vh}
@media (min-width:981px){.pick-list{max-height:none;flex:1}}
.pick{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border-radius:12px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background-color .15s,transform .3s var(--spring)}
.pick:hover{background:var(--fill)}
.pick:active{transform:scale(.98)}
.pick img{width:44px;height:44px;border-radius:10px;background:var(--stage);object-fit:contain}
.pick b{font-size:14px;font-weight:600;display:block;line-height:1.25}
.pick span{font-size:12px;color:var(--label2)}
.pick .pp{text-align:right;font-variant-numeric:tabular-nums;font-size:14px;font-weight:600}
.pick .pp s{display:block;font-size:11px;color:var(--label3);font-weight:400}
.pick .pp .ctag{display:inline-block;margin-top:2px}
.cart{overflow:hidden}
.cart-head{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:.5px solid var(--sep)}
.cart-head h3{font-size:20px;font-weight:700}
.cart-head span{font-size:13px;color:var(--label2)}
.line{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;padding:12px 20px;align-items:center;position:relative}
.line + .line::before{content:"";position:absolute;top:0;left:80px;right:0;border-top:.5px solid var(--sep)}
.line img{width:48px;height:48px;border-radius:10px;background:var(--stage);object-fit:contain}
.line .nm{font-size:14px;font-weight:600;line-height:1.3}
.line .meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:3px;font-size:12px;color:var(--label2);font-variant-numeric:tabular-nums}
.line .amt{text-align:right;font-variant-numeric:tabular-nums}
.line .amt b{display:block;font-size:15px}
.line .amt s{font-size:12px;color:var(--label3)}
.line.free{background:rgba(52,199,89,.08)}
.line.new{animation:popin .45s var(--spring)}
.stepper{display:inline-flex;align-items:center;background:var(--fill);border-radius:9px;margin-top:6px}
.stepper button{width:30px;height:28px;border:0;background:none;color:var(--label);font:inherit;font-size:17px;cursor:pointer;border-radius:8px}
.stepper button:active{background:var(--fill-strong)}
.stepper span{min-width:28px;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.cart-empty{padding:36px 20px;color:var(--label2);text-align:center}
.offers{padding:16px 20px;border-top:.5px solid var(--sep)}
.offers h4{margin:0;font-size:16px}
.offers .sub{font-size:13px;color:var(--label2);margin:2px 0 10px}
.offer-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0}
.offer-row img,.offer-row .ph{width:40px;height:40px;border-radius:9px;background:var(--stage);object-fit:contain}
.offer-row .ph{background:var(--fill)}
.offer-row.locked{opacity:.45}
.offer-row b{font-size:13px;font-weight:600;display:block;line-height:1.3}
.offer-row span{font-size:12px;color:var(--label2);font-variant-numeric:tabular-nums}
.mini-btn{border:0;font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:980px;background:var(--accent-tint);color:var(--accent);cursor:pointer;white-space:nowrap;transition:transform .3s var(--spring),background-color .2s,color .2s}
.mini-btn:active{transform:scale(.92)}
.mini-btn.on{background:var(--accent);color:var(--on-accent)}
.mini-btn[disabled]{opacity:.5;cursor:default}
.mini-btn.danger{background:rgba(255,59,48,.12);color:var(--danger)}
.progress{height:6px;border-radius:6px;background:var(--fill);overflow:hidden;margin:8px 0 4px}
.progress i{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .6s var(--spring)}
.summary{padding:16px 20px 20px;border-top:.5px solid var(--sep);display:flex;flex-direction:column;gap:8px}
.sum-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;font-variant-numeric:tabular-nums}
.sum-row span{color:var(--label2)}
.sum-row.save b{color:var(--ok)}
.sum-row.total{font-size:24px;font-weight:700;padding-top:10px;margin-top:4px;border-top:.5px solid var(--sep)}
.sum-row.total span{color:var(--label)}
.sum-row select,.ptable select{font:inherit;font-size:14px;color:var(--label);background:var(--fill);border:0;border-radius:9px;padding:6px 10px}
.hint{font-size:13px;color:var(--accent);font-weight:500}
.sim-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.sim-actions .btn{flex:1 1 180px}
.ptable-wrap{overflow-x:auto}
.ptable{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.ptable th{text-align:left;font-size:12px;color:var(--label2);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;border-bottom:.5px solid var(--sep);white-space:nowrap}
.ptable td{padding:7px 12px;border-bottom:.5px solid var(--sep);vertical-align:middle}
.ptable tr.grp td{background:var(--fill);font-weight:700;font-size:13px;padding-block:8px}
.ptable input{width:100px;font:inherit;font-size:14px;color:var(--label);background:var(--fill);border:0;border-radius:8px;padding:6px 8px;text-align:right}
.ptable input.txt{width:100%;min-width:180px;text-align:left}
.ptable .pname{min-width:200px}
.adm-pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.apkg{overflow:hidden;display:flex;flex-direction:column}
.apkg .im{aspect-ratio:3/4;max-width:100%;width:100%;background:var(--fill);overflow:hidden}
.apkg .im img{width:100%;height:100%;object-fit:cover;display:block}
.apkg .b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.apkg h3{font-size:17px;font-weight:700}
.apkg .pr{font-size:14px;color:var(--label2);font-variant-numeric:tabular-nums}
.apkg .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.state{align-self:flex-start;font-size:12px;font-weight:600;padding:3px 9px;border-radius:980px;background:rgba(52,199,89,.16);color:var(--ok)}
.state.off{background:var(--fill);color:var(--label2)}
.new-card{border:2px dashed var(--fill-strong);background:none;border-radius:var(--r-card);min-height:260px;display:grid;place-items:center;color:var(--accent);font:inherit;font-size:17px;font-weight:600;cursor:pointer;transition:transform .35s var(--spring),border-color .2s}
.new-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.sheet-wrap{position:fixed;inset:0;z-index:45;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;animation:fade .25s ease}
.sheet{background:var(--bg);width:min(720px,100%);max-height:calc(100% - 40px - env(safe-area-inset-top,0px));overflow-y:auto;border-radius:22px 22px 0 0;padding:20px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:sheetin .5s var(--spring)}
@keyframes sheetin{from{transform:translateY(100%)}}
@media (min-width:760px){.sheet-wrap{align-items:center}.sheet{border-radius:22px;max-height:calc(100% - 60px)}}
.sheet h2{font-size:24px;font-weight:700;margin-bottom:14px}
.fgroup{background:var(--surface);border-radius:14px;overflow:hidden;margin-bottom:14px}
.frow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;padding:0 16px;min-height:48px;position:relative}
.frow + .frow::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.frow label{font-size:15px}
.frow input,.frow textarea{font:inherit;font-size:15px;color:var(--label);background:transparent;border:0;outline:none;width:100%;min-width:0;padding:12px 0;resize:vertical}
.frow textarea{min-height:96px;line-height:1.45}
.frow .ro{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.flabel{font-size:13px;color:var(--label2);text-transform:uppercase;letter-spacing:.04em;margin:0 4px 6px}
.fnote{font-size:13px;color:var(--label2);margin:-6px 4px 14px}
.imgs{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px}
.imgs figure{margin:0;width:96px;display:flex;flex-direction:column;gap:4px;position:relative}
.imgs img{width:96px;aspect-ratio:2/3;object-fit:cover;border-radius:10px;background:var(--fill)}
.imgs input{font:inherit;font-size:12px;color:var(--label);background:var(--fill);border:0;border-radius:6px;padding:4px 6px;width:100%}
.imgs .rm{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center}
.add-img{width:96px;aspect-ratio:2/3;border:2px dashed var(--fill-strong);border-radius:10px;display:grid;place-items:center;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;text-align:center;padding:6px;position:relative}
.add-img input{position:absolute;inset:0;opacity:0;cursor:pointer}
.switch{position:relative;width:51px;height:31px;flex:none;justify-self:end}
.switch input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer;position:absolute;inset:0;z-index:1}
.switch span{position:absolute;inset:0;border-radius:31px;background:var(--fill-strong);transition:background-color .25s}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .35s var(--spring)}
.switch input:checked + span{background:var(--ok)}
.switch input:checked + span::after{transform:translateX(20px)}
.sheet-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}
.btn-danger{background:none;color:var(--danger);padding:12px 18px;font-size:17px;margin-right:auto}
.toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:var(--label);color:var(--bg);padding:12px 18px;border-radius:14px;font-size:15px;font-weight:500;box-shadow:var(--shadow-lg);animation:toastin .45s var(--spring);max-width:calc(100% - 32px);text-align:center}
@keyframes toastin{from{opacity:0;transform:translate(-50%,24px) scale(.95)}}
@media (max-width:860px){.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv.pre{opacity:1;transform:none}
}

/* ---------- Static site additions ---------- */
.pcard{color:inherit;text-decoration:none}
.teaser-row a{display:block;border-radius:16px;aspect-ratio:1/1;max-width:100%;overflow:hidden;background:var(--stage);box-shadow:var(--shadow);transition:transform .5s var(--spring)}
.teaser-row a:nth-child(odd){transform:translateY(10px)}
.teaser-row a:hover{transform:translateY(-6px) scale(1.04)}
.teaser-row a img{width:100%;height:100%;object-fit:contain;display:block}
.shelf-head h3 a{color:inherit}
.shelf-head h3 a:hover{color:var(--accent)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--label2);padding-top:16px}
.crumbs a{color:var(--label2)}
.crumbs a:hover{color:var(--accent)}
.foot-cats{display:flex;flex-wrap:wrap;gap:4px 8px}
.foot-cats a{color:var(--label2)}
.foot-cats a:hover{color:var(--accent)}
footer a{color:var(--accent)}
.cat-intro{max-width:62ch;color:var(--label2);margin-top:8px}
.pd-info h1{margin:0}
a.sc-arrow{color:var(--label)}