:root{
    --cream:#FFFBF1; --cream2:#FFF3D6; --card:#FFF8E9; --card2:#FFFDF6;
    --line:#F0E3C3;
    --amber:#FFB000; --amber-d:#E89A00; --amber-dd:#B97E00; --gold:#FFC132;
    --ink:#241a07; --ink2:#3a3121; --muted:#9a8c72; --faint:#b6ab93;
    --maxw:1140px;
    --acc-hi:#ffd45a; --acc-rgb:255,176,0; --acc-dd-rgb:185,126,0; --on-acc:#2a1d00; --acc-tint:#fff5d8; --cream-rgb:255,251,241;
    --font:"Be Vietnam Pro","Nunito","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --font-display:"Baloo 2","Nunito","Be Vietnam Pro",sans-serif;
  }
  *{box-sizing:border-box}
  
  html,body,*{touch-action:manipulation}
  html{scroll-behavior:smooth;overflow-x:clip}
  html.lenis,html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  .lenis.lenis-stopped{overflow:hidden}
  body{margin:0;background:var(--cream);color:var(--ink);overflow-x:clip;
    font-family:var(--font);font-size:17px;line-height:1.55;font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
  a{color:inherit;text-decoration:none}
  img{display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  h1,h2,h3{margin:0;font-family:var(--font);font-weight:800;line-height:1.24;letter-spacing:-.015em;color:var(--ink)}

  
  #glbg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;display:block;pointer-events:none}
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(120% 60% at 50% 100%,rgba(var(--cream-rgb),.0),rgba(var(--cream-rgb),.55))}

  
  #intro{display:none}
  .js #intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
    background:linear-gradient(180deg,var(--acc-hi) 0%,var(--acc-tint) 40%,var(--cream) 100%);
    transition:opacity .75s ease}
  .js #intro.out{opacity:0;pointer-events:none}
  #intro::before{content:"";position:absolute;left:50%;top:46%;width:min(620px,130vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
    background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0));pointer-events:none}
  #intro .ibrand{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:-4vh;
    transition:scale .45s cubic-bezier(.5,0,.75,0),opacity .35s}
  #intro.leave .ibrand{scale:1.12;opacity:0}
  #intro .ilogo{width:clamp(86px,22vw,118px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:27%;opacity:0;scale:.2;rotate:-30deg;
    box-shadow:0 0 0 6px rgba(255,255,255,.75),0 20px 36px -12px rgba(var(--acc-dd-rgb),.55);
    transition:opacity .2s,scale .7s cubic-bezier(.34,1.8,.5,1),rotate .7s cubic-bezier(.34,1.8,.5,1)}
  #intro .ilogo.on{opacity:1;scale:1;rotate:-6deg;animation:ibob 2.2s ease-in-out .7s infinite}
  @keyframes ibob{50%{translate:0 -7px;rotate:2deg}}
  #intro .iword{display:flex;margin-top:20px;font-family:var(--font-display,var(--font));font-weight:700;font-size:clamp(60px,17vw,116px);
    line-height:.95;letter-spacing:-.015em;color:var(--ink)}
  #intro .iword span{display:inline-block;opacity:0;translate:0 .55em;scale:.55;
    transition:opacity .25s,translate .6s cubic-bezier(.34,1.7,.5,1),scale .6s cubic-bezier(.34,1.7,.5,1)}
  #intro .iword span.on{opacity:1;translate:0 0;scale:1}
  #intro .igold{position:relative;overflow:hidden;margin-top:14px;padding:.3em 1em .32em;border-radius:999px;
    font-family:var(--font-display,var(--font));font-weight:700;font-size:clamp(20px,5.4vw,30px);letter-spacing:.34em;text-indent:.34em;line-height:1;color:var(--on-acc);
    background:linear-gradient(180deg,var(--acc-hi),var(--amber));box-shadow:0 4px 0 var(--amber-dd),0 16px 28px -10px rgba(var(--acc-dd-rgb),.6),inset 0 1px 0 rgba(255,255,255,.75);
    opacity:0;scale:1.7;rotate:-16deg;transition:opacity .15s,scale .5s cubic-bezier(.34,1.6,.5,1),rotate .5s cubic-bezier(.34,1.6,.5,1)}
  #intro .igold.on{opacity:1;scale:1;rotate:-3deg}
  #intro .igold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.8) 50%,transparent 65%);translate:-130% 0}
  #intro .igold.on::after{animation:ishine 1.1s ease .45s}
  @keyframes ishine{to{translate:130% 0}}
  #intro .isp{position:absolute;font-style:normal;line-height:1;color:var(--amber);opacity:0;scale:0;transition:opacity .2s,scale .5s cubic-bezier(.34,1.8,.5,1)}
  #intro .isp.on{opacity:1;scale:1;animation:itw 1.3s ease-in-out infinite}
  #intro .isp.s1{left:-38px;top:6px;font-size:24px}
  #intro .isp.s2{right:-30px;top:44px;font-size:16px;color:#ff8a3d;animation-delay:.2s}
  #intro .isp.s3{left:-22px;bottom:64px;font-size:14px;animation-delay:.45s}
  #intro .isp.s4{right:-44px;bottom:26px;font-size:28px;animation-delay:.1s}
  @keyframes itw{50%{opacity:.35;scale:.65}}
  
  #intro .iload{position:absolute;left:50%;bottom:11vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .3s}
  #intro.leave .iload{opacity:0}
  #intro .ibar{width:160px;height:6px;border-radius:99px;background:rgba(36,26,7,.12);overflow:hidden}
  #intro .ibar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--amber),var(--acc-hi));transition:width .25s ease}
  #intro .ipct{font-weight:800;font-size:13px;color:rgba(36,26,7,.55);font-variant-numeric:tabular-nums}

  
  #rain{position:fixed;inset:0;z-index:210;pointer-events:none;overflow:hidden;contain:strict;opacity:1;background:linear-gradient(180deg,var(--acc-hi) 0%,var(--acc-tint) 40%,var(--cream) 100%);transition:opacity .26s ease}
  #rain.out{opacity:0}
  #rain img{position:absolute;border-radius:22%;will-change:transform;transform:translateY(-130vh);
    box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
  .js.is-loading,.js.is-loading body{overflow:hidden}

  
  .js .rv{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
  .js body.ready .rv{opacity:1;translate:0 0}
  .js .scene>*{opacity:0;scale:.35;transition:opacity .45s,scale .85s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--d,0s)}
  .js body.ready .scene>*{opacity:1;scale:1}
  @media (prefers-reduced-motion: reduce){
    .js .rv,.js .scene>*{opacity:1!important;translate:none!important;scale:none!important;transition:none!important}
  }

  
  .js .sr{opacity:0;translate:0 38px;transition:opacity .75s ease,translate .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--sd,0s)}
  .js .sr.sr-pop{translate:0 26px;scale:.93;
    transition:opacity .7s ease,translate .9s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.34,1.45,.64,1);transition-delay:var(--sd,0s)}
  .js .sr.in{opacity:1;translate:0 0;scale:1}
  .sprog{position:fixed;left:0;top:0;width:100%;height:3px;z-index:70;pointer-events:none;transform-origin:0 50%;
    transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--amber),var(--acc-hi) 60%,#ff8a3d);box-shadow:0 0 10px rgba(var(--acc-rgb),.6)}
  @media (prefers-reduced-motion: reduce){
    .js .sr{opacity:1!important;translate:none!important;scale:none!important;transition:none!important}
    .scene>*{translate:none!important}
  }

  
  .btn{font-family:var(--font);display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-weight:800;font-size:16px;line-height:1;padding:16px 28px;border:0;border-radius:999px;cursor:pointer;
    transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s,background .2s;-webkit-tap-highlight-color:transparent}
  .btn .hrt{width:19px;height:19px}
  .btn-primary{color:var(--on-acc);background:var(--amber);
    box-shadow:0 4px 0 var(--amber-dd),0 10px 20px -7px rgba(var(--acc-dd-rgb),.6)}
  .btn-primary:hover{transform:translateY(-2px);background:var(--acc-hi);box-shadow:0 6px 0 var(--amber-dd),0 16px 26px -8px rgba(var(--acc-dd-rgb),.6)}
  .btn-primary:active{transform:translateY(4px);box-shadow:0 1px 0 var(--amber-dd),0 4px 10px -5px rgba(var(--acc-dd-rgb),.5)}
  .btn-cream{color:var(--ink);background:#fff;box-shadow:0 3px 0 #ead9b4,0 8px 18px -8px rgba(120,90,20,.25)}
  .btn-cream:hover{transform:translateY(-2px);background:#fffdf8}
  .btn-cream:active{transform:translateY(3px);box-shadow:0 1px 0 #ead9b4}
  .btn-sm{padding:12px 20px;font-size:14px}
  .btn-block{width:100%}

  .stores{display:flex;flex-wrap:wrap;gap:12px}
  .store{display:inline-flex;align-items:center;gap:11px;background:#1e1a12;color:#fff;border-radius:16px;padding:11px 20px;
    box-shadow:0 4px 0 #000,0 10px 20px -8px rgba(0,0,0,.4);transition:transform .12s}
  .store:hover{transform:translateY(-2px)}
  .store:active{transform:translateY(3px)}
  .store svg{width:23px;height:23px;flex:none}
  .store small{display:block;font-size:10.5px;opacity:.72;line-height:1.2}
  .store b{display:block;font-size:15px;font-weight:800}

  
  header.nav{position:sticky;top:0;z-index:60;background:rgba(var(--cream-rgb),.95);border-bottom:1px solid rgba(240,227,195,.7)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
  .brand img{width:34px;height:34px;border-radius:10px;object-fit:cover}
  .brand img.swap{animation:brandpop .45s cubic-bezier(.34,1.56,.64,1)}
  @keyframes brandpop{0%{transform:scale(.6) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}
  .nav-links{display:flex;gap:28px;font-size:15px;font-weight:700;color:var(--ink2)}
  .nav-links a{opacity:.72;transition:opacity .15s}
  .nav-links a:hover{opacity:1}

  
  .hero{position:relative;padding:56px 0 24px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
  .hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);color:var(--ink2);
    font-size:13px;font-weight:800;padding:7px 15px;border-radius:999px;box-shadow:0 4px 14px -6px rgba(120,90,20,.25);margin-bottom:20px}
  .hero h1{font-size:clamp(38px,5.6vw,66px);font-weight:900;letter-spacing:-.035em}
  .mk{position:relative;white-space:nowrap;color:var(--amber-d)}
  .mk::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.07em;height:.34em;background:rgba(var(--acc-rgb),.26);border-radius:.2em;z-index:-1}
  .hero .lead{color:var(--ink2);font-size:clamp(16px,1.8vw,19px);margin:20px 0 28px;max-width:38ch}
  .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
  .trust{display:flex;align-items:center;gap:12px;margin-top:26px}
  .avatars{display:flex}
  .avatars img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:3px solid var(--cream);margin-left:-11px}
  .avatars img:first-child{margin-left:0}
  .trust span{font-size:14px;color:var(--muted);font-weight:700}

  
  .scene{position:relative;width:100%;max-width:440px;height:740px;margin:0 auto}
  .phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:236px;aspect-ratio:9/19.3;
    background:#000;border-radius:40px;padding:9px;box-shadow:0 0 0 2px #e7d9b8,0 30px 60px -18px rgba(150,110,30,.45);z-index:3}
  .phone::after{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:88px;height:24px;background:#000;border-radius:14px;z-index:4}
  .phone .app{width:100%;height:100%;border-radius:32px;overflow:hidden;background:#000;
    display:flex;flex-direction:column;justify-content:center;padding-top:22px}
  .phone .app img{width:100%;height:auto;flex:none}
  .scene{--fan:0;--fan-spread:44px;--fan-angle:12deg;--sticker-out-x:8px;--sticker-out-y:48px}
  .scene::before{content:"";position:absolute;inset:8% -8%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,193,50,.28),transparent 68%);pointer-events:none}
  .phone{transform-origin:50% 88%;will-change:transform;border:1px solid #6a6256;box-shadow:0 0 0 2px #e7d9b8,0 32px 50px -22px rgba(86,58,10,.5),inset 0 0 0 2px #38332c}
  .phone-locket{z-index:3;transform:translate(calc(-50% - 4px - var(--fan) * var(--fan-spread)),-50%) rotate(calc(-1deg - var(--fan) * var(--fan-angle)))}
  .phone-pricing{z-index:4;transform:translate(calc(-50% + 4px + var(--fan) * var(--fan-spread)),calc(-50% + 6px)) rotate(calc(1deg + var(--fan) * var(--fan-angle)))}
  .scene>.phone,.js .scene>.phone{transition:opacity .45s,scale .85s cubic-bezier(.34,1.56,.64,1),transform .75s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s),var(--d,0s),0s}
  .phone-pricing .app{padding:0;background:linear-gradient(135deg,#fff4cf 0%,#ffc132 100%)}
  .phone-pricing .app .pricing-screen{width:100%;height:100%;object-fit:cover}

  
  .phone-pricing-screen {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 34px 12px 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    color: #241a07;
    overflow: hidden;
    user-select: none;
  }
  .phone-pricing-screen::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
  }
  .phone-pricing-screen::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    pointer-events: none;
  }
  .pps-header {
    position: relative;
    z-index: 2;
    margin-bottom: 4px;
  }
  .pps-brand {
    font-family: var(--font-display, "Baloo 2", sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(36, 26, 7, 0.85);
    text-transform: uppercase;
  }
  .pps-title {
    font-size: 21px;
    font-weight: 900;
    line-height: 1.15;
    margin: 2px 0 2px;
    color: #241a07;
    letter-spacing: -0.02em;
  }
  .pps-sub {
    font-size: 10px;
    font-weight: 700;
    color: rgba(36, 26, 7, 0.75);
    margin: 0;
  }
  .pps-cards {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0;
  }
  .pps-card {
    background: #fffdf6;
    border-radius: 14px;
    padding: 7px 10px;
    box-shadow: 0 4px 10px -3px rgba(36, 26, 7, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .pps-card-pname {
    font-size: 11px;
    font-weight: 800;
    color: #241a07;
  }
  .pps-card-price {
    font-size: 18px;
    font-weight: 900;
    color: #241a07;
    line-height: 1.15;
  }
  .pps-card-unit {
    font-size: 10px;
    font-weight: 600;
    color: #6a5323;
  }
  .pps-card-featured {
    background: #241a07;
    color: #fffdf6;
    padding-top: 10px;
    border: 1.5px solid #ffc132;
    box-shadow: 0 8px 18px -4px rgba(36, 26, 7, 0.45);
  }
  .pps-badge {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    background: #fffdf6;
    color: #241a07;
    font-size: 8px;
    font-weight: 800;
    padding: 1px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  .pps-card-featured .pps-card-pname {
    color: #fffdf6;
  }
  .pps-card-featured .pps-card-price {
    color: #ffc132;
  }
  .pps-card-featured .pps-card-unit {
    color: #fff0b5;
  }
  .pps-card-note {
    font-size: 9px;
    color: #fff0b5;
    margin-top: 1px;
    font-weight: 600;
  }
  .pps-footer {
    position: relative;
    z-index: 2;
    padding-top: 2px;
  }
  .pps-footer-text {
    font-size: 10px;
    font-weight: 700;
    color: rgba(36, 26, 7, 0.85);
  }
  .pps-footer-phone {
    font-size: 13px;
    font-weight: 900;
    color: #241a07;
    letter-spacing: 0.5px;
  }
  @media(prefers-reduced-motion:reduce){.scene{--fan:1}.phone{will-change:auto}}
  .polaroid{position:absolute;background:#fff;padding:8px 8px 14px;border-radius:14px;box-shadow:0 16px 34px -14px rgba(120,90,20,.4);z-index:6}
  .polaroid img{width:100%;height:100%;object-fit:cover;border-radius:8px}
  .p1{width:106px;height:128px;left:0;top:0;transform:rotate(-12deg)}
  .p2{width:100px;height:120px;right:0;bottom:0;transform:rotate(12deg)}
  .scene>.polaroid,.scene>.sticker,.scene>.heartpop,
  .js .scene>.polaroid,.js .scene>.sticker,.js .scene>.heartpop{
    transition:opacity .45s,scale .85s cubic-bezier(.34,1.56,.64,1),translate .75s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--d,0s),var(--d,0s),0s}
  .scene .p1{translate:calc(var(--fan) * var(--sticker-out-x) * -1) calc(var(--fan) * var(--sticker-out-y) * -1)}
  .scene .sticker{translate:calc(var(--fan) * var(--sticker-out-x)) calc(var(--fan) * var(--sticker-out-y) * -1)}
  .scene .p2{translate:calc(var(--fan) * var(--sticker-out-x)) calc(var(--fan) * var(--sticker-out-y))}
  .scene .heartpop{translate:calc(var(--fan) * var(--sticker-out-x) * -1) calc(var(--fan) * var(--sticker-out-y))}
  .sticker{position:absolute;width:92px;z-index:5;right:6%;top:3%;transform:rotate(12deg);filter:drop-shadow(0 8px 14px rgba(120,90,20,.35))}
  .heartpop{position:absolute;width:60px;z-index:5;left:8%;bottom:7%;transform:rotate(-10deg);filter:drop-shadow(0 10px 16px rgba(120,90,20,.35))}

  
  section{padding:64px 0;position:relative}
  .sec-head{text-align:center;max-width:600px;margin:0 auto 36px}
  .kicker{color:var(--amber-d);font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}
  .sec-head h2{font-size:clamp(28px,4.4vw,44px);font-weight:900;letter-spacing:-.03em}
  .sec-head p{color:var(--ink2);margin:12px 0 0}
  .band{background:rgba(255,236,190,.45);border-top:1px solid rgba(240,227,195,.8);border-bottom:1px solid rgba(240,227,195,.8)}
  .card-shadow{box-shadow:0 12px 30px -22px rgba(150,110,30,.5)}

  
  .gfeat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .gf{background:var(--card2);border:1px solid var(--line);border-radius:24px;padding:22px;transition:transform .2s}
  .gf:hover{transform:translateY(-4px)}
  .gf .gi{width:48px;height:48px;border-radius:15px;margin-bottom:14px;display:grid;place-items:center;background:linear-gradient(180deg,var(--acc-hi),var(--amber));box-shadow:0 3px 0 var(--amber-dd),inset 0 1px 0 rgba(255,255,255,.6)}
  .gf .gi svg{width:24px;height:24px;stroke:var(--on-acc);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .gf h3{font-size:17px;margin:0 0 4px}
  .gf p{margin:0;color:var(--ink2);font-size:14px;line-height:1.5}
  
  .gfeat .gf:last-child:nth-child(odd){grid-column:1/-1;text-align:center}
  .gfeat .gf:last-child:nth-child(odd) .gi{margin-left:auto;margin-right:auto}
  .gfeat .gf:last-child:nth-child(odd) p{max-width:46ch;margin-left:auto;margin-right:auto}

  
  .vdemo{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:230px 1fr;gap:48px;align-items:center;
    margin-top:30px;padding:32px 52px 32px 32px;border-radius:34px;color:#fff;
    background:radial-gradient(90% 130% at 100% 0%,#5c400a 0%,#2b2008 46%,#15110a 100%);
    box-shadow:0 30px 60px -30px rgba(60,40,0,.75)}
  .vdemo::before{content:"";position:absolute;right:-70px;bottom:-90px;width:300px;height:300px;border-radius:50%;z-index:-1;
    background:radial-gradient(closest-side,rgba(var(--acc-rgb),.32),transparent);pointer-events:none}
  .vd-phone{position:relative;width:100%;aspect-ratio:440/953;background:#000;border-radius:34px;padding:7px;
    box-shadow:0 0 0 1.5px rgba(255,255,255,.16),0 26px 50px -18px rgba(0,0,0,.85)}
  .vd-phone video{width:100%;height:100%;object-fit:cover;border-radius:28px;display:block;background:#111;cursor:pointer}
  .vd-sound{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
    background:rgba(0,0,0,.55);color:#fff;font-size:16px;display:grid;place-items:center;backdrop-filter:blur(6px);transition:transform .12s}
  .vd-sound:active{transform:scale(.9)}
  .vd-sound:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .vd-rec{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
    color:#fff;font-size:12.5px;font-weight:800;padding:6px 12px;border-radius:999px;margin-bottom:16px}
  .vd-rec i{width:8px;height:8px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 3px rgba(255,59,48,.25);animation:recb 1.2s ease-in-out infinite}
  @keyframes recb{50%{opacity:.3}}
  .vd-copy h3{color:#fff;font-size:clamp(26px,3.4vw,40px);font-weight:900;letter-spacing:-.03em;line-height:1.12}
  .vd-copy h3 em{font-style:normal;color:var(--gold)}
  .vd-copy p{color:rgba(255,255,255,.72);margin:14px 0 18px;max-width:40ch}
  .vd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
  .vd-chips span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:7px 13px;border-radius:999px;
    font-size:13.5px;font-weight:800;color:rgba(255,255,255,.9)}
  @media (prefers-reduced-motion: reduce){ .vd-rec i{animation:none} }

  
  .pv{display:grid;grid-template-columns:1fr 310px;grid-template-areas:"head phone" "ctrl phone";column-gap:64px;row-gap:24px;align-items:center}
  .pv-head{grid-area:head;align-self:end}
  .pv-ctrl{grid-area:ctrl;align-self:start}
  .pv-head h2{font-size:clamp(30px,4.4vw,46px);font-weight:900;letter-spacing:-.03em}
  .pv-head p{color:var(--ink2);margin:14px 0 0;max-width:44ch}
  .pv-opts{display:grid;gap:10px;max-width:460px}
  .pv-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card2);border:2px solid var(--line);
    border-radius:20px;padding:13px 16px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s,transform .15s;
    -webkit-tap-highlight-color:transparent}
  .pv-opt:hover{transform:translateY(-2px)}
  .pv-opt:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
  .pv-opt .oi{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--acc-tint);font-size:19px;transition:background .2s}
  .pv-opt b{display:block;font-size:16px;font-weight:900;line-height:1.2}
  .pv-opt small{display:block;color:var(--muted);font-weight:700;font-size:13px;line-height:1.3}
  .pv-opt .tag{margin-left:auto;flex:none;font-size:11px;font-weight:900;background:var(--ink);color:var(--gold);padding:4px 9px;border-radius:999px}
  .pv-opt[aria-checked="true"]{border-color:var(--amber);background:var(--acc-tint);box-shadow:0 12px 26px -16px rgba(var(--acc-dd-rgb),.7)}
  .pv-opt[aria-checked="true"] .oi{background:linear-gradient(180deg,var(--acc-hi),var(--amber));box-shadow:0 3px 0 var(--amber-dd)}
  .pv-friends{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px}
  .pv-f{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;color:var(--ink2);cursor:default}
  .pv.pick .pv-f{cursor:pointer}
  .pv.pick .pv-f:hover .fa{transform:scale(1.08)}
  .pv-f:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:12px}
  .pv-f .fa{position:relative;width:54px;height:54px;transition:transform .2s}
  .pv-f img{width:54px;height:54px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 8px 16px -8px rgba(0,0,0,.4);transition:filter .35s,opacity .35s}
  .pv-f .fs{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
    font-size:11px;font-weight:900;color:#fff;box-shadow:0 0 0 2px var(--cream);transition:background .3s,transform .3s}
  .pv-f.can .fs{background:#22c55e}
  .pv-f.no img{filter:grayscale(1);opacity:.42}
  .pv-f.no .fs{background:#3a3121}
  .pv-f span{font-size:12.5px;font-weight:800}
  .pv-status{display:flex;align-items:center;gap:9px;margin-top:16px;font-weight:800;font-size:14.5px;color:var(--ink2);min-height:22px}
  .pv-status i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.22)}

  .pv-phone{grid-area:phone;justify-self:center;width:300px;aspect-ratio:9/19.3;background:#000;border-radius:44px;padding:9px;
    box-shadow:0 0 0 2px #e7d9b8,0 34px 64px -20px rgba(150,110,30,.55)}
  .pv-scr{position:relative;height:100%;border-radius:36px;overflow:hidden;color:#fff;display:flex;flex-direction:column;align-items:center;
    padding:36px 14px 14px;background:linear-gradient(180deg,#303034,#1c1c1f)}
  .pv-top{display:flex;align-items:center;justify-content:space-between;width:100%}
  .pv-ic{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none}
  .pv-ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .pv-who{background:rgba(255,255,255,.1);padding:8px 14px;border-radius:999px;font-weight:800;font-size:14px}
  .pv-av{width:36px;height:36px;border-radius:50%;object-fit:cover}
  .pv-photo{position:relative;width:100%;aspect-ratio:1;border-radius:32px;overflow:hidden;margin:26px 0 14px;background:#111}
  .pv-photo img{width:100%;height:100%;object-fit:cover}
  .pv-photo .lockb{position:absolute;left:12px;top:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
    background:rgba(0,0,0,.55);backdrop-filter:blur(6px);font-size:14px;opacity:0;transform:scale(.6);transition:opacity .3s,transform .35s cubic-bezier(.34,1.56,.64,1)}
  .pv.priv .pv-photo .lockb{opacity:1;transform:scale(1)}
  .pv-meta{font-weight:800;font-size:15px}
  .pv-meta span{color:rgba(255,255,255,.45);margin-left:6px}
  .pv-pill{margin-top:20px;display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:999px;
    background:rgba(255,255,255,.12);font-weight:800;font-size:15px;white-space:nowrap;transition:background .3s,color .3s}
  .pv-pill{position:relative}
  .pv-pill.priv{background:linear-gradient(180deg,var(--acc-hi),var(--amber));color:var(--on-acc)}
  .pv-pill.priv::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid rgba(var(--acc-rgb),.8);pointer-events:none;
    animation:pvring 2s ease-out infinite}
  @keyframes pvring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.22,1.7);opacity:0}}
  .pv-bar{margin-top:auto;display:flex;align-items:center;justify-content:space-between;width:100%}
  .pv-mid{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);padding:6px 12px;border-radius:999px}
  .pv-shut{width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:inset 0 0 0 3px #1c1c1f}
  .pv-badge{position:relative}
  .pv-badge b{position:absolute;top:-8px;right:-10px;background:#fff;color:#000;font-size:10px;font-weight:900;padding:1px 5px;border-radius:999px}
  @media (prefers-reduced-motion: reduce){ .pv-pill.priv::after{animation:none;display:none} }

  
  .uv{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center}
  .uv-phone{position:relative;width:300px;aspect-ratio:9/19.3;background:#000;border-radius:44px;padding:9px;justify-self:center;
    box-shadow:0 0 0 2px var(--line),0 34px 64px -20px rgba(var(--acc-dd-rgb),.5)}
  .uv-scr{position:relative;height:100%;border-radius:36px;overflow:hidden;background:linear-gradient(180deg,#1c1c20,#101013);
    display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 16px;color:#fff;text-align:center}
  .uv-drop{width:100%;flex:1;margin:4px 0;border:2px dashed rgba(255,255,255,.26);border-radius:28px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:16px;transition:border-color .2s,background .2s}
  .uv-drop:hover{border-color:rgba(var(--acc-rgb),.75);background:rgba(var(--acc-rgb),.08)}
  .uv.drag .uv-drop{border-color:var(--amber);background:rgba(var(--acc-rgb),.14)}
  .uv-up{width:62px;height:62px;border-radius:50%;background:linear-gradient(180deg,var(--acc-hi),var(--amber));display:grid;place-items:center;box-shadow:0 5px 0 var(--amber-dd)}
  .uv-up svg{width:28px;height:28px;stroke:var(--on-acc);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .uv-drop b{font-size:15px}
  .uv-drop small{font-size:12px;color:rgba(255,255,255,.55);max-width:22ch;line-height:1.4}
  .uv-limits{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:2px}
  .uv-limits span{background:rgba(255,255,255,.1);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:800;white-space:nowrap}
  .uv-video{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);border-radius:36px;object-fit:cover;background:#000;display:none;z-index:1}
  .uv.has .uv-video{display:block}
  .uv.has .uv-drop{visibility:hidden}
  .uv-overlay{position:absolute;left:0;right:0;bottom:0;padding:16px 16px 18px;z-index:2;display:none;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.2) 70%,transparent)}
  .uv.has .uv-overlay{display:block}
  .uv-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden;margin-bottom:11px}
  .uv-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--amber),var(--acc-hi))}
  .uv-res{display:flex;align-items:center;gap:9px;font-weight:800;font-size:13.5px;color:#fff;min-height:26px;text-align:left}
  .uv-res .dot{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:900}
  .uv-res.ok .dot{background:#22c55e;color:#fff}
  .uv-res.bad .dot{background:#ff5a5a;color:#fff}
  .uv-redo{width:100%;margin-top:12px}
  .uv-copy h2{font-size:clamp(28px,4.2vw,42px);font-weight:900;letter-spacing:-.03em;line-height:1.12}
  .uv-copy>p{color:var(--ink2);margin:14px 0 0;max-width:42ch}
  .uv-feats{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:11px}
  .uv-feats li{display:flex;gap:11px;align-items:center;font-weight:700;font-size:15px;color:var(--ink2)}
  .uv-feats li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--amber);color:var(--on-acc);display:grid;place-items:center;font-size:12px;font-weight:900}
  .uv-safe{display:inline-flex;align-items:center;gap:7px;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:4px}

  
  .logos{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center;background:var(--card2);border:1px solid var(--line);border-radius:32px;padding:28px}
  .lp{text-align:center}
  .lp .big{width:136px;height:136px;border-radius:31px;margin:0 auto 14px;box-shadow:0 18px 34px -14px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .lp .big.pop{transform:scale(.82)}
  .lp .lbl{font-weight:800;font-size:16px}
  .lp .nm{color:var(--muted);font-size:13px;font-weight:700;margin-top:3px;text-transform:capitalize}
  .lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:12px}
  .lgrid:not(.all) button:nth-child(n+13){display:none}
  .lgrid button{padding:0;border:0;background:none;cursor:pointer;border-radius:22%;aspect-ratio:1;transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
  .lgrid button img{width:100%;height:100%;border-radius:22%;box-shadow:0 6px 14px -8px rgba(0,0,0,.45)}
  .lgrid button:hover{transform:translateY(-3px) scale(1.05)}
  .lgrid button.on{box-shadow:0 0 0 3px var(--card2),0 0 0 6px var(--amber)}
  .lgrid button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--card2),0 0 0 6px var(--ink)}
  .lmore{margin-top:18px}

  
  .tpanel{position:relative;overflow:hidden;border-radius:36px;padding:40px 0 30px;color:#fff;text-align:center;isolation:isolate;
    box-shadow:0 30px 60px -30px rgba(40,30,10,.55)}
  .tp-bg{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .55s ease}
  .tp-bg.on{opacity:1}
  .tpanel .grab{width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.35);margin:0 auto 18px}
  .tpanel h2{color:#fff;font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.02em}
  .tpanel .tsub{color:rgba(255,255,255,.62);font-weight:700;margin:8px auto 0;max-width:26ch;line-height:1.4}
  .tc-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding:30px calc(50% - 125px) 26px;-webkit-overflow-scrolling:touch}
  .tc-track::-webkit-scrollbar{display:none}
  .tcam{flex:none;width:250px;aspect-ratio:.46;scroll-snap-align:center;border-radius:42px;background:var(--card);
    padding:22px 0 18px;display:flex;flex-direction:column;align-items:center;cursor:pointer;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 24px 44px -20px rgba(0,0,0,.6);
    transform:scale(.88);opacity:.55;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
  .tcam.on{transform:scale(1);opacity:1}
  .tcam i,.tcam b{display:block;background:var(--ph)}
  .tc-top{display:flex;align-items:center;justify-content:space-between;width:82%}
  .tc-top i{width:30px;height:30px;border-radius:50%}
  .tc-top b{width:76px;height:30px;border-radius:15px}
  .tc-view{position:relative;width:100%;aspect-ratio:1;margin:22px 0;background:#000;border-radius:44px;overflow:hidden;
    display:grid;place-items:center;background-size:cover;background-position:center}
  .tc-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .tc-view video.mirror{transform:scaleX(-1)}
  .tc-view .hint{color:rgba(255,255,255,.28);font-size:12.5px;font-weight:700;padding:0 20px;line-height:1.4}
  .tc-view .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
  .tc-view .flash.go{animation:tflash .45s ease-out}
  @keyframes tflash{0%{opacity:.9}100%{opacity:0}}
  
  .tc-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3;opacity:0;transition:opacity .25s}
  .tc-ring path{fill:none;stroke:#ffc21a;stroke-width:5px;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;
    filter:drop-shadow(0 0 6px rgba(255,194,26,.9))}
  .tcam.rec .tc-ring{opacity:1}
  .tcam.rec .tc-ring path{animation:tcrec 10s linear forwards}
  @keyframes tcrec{to{stroke-dashoffset:0}}
  .tc-rec{position:absolute;top:12px;left:50%;translate:-50% 0;z-index:4;display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
    background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .2s;pointer-events:none}
  .tc-rec i{width:7px;height:7px;border-radius:50%;background:#ff3b30;animation:recb 1s ease-in-out infinite}
  .tcam.rec .tc-rec{opacity:1}
  .tc-shut{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .tc-shut span{transition:transform .25s}
  .tcam.rec .tc-shut span{transform:scale(.78)}
  .tc-view .tc-play{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
  .tc-view .tc-play.mirror{transform:scaleX(-1)}
  
  .tc-flip{width:30px;height:30px;border-radius:50%;border:0;padding:0;background:var(--ph);display:grid;place-items:center;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:background .2s,transform .12s}
  .tc-flip:hover{background:rgba(255,255,255,.28)}
  .tc-flip:active{transform:scale(.88)}
  .tc-flip:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .tc-flip svg{width:16px;height:16px;fill:none;stroke:rgba(255,255,255,.9);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .tc-flip.spin svg{animation:tflip .45s ease}
  @keyframes tflip{to{transform:rotate(180deg)}}
  .tc-ctl{display:flex;align-items:center;justify-content:space-between;width:74%}
  .tc-ctl i{width:30px;height:30px;border-radius:50%}
  .tc-shut{width:66px;height:66px;border-radius:50%;background:var(--ring);padding:5px;border:0;cursor:pointer;
    transition:transform .12s;-webkit-tap-highlight-color:transparent}
  .tc-shut:active{transform:scale(.9)}
  .tc-shut span{display:block;width:100%;height:100%;border-radius:50%;background:#fff;border:3px solid rgba(20,20,20,.55)}
  .tc-bot{display:flex;align-items:center;gap:10px;margin-top:auto}
  .tc-bot i{width:26px;height:26px;border-radius:8px}
  .tc-bot b{width:62px;height:16px;border-radius:8px}
  .tname{font-weight:800;font-size:18px}
  .tdots{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:14px auto 20px;max-width:340px;padding:0 16px}
  .tdots button{width:24px;height:24px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--ring);
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);transition:transform .15s}
  .tdots button.on{transform:scale(1.2);box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 0 4px #fff}
  .tdots button:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .tactions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;padding:0 16px}
  .tnav{width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.16);color:#fff;font-size:22px;font-weight:800;
    display:grid;place-items:center;transition:background .15s}
  .tnav:hover{background:rgba(255,255,255,.28)}
  .btn-glass{color:#fff;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 8px 18px -10px rgba(0,0,0,.5)}
  .btn-glass:hover{background:rgba(255,255,255,.28);transform:translateY(-2px)}
  .btn-glass:active{transform:translateY(2px)}
  .tmsg{min-height:20px;margin:12px 16px 0;color:rgba(255,255,255,.75);font-size:13px;font-weight:700}

  
  .ck-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .ck{position:relative;background:var(--card2);border:1px solid var(--line);border-radius:24px;padding:22px 20px;transition:transform .2s,box-shadow .2s}
  .ck:hover{transform:translateY(-4px);box-shadow:0 18px 36px -24px rgba(150,110,30,.55)}
  .ck .ci{position:relative;width:56px;height:56px;border-radius:17px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;
    margin-bottom:16px;box-shadow:0 8px 16px -10px rgba(120,90,20,.35)}
  .ck .ci svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ck .ci svg .x{stroke:#e5484d;stroke-width:2.6}
  .ck .ok{position:absolute;right:-7px;bottom:-7px;width:22px;height:22px;border-radius:50%;background:#22c55e;color:#fff;
    font-size:12px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 3px var(--card2)}
  .ck h3{font-size:17px;margin:0 0 6px;line-height:1.25}
  .ck p{margin:0;color:var(--ink2);font-size:14px;line-height:1.5}
  .ck.hl{background:linear-gradient(160deg,var(--acc-tint),var(--acc-hi));border-color:var(--acc-hi);box-shadow:0 18px 36px -22px rgba(var(--acc-dd-rgb),.7)}
  .ck.hl .ci{background:linear-gradient(180deg,var(--acc-hi),var(--amber));border:0;box-shadow:0 3px 0 var(--amber-dd),inset 0 1px 0 rgba(255,255,255,.6)}
  .ck.hl .ci b{font-size:32px;font-weight:900;color:var(--on-acc);line-height:1}
  .ck.hl .ok{box-shadow:0 0 0 3px var(--acc-hi)}
  .ck-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:26px auto 0;font-weight:800;color:var(--ink2);font-size:15px;text-align:center}
  .ck-note a{color:#0068FF;text-decoration:underline;text-underline-offset:3px}

  
  .frame-layout{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:44px;align-items:center;max-width:1000px;margin:auto}
  .frame-preview{position:relative;aspect-ratio:1;background:var(--card2);border-radius:30px;overflow:hidden;box-shadow:0 20px 45px -26px rgba(150,110,30,.5)}
  .frame-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .frame-preview #frameOverlay{object-fit:fill;pointer-events:none}
  .frame-preview #frameOverlay[hidden]{display:none}
  .widget-phone{width:286px;max-width:100%;margin:auto;padding:44px 20px 25px;border:8px solid #241a20;border-radius:42px;position:relative;background:linear-gradient(155deg,#ffe1ed,#e1d7fb 55%,#b8cee9);box-shadow:0 24px 45px -24px rgba(73,42,70,.5);color:#3d3050;text-align:center}
  .widget-phone::before{content:"";position:absolute;top:10px;left:50%;translate:-50% 0;width:85px;height:22px;background:#241a20;border-radius:20px}
  .widget-date{font-size:13px;font-weight:800;margin-bottom:4px}
  .widget-clock{font-size:46px;line-height:1.1;font-weight:800;letter-spacing:-2px;margin-bottom:24px}
  .widget-phone .frame-preview{width:82%;margin:auto;border-radius:20px;box-shadow:0 8px 20px rgba(80,43,83,.12)}
  .widget-caption{font-size:12px;font-weight:800;margin:8px 0 24px}
  .widget-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .widget-apps span{display:grid;place-items:center;aspect-ratio:1;border-radius:13px;background:rgba(255,255,255,.55);font-size:23px}
  .widget-dock{display:flex;justify-content:space-around;background:rgba(255,255,255,.35);padding:12px;border-radius:23px;margin-top:26px;font-size:24px}
  .widget-phone::after{content:"";display:block;width:85px;height:4px;background:#3d3050;border-radius:5px;margin:18px auto -10px}
  .frame-label{margin:0 0 16px;font-weight:900;color:var(--ink)}
  .frame-label span{display:block;color:var(--muted);font-size:14px;font-weight:700;margin-top:4px}
  .frame-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .frame-options button{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:10px 8px;background:var(--card2);border:2px solid var(--line);border-radius:18px;color:var(--ink);font:800 12px var(--font);cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
  .frame-options button[aria-pressed="true"]{border-color:var(--amber);background:var(--acc-tint);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.14)}
  .frame-options button:hover{transform:translateY(-2px)}
  .frame-options button[hidden]{display:none}
  .frame-options button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  .frame-options img,.frame-none{width:100%;max-width:90px;aspect-ratio:1;object-fit:contain}
  .frame-none{display:grid;place-items:center;font-size:42px;color:var(--muted)}
  .frame-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
  .frame-actions .btn{font-size:14px;padding:13px 18px}
  .frame-note{font-size:13px;color:var(--ink2);margin:14px 0 0}
  .frame-status{font-size:14px;font-weight:800;min-height:22px;margin:10px 0 0;color:var(--ink2)}
  @media(max-width:880px){.frame-layout{grid-template-columns:1fr;gap:24px}.frame-preview{width:min(100%,360px);margin:auto}.frame-controls{max-width:460px;width:100%;margin:auto}.frame-label{text-align:center}.frame-actions{justify-content:center}}

  
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:center;max-width:1000px;margin:0 auto}
  .plan{position:relative;background:var(--card2);border:1px solid var(--line);border-radius:30px;padding:26px 24px 24px;
    display:flex;flex-direction:column;box-shadow:0 14px 34px -24px rgba(150,110,30,.5);transition:transform .25s,box-shadow .25s}
  .plan:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(150,110,30,.55)}
  .plan .ptop{display:flex;align-items:center;gap:12px;margin-bottom:20px}
  .plan .pico{width:46px;height:46px;border-radius:12px;flex:none;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
  .plan .pname{font-weight:900;font-size:18px;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
  .plan .pdesc{font-size:13px;color:var(--muted);font-weight:700;line-height:1.3}
  .plan .price{display:flex;align-items:flex-start;font-weight:900;font-size:clamp(40px,4.6vw,50px);line-height:1;letter-spacing:-.045em;color:var(--ink)}
  .plan .price .cur{font-size:.42em;margin:.12em 0 0 2px;letter-spacing:0}
  .plan .price .per{font-size:15px;color:var(--muted);font-weight:800;align-self:flex-end;margin:0 0 .25em 6px;letter-spacing:0}
  .plan .was{display:flex;align-items:center;gap:8px;min-height:24px;margin-top:10px;font-size:14px;font-weight:700;color:var(--muted)}
  .plan .was s{opacity:.8}
  .plan .save{background:#e3f7e8;color:#15803d;font-size:12px;font-weight:900;padding:3px 9px;border-radius:999px}
  .plan ul{list-style:none;margin:18px 0 22px;padding:18px 0 0;display:grid;gap:11px;border-top:1px dashed #e6d6b0}
  .plan li{display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:700;color:var(--ink2)}
  .plan li::before{content:"✓";flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
    background:var(--amber);color:var(--on-acc);font-size:11px;font-weight:900}
  .plan .btn{margin-top:auto}
  .plan .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:#fff;
    font-size:12px;font-weight:800;padding:6px 14px;border-radius:999px}

  
  .plan.hot{background:radial-gradient(130% 75% at 50% 0%,#47330a 0%,#231a07 62%,#1a1406 100%);border:1px solid #6e5214;color:#fff;
    padding:36px 26px 28px;transform:scale(1.04);
    box-shadow:0 0 0 6px rgba(var(--acc-rgb),.14),0 36px 64px -28px rgba(110,72,0,.8)}
  .plan.hot:hover{transform:scale(1.04) translateY(-4px)}
  .plan.hot .shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
  .plan.hot .shine::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:60%;will-change:transform;
    background:linear-gradient(105deg,transparent,rgba(255,214,110,.16),transparent);animation:sheen 5s ease-in-out infinite}
  @keyframes sheen{0%{transform:translateX(0)}60%,100%{transform:translateX(300%)}}
  .plan.hot .badge{background:linear-gradient(180deg,var(--acc-hi),var(--amber));color:var(--on-acc);box-shadow:0 3px 0 var(--amber-dd),0 8px 16px -6px rgba(var(--acc-rgb),.6)}
  .plan.hot .pname{color:#fff}
  .plan.hot .pdesc{color:rgba(255,255,255,.6)}
  .plan.hot .price{color:var(--gold)}
  .plan.hot .price .per,.plan.hot .was{color:rgba(255,255,255,.55)}
  .plan.hot .save{background:rgba(74,222,128,.16);color:#7ee2a0}
  .plan.hot ul{border-top-color:rgba(255,255,255,.14)}
  .plan.hot li{color:rgba(255,255,255,.9)}
  .plan.hot .btn{position:relative;z-index:1}
  @media (prefers-reduced-motion: reduce){ .plan.hot .shine::before{animation:none;opacity:0} }
  .plan .badge .bs{display:none}

  
  .plan-detail{display:none;margin-top:16px;background:var(--card2);border:1px solid var(--line);border-radius:24px;padding:20px;
    box-shadow:0 14px 34px -24px rgba(150,110,30,.5);transition:background .3s,color .3s}
  .plan-detail.dark{background:radial-gradient(130% 90% at 50% 0%,#47330a,#1d1607 72%);border-color:#6e5214;color:#fff}
  .pd-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
  .pd-head b{font-size:18px;font-weight:900}
  .pd-price{font-weight:900;font-size:26px;letter-spacing:-.03em;line-height:1;color:var(--ink);white-space:nowrap}
  .pd-price .cur{font-size:.5em;vertical-align:super;margin-left:1px}
  .pd-price .per{font-size:13px;font-weight:800;color:var(--muted);margin-left:3px;letter-spacing:0}
  .pd-was{display:flex;gap:8px;align-items:center;justify-content:flex-end;min-height:20px;margin-top:6px;font-size:13px;font-weight:700;color:var(--muted)}
  .pd-was .save{background:#e3f7e8;color:#15803d;font-size:11.5px;font-weight:900;padding:2px 8px;border-radius:999px}
  .plan-detail ul{list-style:none;margin:14px 0 18px;padding:14px 0 0;border-top:1px dashed #e6d6b0;display:grid;gap:10px}
  .plan-detail li{display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:700;color:var(--ink2)}
  .plan-detail li::before{content:"✓";flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
    background:var(--amber);color:var(--on-acc);font-size:11px;font-weight:900}
  .plan-detail .btn{width:100%}
  .plan-detail.dark .pd-price{color:var(--gold)}
  .plan-detail.dark .pd-price .per,.plan-detail.dark .pd-was{color:rgba(255,255,255,.55)}
  .plan-detail.dark .pd-was .save{background:rgba(74,222,128,.16);color:#7ee2a0}
  .plan-detail.dark ul{border-top-color:rgba(255,255,255,.14)}
  .plan-detail.dark li{color:rgba(255,255,255,.9)}
  .plans-note{text-align:center;color:var(--muted);font-weight:700;font-size:14px;margin:26px 0 0}
  .plans-note a{color:var(--amber-d);text-decoration:underline;text-underline-offset:3px}

  
  .tmarq{position:relative;overflow:hidden;margin:0 -22px;padding:10px 0 16px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .ttrack{display:flex;width:max-content;animation:tscroll var(--tdur,40s) linear infinite}
  .tmarq:hover .ttrack,.tmarq.paused .ttrack{animation-play-state:paused}
  .ttrack .tcard{flex:none;width:340px;margin-right:16px;transition:transform .25s}
  .ttrack .tcard:hover{transform:translateY(-4px) rotate(-.6deg)}
  @keyframes tscroll{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion: reduce){
    .ttrack{animation:none}
    .tmarq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  }
  .tcard{background:var(--card2);border:1px solid var(--line);border-radius:24px;padding:22px}
  .tcard .st{color:var(--amber);font-size:14px;letter-spacing:1px;margin-bottom:8px}
  .tcard p{margin:0 0 16px;font-size:15px;color:var(--ink2);line-height:1.55}
  .tcard .who{display:flex;align-items:center;gap:11px}
  .tcard .who img{width:40px;height:40px;border-radius:50%;object-fit:cover}
  .tcard .who b{display:block;font-size:15px;font-weight:800}
  .tcard .who span{font-size:13px;color:var(--muted);font-weight:700}

  
  .cta{padding-top:24px}
  .cta .box{position:relative;overflow:hidden;text-align:center;background:linear-gradient(135deg,var(--acc-hi),var(--amber));border-radius:34px;padding:56px 24px;box-shadow:0 30px 60px -26px rgba(var(--acc-dd-rgb),.7)}
  .cta h2{color:var(--on-acc);font-size:clamp(28px,4.6vw,46px);position:relative}
  .cta p{color:var(--on-acc);font-weight:700;margin:12px auto 26px;max-width:40ch;position:relative}
  .cta .bg-heart{position:absolute;opacity:.3;width:220px;pointer-events:none}
  .cta .bg-heart.l{left:-40px;top:-40px;transform:rotate(-16deg)}
  .cta .bg-heart.r{right:-40px;bottom:-54px;transform:rotate(14deg)}
  .cta .phone-no{display:block;margin-top:16px;color:var(--on-acc);font-weight:800;font-size:14px;position:relative}

  
  .btn-zalo{color:#fff;background:#0068FF;box-shadow:0 4px 0 #0047b3,0 10px 20px -7px rgba(0,80,200,.55)}
  .btn-zalo:hover{transform:translateY(-2px);background:#1a78ff;box-shadow:0 6px 0 #0047b3,0 16px 26px -8px rgba(0,80,200,.55)}
  .btn-zalo:active{transform:translateY(4px);box-shadow:0 1px 0 #0047b3,0 4px 10px -5px rgba(0,80,200,.5)}
  .btn-lg{padding:19px 32px;font-size:18px}
  .zmark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#fff;color:#0068FF;font-size:9.5px;font-weight:900;letter-spacing:-.02em;flex:none}
  .zfloat{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:10px;background:#0068FF;color:#fff;font-weight:800;font-size:14px;padding:9px 18px 9px 9px;border-radius:999px;box-shadow:0 4px 0 #0047b3,0 14px 28px -10px rgba(0,80,200,.6);transition:transform .15s}
  .zfloat:hover{transform:translateY(-2px)}
  .zfloat:active{transform:translateY(3px)}
  .zfloat .zmark{width:36px;height:36px;border-radius:50%;font-size:11px;position:relative}
  .zfloat .zmark::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,255,255,.75);animation:zping 1.8s ease-out infinite}
  @keyframes zping{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.45);opacity:0}}
  @media (prefers-reduced-motion: reduce){ .zfloat .zmark::after{animation:none;opacity:0} }

  footer{padding:40px 0 90px;color:var(--muted);font-size:14px;font-weight:700}
  .foot-in{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
  .foot-links{display:flex;gap:22px;flex-wrap:wrap}
  .foot-links a:hover{color:var(--ink)}

  @media(max-width:880px){
    .nav-links{display:none}
    .hero{padding-top:36px;text-align:center}
    .hero-grid{grid-template-columns:1fr;gap:4px}
    .hero .lead{margin-left:auto;margin-right:auto}
    .hero-actions,.trust{justify-content:center}
    .scene{height:700px;max-width:380px}
    .phone{width:216px}
    .gfeat{grid-template-columns:1fr 1fr;gap:12px}
    .gf{padding:18px}
    .uv{grid-template-columns:1fr;gap:30px;text-align:center}
    .uv-copy>p{margin-left:auto;margin-right:auto}
    .uv-feats{display:inline-grid;text-align:left}
    .uv-phone{width:258px}
    .ck-grid{grid-template-columns:1fr 1fr;gap:12px}
    .vdemo{grid-template-columns:180px 1fr;gap:28px;padding:24px 28px 24px 22px}
    .pv{grid-template-columns:1fr;grid-template-areas:"head" "phone" "ctrl";text-align:center;row-gap:28px}
    .pv-head p{margin-left:auto;margin-right:auto}
    .pv-opts{margin:0 auto}
    .pv-friends,.pv-status{justify-content:center}
    .pv-phone{width:260px}
    .logos{grid-template-columns:1fr;padding:20px;gap:18px}
    .lp{display:flex;align-items:center;gap:16px;text-align:left}
    .lp .big{width:80px;height:80px;border-radius:19px;margin:0}
    .plans{gap:12px}
    .plan{padding:24px 18px 20px}
    .plan.hot{padding:30px 18px 22px;transform:scale(1.03)}
    .plan.hot:hover{transform:scale(1.03) translateY(-4px)}
    .plan .ptop{gap:10px}
    .plan .pico{width:40px;height:40px}
    .plan li{font-size:13.5px}
    .tpanel{border-radius:30px;margin:0 -8px}
  }
  @media(max-width:699px){
    header.nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(var(--cream-rgb),.97)}
    .plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
    .plan,.plan.hot{padding:24px 6px 14px;border-radius:20px;transform:none;text-align:center;cursor:pointer;
      box-shadow:0 8px 20px -16px rgba(150,110,30,.6);-webkit-tap-highlight-color:transparent}
    .plan:hover,.plan.hot:hover{transform:none}
    .plan .ptop{flex-direction:column;gap:6px;margin-bottom:10px}
    .plan .pico{width:34px;height:34px;border-radius:9px}
    .plan .pname{font-size:13.5px;white-space:nowrap}
    .ttrack .tcard{width:272px;margin-right:12px}
    .plan .pdesc,.plan ul,.plan .btn,.plan .was{display:none}
    .plan .price{display:block;font-size:19px;letter-spacing:-.03em;white-space:nowrap}
    .plan .price .cur{font-size:.55em;vertical-align:super;margin:0 0 0 1px}
    .plan .price .per{display:block;margin:5px 0 0;font-size:11.5px}
    .plan .badge{font-size:10px;padding:4px 9px;top:-11px}
    .plan .badge .bl{display:none}
    .plan .badge .bs{display:inline}
    .plan.sel{border-color:transparent;box-shadow:0 0 0 3px var(--amber),0 10px 22px -14px rgba(var(--acc-dd-rgb),.6)}
    .plan.hot.sel{box-shadow:0 0 0 3px var(--amber),0 0 0 7px rgba(var(--acc-rgb),.22)}
    .plan:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
    .plan-detail{display:block}

    
    .pv{grid-template-columns:128px 1fr;grid-template-areas:"head head" "opts opts" "phone fr" "phone st";
      column-gap:18px;row-gap:16px;align-items:start;text-align:left}
    .pv-ctrl{display:contents}
    .pv-head{text-align:center}
    .pv-head h2{font-size:28px}
    .pv-head p{font-size:14.5px;margin-top:10px}
    .pv-opts{grid-area:opts;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:none;margin:0}
    .pv-opt{position:relative;flex-direction:column;gap:6px;padding:12px 4px 10px;border-radius:16px;text-align:center}
    .pv-opt:hover{transform:none}
    .pv-opt .oi{width:34px;height:34px;font-size:16px;border-radius:11px}
    .pv-opt b{font-size:13px;white-space:nowrap}
    .pv-opt small{display:none}
    .pv-opt .tag{position:absolute;top:-9px;right:-3px;margin:0;font-size:9px;padding:2px 7px}
    .pv-phone{grid-area:phone;width:128px;border-radius:24px;padding:5px;justify-self:start}
    .pv-scr{border-radius:20px;padding:16px 7px 8px}
    .pv-ic{width:20px;height:20px}
    .pv-ic svg{width:10px;height:10px}
    .pv-who{font-size:9px;padding:4px 8px}
    .pv-av{width:20px;height:20px}
    .pv-photo{margin:12px 0 8px;border-radius:16px}
    .pv-photo .lockb{width:18px;height:18px;font-size:9px;left:6px;top:6px}
    .pv-meta{font-size:9px}
    .pv-pill{margin-top:9px;font-size:9.5px;padding:5px 9px;gap:4px}
    .pv-mid{padding:3px 6px;gap:6px}
    .pv-mid svg{width:10px;height:10px}
    .pv-shut{width:22px;height:22px;border-width:2px}
    .pv-badge b{font-size:7px;top:-6px;right:-7px}
    .pv-friends{grid-area:fr;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 6px;margin:4px 0 0;justify-items:center}
    .pv-status{grid-area:st;margin:0;font-size:13px;line-height:1.4;justify-content:flex-start;align-items:flex-start}
    .pv-status i{margin-top:5px}
    .cta .btn-lg{font-size:15px;padding:15px 20px;text-align:center}
  }
  @media(max-width:560px){
    section{padding:50px 0}
    .uv-phone{width:240px}
    .scene{height:560px;--sticker-out-x:4px;--sticker-out-y:18px}
    .phone{width:156px;border-radius:30px;padding:7px}
    .phone .app{border-radius:23px}
    .phone::after{top:10px;width:62px;height:18px}
    .scene{--fan-spread:24px;--fan-angle:9deg}
    .p1{width:78px;height:94px;top:0;left:3%}
    .p2{width:78px;height:94px;bottom:0;right:3%}
    .sticker{width:64px;right:3%;top:2%;z-index:7}
    .heartpop{width:50px;left:5%;bottom:3%;z-index:7}
    .gf .gi{width:42px;height:42px;border-radius:13px}
    .gf h3{font-size:15.5px}
    .gf p{font-size:13px}
    .lgrid{grid-template-columns:repeat(4,1fr)}
    .ck{padding:16px 14px;border-radius:20px}
    .ck .ci{width:44px;height:44px;border-radius:13px;margin-bottom:12px}
    .ck .ci svg{width:22px;height:22px}
    .ck.hl .ci b{font-size:26px}
    .ck .ok{width:18px;height:18px;font-size:10px;right:-5px;bottom:-5px}
    .ck h3{font-size:15px}
    .ck p{font-size:12.5px;line-height:1.45}
    .ck-note{font-size:13.5px}
    .plan{padding:26px 20px 20px}
    .tc-track{padding-left:calc(50% - 112px);padding-right:calc(50% - 112px);gap:14px}
    .tcam{width:224px;border-radius:38px}
    .tnav{display:none}
    .vdemo{grid-template-columns:124px 1fr;gap:16px;padding:14px 16px 14px 14px;border-radius:26px;margin-top:22px}
    .vd-phone{border-radius:22px;padding:5px}
    .vd-phone video{border-radius:18px}
    .vd-sound{width:30px;height:30px;font-size:12px;right:8px;bottom:8px}
    .vd-rec{font-size:11px;padding:4px 9px;margin-bottom:9px}
    .vd-copy h3{font-size:20px}
    .vd-copy h3 br{display:none}
    .vd-copy p{font-size:13px;margin:7px 0 12px;line-height:1.45}
    .vd-chips{display:none}
    .vd-copy .btn{padding:10px 15px;font-size:13px}
    .hero-actions{gap:10px}
    .hero-actions .btn{padding:15px 18px;font-size:15px}
    .phone-pricing-screen{padding:22px 8px 10px}
    .pps-title{font-size:16px;margin:1px 0}
    .pps-sub{font-size:9px;display:none}
    .pps-cards{gap:5px;margin:3px 0}
    .pps-card{padding:5px 6px;border-radius:10px}
    .pps-card-pname{font-size:9.5px}
    .pps-card-price{font-size:13.5px;line-height:1.1}
    .pps-card-unit{font-size:8.5px}
    .pps-badge{font-size:7px;padding:1px 6px;top:-6px}
    .pps-card-note{font-size:8px}
    .pps-footer-text{font-size:8.5px}
    .pps-footer-phone{font-size:10.5px;font-weight:800}
    .zfloat .zt{display:none}
    .zfloat{padding:9px}
  }

  
  html.theming body,html.theming body *:not(#glbg){transition:background-color .5s ease,border-color .5s ease,color .5s ease,box-shadow .5s ease,fill .5s ease,stroke .5s ease!important}
  
  @supports (background:color-mix(in srgb,red,blue)){
    .plan.hot{background:radial-gradient(130% 75% at 50% 0%,color-mix(in srgb,var(--amber) 26%,#140f06) 0%,color-mix(in srgb,var(--amber) 9%,#120e07) 62%,#110d07 100%);
      border-color:color-mix(in srgb,var(--amber) 40%,#1a1406)}
    .plan-detail.dark{background:radial-gradient(130% 90% at 50% 0%,color-mix(in srgb,var(--amber) 26%,#140f06),color-mix(in srgb,var(--amber) 8%,#110d07) 72%);
      border-color:color-mix(in srgb,var(--amber) 40%,#1a1406)}
    .vdemo{background:radial-gradient(90% 130% at 100% 0%,color-mix(in srgb,var(--amber) 32%,#140f06) 0%,color-mix(in srgb,var(--amber) 11%,#110d07) 46%,#0f0c07 100%)}
  }

  
  .activity-ticker-wrap {
    margin: -10px 0 32px 0;
    position: relative;
    z-index: 10;
  }
  .activity-ticker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--card2);
    border: 1.5px solid var(--line);
    padding: 7px 16px;
    border-radius: 999px;
    box-shadow: 0 6px 18px -4px rgba(36,26,7,.08);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    max-width: 100%;
  }
  .at-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34,197,94,.12);
    color: #16a34a;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  .at-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    animation: atPulse 1.6s infinite;
  }
  @keyframes atPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: .5; }
  }
  .at-content {
    transition: opacity .3s, transform .3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .at-plan {
    color: var(--amber-d);
    font-weight: 800;
  }

  
  .compare-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 22px;
    margin-top: 36px;
    align-items: stretch;
  }
  .compare-col {
    border-radius: 28px;
    padding: 30px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .compare-free {
    background: var(--card);
    border: 1.5px solid var(--line);
    opacity: .92;
  }
  .compare-free h3 {
    color: var(--muted);
    font-size: 22px;
    margin-bottom: 6px;
  }
  .compare-gold {
    background: radial-gradient(130% 90% at 50% 0%, #2e230b 0%, #171206 100%);
    color: #fffdf6;
    border: 2px solid var(--amber);
    box-shadow: 0 20px 44px -12px rgba(255,176,0,.35), 0 0 30px rgba(255,176,0,.2);
  }
  .compare-gold h3 {
    color: #ffd45a;
    font-size: 24px;
    margin-bottom: 6px;
  }
  .compare-gold-badge {
    position: absolute;
    top: -12px;
    right: 24px;
    background: linear-gradient(135deg, #ffd45a, #ffb000);
    color: #241a07;
    font-size: 11px;
    font-weight: 900;
    padding: 3px 12px;
    border-radius: 999px;
    letter-spacing: .5px;
    box-shadow: 0 4px 12px rgba(255,176,0,.45);
  }
  .compare-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .compare-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.35;
  }
  .compare-free .ci-icon {
    color: #ef4444;
    font-size: 15px;
    margin-top: 2px;
    flex-shrink: 0;
  }
  .compare-gold .ci-icon {
    color: #ffd45a;
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
  }
  .compare-list b {
    display: block;
    font-weight: 800;
  }
  .compare-free b { color: var(--ink); }
  .compare-gold b { color: #fffdf6; }
  .compare-list span {
    font-size: 13px;
    font-weight: 600;
  }
  .compare-free span { color: var(--muted); }
  .compare-gold span { color: rgba(255,253,246,.75); }

  
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 840px;
    margin: 32px auto 0;
  }
  .faq-item {
    background: var(--card2);
    border: 1.5px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
  }
  .faq-item[open] {
    border-color: var(--amber);
    box-shadow: 0 8px 24px -6px rgba(255,176,0,.2);
  }
  .faq-q {
    padding: 18px 22px;
    font-size: 16.5px;
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    user-select: none;
    list-style: none;
  }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-q i {
    color: var(--amber-d);
    font-size: 14px;
    transition: transform .25s ease;
  }
  .faq-item[open] .faq-q i {
    transform: rotate(180deg);
  }
  .faq-a {
    padding: 0 22px 18px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink2);
    line-height: 1.6;
    border-top: 1px dashed var(--line);
    margin-top: 4px;
    padding-top: 14px;
  }

  
  .theme-float-btn {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 90;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card2);
    color: var(--amber-d);
    border: 2px solid var(--line);
    box-shadow: 0 6px 20px -4px rgba(36,26,7,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
  }
  .theme-float-btn:hover {
    transform: scale(1.08) rotate(15deg);
    border-color: var(--amber);
    box-shadow: 0 8px 24px -4px rgba(255,176,0,.35);
  }
  .theme-float-popover {
    position: fixed;
    left: 18px;
    bottom: 70px;
    z-index: 95;
    background: rgba(36,26,7,.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255,176,0,.4);
    border-radius: 20px;
    padding: 12px 14px;
    box-shadow: 0 16px 36px -6px rgba(0,0,0,.5), 0 0 24px rgba(255,176,0,.25);
    display: none;
    flex-direction: column;
    gap: 8px;
    width: 200px;
    animation: locketToastEnter .3s ease forwards;
  }
  .theme-float-popover.open {
    display: flex;
  }
  .theme-float-title {
    color: #ffd45a;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 2px;
    text-align: center;
  }
  .theme-float-dots {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }
  .theme-dot-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.4);
    cursor: pointer;
    transition: transform .15s, border-color .15s;
    padding: 0;
  }
  .theme-dot-btn:hover, .theme-dot-btn.active {
    transform: scale(1.25);
    border-color: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,.6);
  }

  @media (max-width: 768px) {
    .compare-grid { grid-template-columns: 1fr; gap: 16px; }
    .theme-float-btn { left: 14px; bottom: 14px; width: 40px; height: 40px; font-size: 16px; }
    .theme-float-popover { left: 14px; bottom: 62px; }
  }

  .me-1 { margin-right: 0.3em !important; }
  .ms-1 { margin-left: 0.3em !important; }
  .me-2 { margin-right: 0.5em !important; }
  .ms-2 { margin-left: 0.5em !important; }
  .text-warning { color: #f59e0b !important; }
  .text-danger { color: #ef4444 !important; }
  .text-success { color: #10b981 !important; }
  .text-info { color: #06b6d4 !important; }

.site-footer{padding:64px 0 42px;background:linear-gradient(180deg,transparent,rgba(var(--acc-rgb),.08));border-top:1px solid var(--line);color:var(--ink2);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:36px;border-bottom:1px dashed var(--line)}
.foot-brand-col .brand{font-size:20px;margin-bottom:12px;display:inline-flex}
.foot-brand-col .brand b{color:var(--amber-d);font-weight:900}
.foot-desc{color:var(--muted);line-height:1.6;margin:0 0 16px;font-weight:600;max-width:340px}
.foot-status{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;background:var(--card2);border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:800;color:var(--ink)}
.status-dot{width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.18)}
.foot-col h4{font-size:15px;font-weight:900;color:var(--ink);margin:0 0 14px;letter-spacing:-.01em}
.foot-list,.foot-badges{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-weight:700}
.foot-list a{color:var(--muted);text-decoration:none;transition:color .15s,transform .15s;display:inline-block}
.foot-list a:hover{color:var(--ink);transform:translateX(3px)}
.foot-badges li{color:var(--muted);font-size:13.5px;display:flex;align-items:center;gap:6px}
.foot-support{margin-top:14px;display:inline-flex;align-items:center}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:24px;color:var(--muted);font-size:13px;font-weight:700}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap}
.foot-legal a{color:var(--muted);text-decoration:none}
.foot-legal a:hover{color:var(--ink)}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;gap:24px}.foot-bottom{flex-direction:column;text-align:center}}

.frame-top-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.frame-top-bar .frame-label{margin:0}
.frame-cats{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.fc-btn{border:0;background:transparent;color:var(--ink2);font:800 12.5px var(--font);padding:6px 13px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.fc-btn.on{background:var(--amber);color:var(--on-acc);box-shadow:0 2px 6px rgba(var(--acc-rgb),.25)}
.frame-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:248px;align-content:start}
.frame-options button.fp-hide{display:none!important}
.frame-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:8px 12px;background:var(--card);border:1px solid var(--line);border-radius:999px}
.fp-nav{border:1px solid var(--line);background:var(--card2);color:var(--ink);font:800 13px var(--font);padding:6px 14px;border-radius:999px;cursor:pointer;transition:transform .15s,background .15s}
.fp-nav:hover:not(:disabled){background:var(--acc-tint);border-color:var(--amber)}
.fp-nav:disabled{opacity:.4;cursor:not-allowed}
.fp-info{font:800 13px var(--font);color:var(--ink2)}

.studio-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center}
.studio-phone{display:flex;justify-content:center}
.studio-screen{width:300px;height:580px;border-radius:44px;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.25),0 0 0 10px #1c1c1e,0 0 0 12px #2c2c2e;position:relative;overflow:hidden;display:flex;flex-direction:column}
.studio-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.studio-cam-ui{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:16px 16px 18px;pointer-events:none}
.studio-notch{width:90px;height:22px;background:#000;border-radius:20px;margin:0 auto 6px}
.studio-top-bar{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:13px;font-weight:700}
.studio-pill-wrap{margin-top:auto;margin-bottom:20px;display:flex;justify-content:center}
.studio-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;color:#fff;font:800 13.5px/1.3 var(--font);background:linear-gradient(135deg,#ff5f6d,#ffc371);box-shadow:0 6px 20px rgba(0,0,0,.35);max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;transition:transform .2s ease,background .3s ease}
.studio-pill span{overflow:hidden;text-overflow:ellipsis}
.studio-bottom-bar{display:flex;justify-content:space-around;align-items:center;color:#fff;font-size:20px}
.studio-shutter{width:54px;height:54px;border-radius:50%;border:4px solid #fff;display:flex;align-items:center;justify-content:center}
.studio-shutter-inner{width:42px;height:42px;border-radius:50%;background:#ffb000}
.studio-ctrl{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:26px 28px}
.studio-inputs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.studio-group label{display:block;font-size:13px;font-weight:800;color:var(--ink2);margin-bottom:6px}
.studio-group input{width:100%;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font:700 14px var(--font);outline:none;box-sizing:border-box}
.studio-group input:focus{border-color:var(--amber)}
.studio-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sp-btn{border:1px solid var(--line);background:var(--card2);color:var(--ink);padding:8px 14px;border-radius:999px;font:700 13px var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.sp-btn:hover,.sp-btn.active{border-color:var(--amber);background:var(--amber);color:var(--on-acc);transform:scale(1.03)}
@media(max-width:880px){
  .studio-grid{grid-template-columns:1fr;gap:28px}
  .studio-inputs{grid-template-columns:1fr}
  .hiw-grid{grid-template-columns:1fr;gap:18px}
  .status-bar-grid{grid-template-columns:1fr;gap:12px}
  .compare-grid{grid-template-columns:1fr;gap:18px}
}

.hiw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.hiw-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px 24px;position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow-card)}
.hiw-num{width:42px;height:42px;border-radius:50%;background:var(--amber);color:var(--on-acc);display:flex;align-items:center;justify-content:center;font:900 18px var(--font);margin-bottom:16px;box-shadow:0 4px 12px rgba(var(--acc-rgb),.3)}
.hiw-card h3{font-size:18px;font-weight:900;color:var(--ink);margin:0 0 10px}
.hiw-card p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 16px;font-weight:600}
.hiw-badge{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--amber-d)}

.status-bar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.sb-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 22px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-card)}
.sb-icon{width:44px;height:44px;border-radius:14px;background:var(--acc-tint);color:var(--amber-d);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.sb-body{flex:1}
.sb-title{font-size:14px;font-weight:900;color:var(--ink);margin-bottom:3px}
.sb-desc{font-size:12.5px;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:6px}

.showcase-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:28px}
.sc-card{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-card);transition:transform .22s ease,box-shadow .22s ease;display:flex;flex-direction:column}
.sc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--amber)}
.sc-img-wrap{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#000}
.sc-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.sc-card:hover .sc-img-wrap img{transform:scale(1.05)}
.sc-tag{position:absolute;bottom:10px;left:10px;background:rgba(20,20,20,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.15);display:inline-flex;align-items:center}
.sc-info{padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.sc-info b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.sc-info span{font-size:12px;font-weight:600;color:var(--muted)}
@media(max-width:1100px){.showcase-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.showcase-grid{grid-template-columns:repeat(2,1fr);gap:14px}}

@media(max-width:480px){
  .wrap{padding:0 16px}
  .nav-in{height:60px}
  .brand{font-size:19px;gap:8px}
  .brand img{width:30px;height:30px}
  .nav-cta .btn-cream{display:none}
  .nav-cta .btn-sm{padding:8px 14px;font-size:13px}
  .hero-actions .btn{width:100%;justify-content:center}
  .activity-ticker{font-size:12px;padding:6px 12px;gap:8px;max-width:100%}
  .at-badge{font-size:10px;padding:2px 7px}
  .at-content{font-size:12px}
  .studio-screen{width:min(100%,264px);height:490px;border-radius:36px;box-shadow:0 16px 36px rgba(0,0,0,.25),0 0 0 6px #1c1c1e,0 0 0 8px #2c2c2e}
  .studio-notch{width:75px;height:18px;margin:0 auto 4px}
  .studio-top-bar{font-size:11.5px}
  .studio-pill{font-size:12px;padding:7px 14px}
  .studio-ctrl{padding:20px 16px;border-radius:22px}
  .studio-presets{gap:6px}
  .sp-btn{padding:7px 11px;font-size:12px}
  .widget-phone{width:min(100%,264px);padding:32px 14px 18px;border-width:6px;border-radius:36px}
  .widget-clock{font-size:38px;margin-bottom:16px}
  .widget-phone .frame-preview{width:85%}
  .widget-apps span{font-size:18px;border-radius:10px}
  .widget-dock{font-size:19px;padding:9px;margin-top:18px;border-radius:18px}
  .frame-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:auto}
  .frame-options button{padding:8px 4px;font-size:11px;border-radius:14px}
  .frame-actions .btn{width:100%;justify-content:center}
  .showcase-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .sc-info{padding:10px 12px}
  .sc-info b{font-size:13px}
  .sc-info span{font-size:11px}
  .sc-tag{font-size:10px;padding:3px 8px;bottom:8px;left:8px}
  .compare-col{padding:22px 18px;border-radius:22px}
  .hiw-card{padding:22px 18px;border-radius:20px}
  .cta .box{padding:38px 16px;border-radius:24px}
  .cta .btn-lg{width:100%;font-size:15px;padding:14px 18px;justify-content:center}
}
@media(max-width:359px){
  .showcase-grid{grid-template-columns:1fr}
}


.nav-brand-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1.5px solid var(--line, #F0E3C3);
    background: var(--card2, #FFFDF7);
    color: var(--ink, #241A07);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.btn-mobile-menu-toggle:hover,
.btn-mobile-menu-toggle:focus {
    background: var(--amber, #FFB000);
    color: #241A07;
    border-color: var(--amber-d, #D48B00);
}
@media (min-width: 1025px) {
    .btn-mobile-menu-toggle {
        display: none !important;
    }
}
@media (max-width: 1024px) {
    .brand.brand-portal {
        display: none !important;
    }
}
.theme-float-btn,
#btnThemeFloat {
    position: fixed !important;
    left: 16px !important;
    right: auto !important;
    bottom: 16px !important;
    z-index: 99 !important;
}
.theme-float-popover,
#themeFloatPopover {
    position: fixed !important;
    left: 16px !important;
    right: auto !important;
    bottom: 70px !important;
    z-index: 100 !important;
}
.zfloat {
    position: fixed !important;
    right: 16px !important;
    left: auto !important;
    bottom: 16px !important;
    z-index: 99 !important;
}
@media (max-width: 640px) {
    .theme-float-btn,
    #btnThemeFloat {
        left: 14px !important;
        right: auto !important;
        bottom: 14px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    .theme-float-popover,
    #themeFloatPopover {
        left: 14px !important;
        right: auto !important;
        bottom: 62px !important;
    }
    .zfloat {
        right: 14px !important;
        left: auto !important;
        bottom: 14px !important;
    }
}

.hero-upgrade{
  position:relative;
  isolation:isolate;
  overflow:clip;
  padding:76px 0 42px;
  background:radial-gradient(circle at 80% 18%,rgba(255,193,50,.22),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,251,241,0));
}
.hero-upgrade .hero-grid{grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr);gap:52px;align-items:center}
.hero-upgrade .hero-copy{position:relative;z-index:2}
.hero-upgrade .hero-copy .eyebrow{border-color:rgba(255,176,0,.35);background:rgba(255,255,255,.82);backdrop-filter:blur(10px)}
.hero-upgrade h1{font-size:clamp(42px,5.4vw,68px);line-height:1.05;max-width:11ch}
.hero-title-line{display:block;margin-top:8px;font-size:.62em;line-height:1.15;color:var(--ink2);letter-spacing:-.02em}
.hero-upgrade .lead{max-width:46ch;line-height:1.7;margin:24px 0 28px}
.hero-primary-cta{padding-inline:30px}
.hero-assurances{display:flex;flex-wrap:wrap;gap:10px 16px;margin:24px 0 0;padding:0;list-style:none;color:var(--ink2);font-size:13px;font-weight:800}
.hero-assurances li{display:inline-flex;align-items:center;gap:7px}
.hero-assurances i{color:#20a464}
.hero-rating{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--muted);font-size:13px;font-weight:700}
.hero-stars{display:inline-flex;gap:2px;color:var(--amber)}
.hero-reveal-1{--d:.05s}
.hero-reveal-2{--d:.14s}
.hero-reveal-3{--d:.23s}
.hero-reveal-4{--d:.32s}
.hero-reveal-5{--d:.41s}
.hero-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px);z-index:-1}
.hero-glow-one{width:420px;height:420px;right:-170px;top:-190px;background:radial-gradient(circle,rgba(255,193,50,.34),rgba(255,193,50,0) 68%)}
.hero-glow-two{width:300px;height:300px;left:-190px;bottom:-170px;background:radial-gradient(circle,rgba(255,138,61,.16),rgba(255,138,61,0) 70%)}
.hero-playground{position:relative;z-index:3;scroll-margin-top:86px}
.hp-shell{padding:12px;border:1px solid rgba(79,57,15,.18);border-radius:34px;background:rgba(255,255,255,.64);box-shadow:0 32px 80px -34px rgba(92,61,5,.42),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(18px)}
.hp-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px;border-radius:22px;background:rgba(36,26,7,.07)}
.hp-tab{font-family:inherit;min-width:0;border:0;border-radius:17px;background:transparent;color:var(--muted);padding:11px 8px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:900;cursor:pointer;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.hp-tab:hover{color:var(--ink);transform:translateY(-1px)}
.hp-tab.active{color:var(--ink);background:#fff;box-shadow:0 6px 18px -12px rgba(36,26,7,.55)}
.hp-tab:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.hp-stage{display:grid;grid-template-columns:minmax(250px,.92fr) minmax(210px,1.08fr);align-items:center;min-height:530px;border-radius:26px;overflow:hidden;background:linear-gradient(145deg,#fffdf8 0%,#fff3cf 100%)}
.hp-preview{position:relative;min-height:530px;display:grid;place-items:center;padding:34px 16px}
.hp-halo{position:absolute;width:310px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.98) 0 28%,rgba(255,193,50,.42) 48%,rgba(255,193,50,0) 72%);animation:hpGlow 4.8s ease-in-out infinite}
@keyframes hpGlow{50%{transform:scale(1.07);opacity:.72}}
.hp-phone{position:relative;width:222px;aspect-ratio:9/19.5;padding:8px;border:1px solid #665e52;border-radius:40px;background:#0c0b09;box-shadow:0 32px 48px -22px rgba(36,26,7,.62),0 0 0 3px rgba(255,255,255,.8);transform:rotate(-2deg);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s;z-index:2}
.hp-phone::before{content:"";position:absolute;top:14px;left:50%;width:78px;height:21px;border-radius:999px;background:#050505;transform:translateX(-50%);z-index:8}
.hp-screen{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:#17120b;isolation:isolate}
.hp-photo{position:absolute;z-index:2;top:74px;left:10px;right:10px;aspect-ratio:1;border-radius:23px;overflow:hidden;background:#28221a;box-shadow:0 12px 28px -14px rgba(0,0,0,.72)}
.hp-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .18s,transform .7s cubic-bezier(.22,1,.36,1)}
.hp-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,0) 42%,rgba(0,0,0,.32));transition:background .4s}
.hp-status{position:absolute;z-index:4;top:10px;left:15px;right:12px;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:8px;font-weight:800}
.hp-status span:last-child{display:flex;gap:4px;align-items:center}
.hp-caption{position:absolute;z-index:5;left:50%;bottom:12px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%;padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,#ff5f6d,#ffc371);color:#fff;font-size:9px;font-weight:900;box-shadow:0 8px 20px -8px rgba(0,0,0,.58);transition:background .35s,opacity .25s,transform .35s}
.hp-caption span{overflow:hidden;text-overflow:ellipsis}
.hp-private-state{position:absolute;z-index:5;left:50%;bottom:94px;transform:translate(-50%,12px);display:flex;align-items:center;gap:7px;width:max-content;max-width:88%;padding:8px 11px;border-radius:12px;background:rgba(16,14,11,.78);color:#fff;font-size:8px;font-weight:800;opacity:0;transition:opacity .3s,transform .3s;backdrop-filter:blur(12px)}
.hp-frame{position:absolute;z-index:3;left:50%;top:50%;width:100%;height:100%;object-fit:contain;transform:translate(-50%,-50%) scale(.8);opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.hp-controls{position:absolute;z-index:5;left:22px;right:22px;bottom:27px;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:13px}
.hp-controls b{display:block;width:43px;height:43px;border-radius:50%;border:4px solid rgba(255,255,255,.95);box-shadow:inset 0 0 0 2px rgba(0,0,0,.18)}
.hp-stage.is-private .hp-private-state{opacity:1;transform:translate(-50%,0)}
.hp-stage.is-private .hp-caption{opacity:0;transform:translate(-50%,8px)}
.hp-stage.is-theme .hp-phone{transform:rotate(2deg) scale(1.02);box-shadow:0 34px 54px -20px rgba(97,46,150,.5),0 0 0 3px rgba(255,255,255,.85)}
.hp-stage.is-theme .hp-scrim{background:linear-gradient(155deg,rgba(111,57,179,.28),rgba(255,92,122,.08) 45%,rgba(13,10,20,.42))}
.hp-stage.is-theme .hp-caption{opacity:0;transform:translate(-50%,8px)}
.hp-stage.is-frame .hp-frame{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hp-stage.is-frame .hp-caption{background:linear-gradient(135deg,#ff9a9e,#fad0c4);color:#5d2031}
.hp-float{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(36,26,7,.1);border-radius:999px;background:rgba(255,255,255,.92);padding:9px 12px;color:var(--ink);font-size:10px;font-weight:900;box-shadow:0 12px 24px -14px rgba(36,26,7,.65);backdrop-filter:blur(10px);animation:hpFloat 3.6s ease-in-out infinite}
.hp-float i{color:var(--amber-d)}
.hp-float-top{top:78px;right:5px}
.hp-float-bottom{left:3px;bottom:76px;animation-delay:-1.8s}
@keyframes hpFloat{50%{transform:translateY(-7px)}}
.hp-details{position:relative;padding:36px 30px 36px 8px;z-index:2}
.hp-kicker{display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,176,0,.16);color:var(--amber-dd);padding:6px 10px;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.hp-details h2{font-size:clamp(24px,2.5vw,35px);line-height:1.12;margin:16px 0 12px;letter-spacing:-.03em}
.hp-details>p{margin:0;color:var(--ink2);font-size:14px;line-height:1.65}
.hp-name{display:grid;gap:8px;margin-top:22px;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.hp-name[hidden]{display:none}
.hp-name-field{display:flex;align-items:center;gap:9px;border:1px solid rgba(36,26,7,.12);border-radius:15px;background:#fff;padding:0 13px;color:var(--amber-d);box-shadow:0 8px 20px -16px rgba(36,26,7,.6)}
.hp-name-field input{font:800 14px/1 var(--font);min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);padding:13px 0}
.hp-inline-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--amber-dd);font-size:12px;font-weight:900}
.hp-inline-link i{transition:transform .2s}
.hp-inline-link:hover i{transform:translateX(4px)}
.hero-proof-strip{position:relative;z-index:4;border-block:1px solid rgba(240,227,195,.9);background:rgba(255,255,255,.56);backdrop-filter:blur(12px)}
.hero-proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-top:16px;padding-bottom:16px}
.hero-proof-link{display:flex;align-items:center;gap:11px;min-width:0;padding:13px 12px;border:1px solid rgba(79,57,15,.1);border-radius:17px;background:rgba(255,255,255,.72);box-shadow:0 10px 24px -22px rgba(36,26,7,.7);transition:transform .2s,border-color .2s,box-shadow .2s}
.hero-proof-link:hover{transform:translateY(-3px);border-color:rgba(255,176,0,.45);box-shadow:0 16px 28px -20px rgba(36,26,7,.62)}
.hero-proof-link:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.hero-proof-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:13px;background:var(--acc-tint);color:var(--amber-dd);font-size:16px}
.hero-proof-link>span:nth-child(2){min-width:0}
.hero-proof-grid strong,.hero-proof-grid small{display:block}
.hero-proof-grid strong{color:var(--ink);font-size:13px}
.hero-proof-grid small{margin-top:2px;color:var(--muted);font-size:10px;font-weight:700}
.hero-proof-arrow{margin-left:auto;color:var(--amber-d);font-size:11px;transition:transform .2s}
.hero-proof-link:hover .hero-proof-arrow{transform:translateX(3px)}
.landing-mobile-cta{display:none}
.live-status-section{padding:32px 0}
#framePhoto{transition:opacity .18s ease,transform .24s ease}
#framePhoto.frame-photo-changing{opacity:.18;transform:scale(.96)}

@media(max-width:1080px){
  .hero-upgrade .hero-grid{grid-template-columns:minmax(0,.82fr) minmax(480px,1.18fr);gap:28px}
  .hp-stage{grid-template-columns:minmax(230px,.9fr) minmax(190px,1.1fr)}
  .hp-details{padding-right:22px}
}

@media(max-width:880px){
  .hero-upgrade{padding-top:46px}
  .hero-upgrade .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-upgrade h1{max-width:13ch;margin-inline:auto}
  .hero-upgrade .hero-copy{max-width:680px;margin-inline:auto}
  .hero-assurances,.hero-rating{justify-content:center}
  .hero-playground{width:min(100%,650px);margin-inline:auto;text-align:left}
  .hiw-grid{grid-template-columns:1fr;gap:12px}
  .hiw-card{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"num title" "num copy" "num badge";column-gap:14px;row-gap:6px;padding:20px;align-items:start}
  .hiw-num{grid-area:num;margin:0}
  .hiw-card h3{grid-area:title;margin:2px 0 0}
  .hiw-card p{grid-area:copy;margin:0 0 6px}
  .hiw-badge{grid-area:badge;margin-top:0}
  .status-bar-grid{grid-template-columns:1fr;gap:10px;margin-top:0}
  .sb-card{padding:16px 18px}
  .hero-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
  body{padding-bottom:78px}
  .hero-upgrade{padding:34px 0 28px}
  .hero-upgrade h1{font-size:clamp(38px,12vw,54px)}
  .hero-title-line{margin-top:7px;font-size:.58em}
  .hero-upgrade .lead{font-size:15px;line-height:1.65;margin:20px auto 24px}
  .hero-upgrade .hero-actions{display:grid;grid-template-columns:1fr}
  .hero-upgrade .hero-actions .btn{width:100%}
  .hero-assurances{display:grid;grid-template-columns:1fr 1fr;justify-items:start;width:max-content;max-width:100%;margin-inline:auto;font-size:11px}
  .hero-assurances li:last-child{grid-column:1/-1}
  .hero-rating{align-items:flex-start;font-size:11px;text-align:left}
  .hp-shell{padding:8px;border-radius:27px}
  .hp-toolbar{gap:3px;padding:4px;border-radius:18px}
  .hp-tab{flex-direction:column;gap:3px;padding:8px 3px;border-radius:14px;font-size:9px}
  .hp-tab i{font-size:12px}
  .hp-stage{grid-template-columns:1fr;min-height:0}
  .hp-preview{min-height:440px;padding:24px 12px}
  .hp-halo{width:280px}
  .hp-phone{width:190px;border-radius:35px}
  .hp-screen{border-radius:28px}
  .hp-float-top{top:48px;right:4px}
  .hp-float-bottom{left:3px;bottom:54px}
  .hp-details{padding:4px 22px 26px;text-align:center}
  .hp-details h2{font-size:27px}
  .hp-name{text-align:left}
  .hiw-card{grid-template-columns:40px minmax(0,1fr);padding:16px 14px;border-radius:18px;column-gap:12px}
  .hiw-num{width:38px;height:38px;font-size:16px}
  .hiw-card h3{font-size:16px;line-height:1.35}
  .hiw-card p{font-size:13px;line-height:1.5}
  .hiw-badge{font-size:11.5px}
  .live-status-section{padding:20px 0}
  .sb-card{padding:14px;border-radius:17px;gap:12px}
  .sb-icon{width:40px;height:40px;border-radius:12px;font-size:17px}
  .sb-title{font-size:13.5px;line-height:1.35}
  .sb-desc{font-size:11.5px;line-height:1.35}
  .hero-proof-grid{grid-template-columns:1fr;gap:10px;padding-top:14px;padding-bottom:14px}
  .hero-proof-link{width:100%;padding:12px 13px}
  .landing-mobile-cta{position:fixed;z-index:98;left:12px;right:12px;bottom:10px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.42);border-radius:18px;background:linear-gradient(135deg,var(--amber),var(--acc-hi));padding:10px 11px 10px 17px;color:var(--ink);box-shadow:0 16px 30px -12px rgba(82,53,0,.58),inset 0 1px 0 rgba(255,255,255,.62)}
  .landing-mobile-cta span:first-child{display:grid;line-height:1.1}
  .landing-mobile-cta small{font-size:10px;font-weight:800;opacity:.72}
  .landing-mobile-cta strong{margin-top:3px;font-size:15px;font-weight:900}
  .landing-mobile-cta-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:var(--ink);color:#fff}
  .zfloat{bottom:92px !important}
  .theme-float-btn,#btnThemeFloat{bottom:92px !important}
  .theme-float-popover,#themeFloatPopover{bottom:142px !important}
}

@media(prefers-reduced-motion:reduce){
  .hp-halo,.hp-float{animation:none}
  .hp-phone,.hp-background,.hp-caption,.hp-private-state,.hp-frame{transition:none}
}