:root{
      --bg:#ffffff;
      --text:#0b1220;
      --muted:#5b6577;
      --line:#e6eaf2;
      --soft:#f6f8fc;
      --soft2:#fbfcff;
      --accent:#2563EB;

      --r:16px;
      --r2:22px;

      --max:480px;
      --pad:14px;

      --t:180ms;
      --t2:420ms;

      --headerH: 118px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
      padding-top: calc(var(--headerH) + 12px);
    }

    a{color:inherit;text-decoration:none}
    button{font:inherit}
    img{max-width:100%;display:block}

    .app{
      min-height:100%;
      display:flex;
      justify-content:center;
      padding:var(--pad);
      padding-bottom:96px;
    }

    .frame{
      width:100%;
      max-width:var(--max);
    }

    .sr{
      position:absolute !important;
      width:1px;height:1px;
      padding:0;margin:-1px;overflow:hidden;
      clip:rect(0,0,0,0);white-space:nowrap;border:0;
    }

    .sticky{
      position:fixed;
      top:12px;
      left:50%;
      transform:translateX(-50%);
      width: calc(100% - (var(--pad) * 2));
      max-width:var(--max);
      z-index:100;
      background:rgba(255,255,255,.92);
      backdrop-filter:saturate(180%) blur(10px);
      border:1px solid var(--line);
      border-radius:var(--r2);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 10px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .mark{
      width:36px;height:36px;
      border-radius:12px;
      background:var(--accent);
      display:grid;
      place-items:center;
      flex:0 0 auto;
    }

    .mark svg{display:block}
    .logo{
      display:flex;
      flex-direction:column;
      min-width:0;
      line-height:1.05;
    }
    .logo strong{
      font-size:14px;
      letter-spacing:-.02em;
    }
    .logo span{
      color:var(--muted);
      font-size:12px;
      font-weight:500;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:220px;
    }

    .actions{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .iconbtn{
      width:40px;height:40px;
      border-radius:14px;
      border:1px solid var(--line);
      background:var(--bg);
      display:grid;
      place-items:center;
      touch-action:manipulation;
      transition:transform var(--t) ease, border-color var(--t) ease;
    }
    .iconbtn:active{transform:scale(.98)}
    .iconbtn:hover{border-color:#cfd7e6}

    .pill{
      display:flex;
      align-items:center;
      gap:10px;
      border:1px solid var(--line);
      background:var(--soft2);
      border-radius:999px;
      padding:10px 12px;
    }

    .search{
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:10px;
    }
    .search input{
      width:100%;
      border:0;
      outline:0;
      background:transparent;
      color:var(--text);
      font-weight:600;
      letter-spacing:-.01em;
      font-size:13px;
    }
    .kbd{
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
      font-size:12px;
      color:var(--muted);
      border:1px solid var(--line);
      border-radius:999px;
      padding:6px 10px;
      background:var(--bg);
      flex:0 0 auto;
    }

    .section{ margin-top:22px; }

    .hgroup{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--muted);
      font-weight:700;
      font-size:12px;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .dot{
      width:8px;height:8px;
      border-radius:999px;
      background:var(--accent);
      flex:0 0 auto;
    }

    h1,h2,h3{margin:0;letter-spacing:-.03em}
    h1{ font-size:34px; line-height:1.02; }
    h2{ font-size:22px; line-height:1.1; }
    p{margin:0;color:var(--muted);line-height:1.55}

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border-radius:16px;
      padding:13px 14px;
      font-weight:800;
      letter-spacing:-.02em;
      border:1px solid transparent;
      background:var(--accent);
      color:#fff;
      width:100%;
      touch-action:manipulation;
      transition:transform var(--t) ease, filter var(--t) ease;
    }
    .btn:active{transform:scale(.99)}
    .btn:hover{filter:brightness(.98)}
    .btn.secondary{
      background:var(--bg);
      color:var(--text);
      border-color:var(--line);
      font-weight:800;
    }

    .card{
      border:1px solid var(--line);
      background:var(--bg);
      border-radius:var(--r2);
      overflow:hidden;
    }

    .hero{ margin-top:14px; }

    .heroMedia{
      border-radius:var(--r2);
      overflow:hidden;
      border:1px solid var(--line);
      background:var(--soft);
      aspect-ratio: 16 / 11;
      position:relative;
      isolation:isolate;
    }

    .heroMedia img{
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scale(1.02);
    }

    .heroOverlay{
      position:absolute;
      inset:0;
      background:rgba(255,255,255,.62);
      z-index:1;
    }

    .heroBadgeRow{
      position:absolute;
      left:12px;right:12px;
      top:12px;
      z-index:2;
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.9);
      padding:8px 10px;
      font-weight:800;
      font-size:12px;
      letter-spacing:-.01em;
      white-space:nowrap;
    }

    .badge .mini{
      width:10px;height:10px;border-radius:999px;background:var(--accent);
    }

    .heroStats{
      position:absolute;
      left:12px;right:12px;
      bottom:12px;
      z-index:2;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }

    .stat{
      border-radius:18px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.92);
      padding:12px 12px;
    }
    .stat .row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:6px;
    }
    .stat b{ font-size:15px; letter-spacing:-.02em; }
    .stat small{
      display:block;
      color:var(--muted);
      font-weight:600;
      font-size:12px;
    }
    .tag{
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
      font-size:12px;
      font-weight:800;
      letter-spacing:-.01em;
      color:var(--accent);
      background:rgba(37,99,235,.08);
      border:1px solid rgba(37,99,235,.18);
      padding:6px 10px;
      border-radius:999px;
      white-space:nowrap;
    }

    .heroCopy{
      margin-top:14px;
      display:grid;
      gap:12px;
    }

    .heroCopy p{ font-size:14px; }

    .ctaRow{
      display:grid;
      gap:10px;
    }

    .howCards{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
    }

    .step{
      display:grid;
      grid-template-columns:54px 1fr;
      gap:12px;
      padding:14px 14px;
      border-radius:var(--r2);
      border:1px solid var(--line);
      background:var(--bg);
    }

    .stepIcon{
      width:54px;height:54px;
      border-radius:18px;
      border:1px solid var(--line);
      background:var(--soft2);
      display:grid;
      place-items:center;
    }

    .step h3{
      font-size:15px;
      line-height:1.1;
      margin-bottom:6px;
    }
    .step p{ font-size:13px; }

    .dashboard{ padding:14px; }

    .dashTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      border:1px solid var(--line);
      background:var(--soft2);
      padding:8px 10px;
      font-weight:800;
      font-size:12px;
      white-space:nowrap;
    }

    .dashGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      align-items:stretch;
    }

    .metric{
      border:1px solid var(--line);
      border-radius:18px;
      padding:12px;
      background:var(--bg);
    }

    .metric .label{
      color:var(--muted);
      font-weight:700;
      font-size:12px;
      letter-spacing:.02em;
      margin-bottom:10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    .metric .value{
      display:flex;
      align-items:baseline;
      gap:8px;
      margin-bottom:10px;
    }
    .metric .value b{
      font-size:22px;
      letter-spacing:-.03em;
    }
    .metric .value span{
      color:var(--muted);
      font-weight:700;
      font-size:12px;
    }

    .bar{
      height:10px;
      border-radius:999px;
      background:var(--soft);
      border:1px solid var(--line);
      overflow:hidden;
    }

    .bar > i{
      display:block;
      height:100%;
      width:0%;
      background:var(--accent);
      border-radius:999px;
      transition:width 900ms cubic-bezier(.2,.8,.2,1);
    }

    .ringWrap{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .ring{
      width:54px;height:54px;
      flex:0 0 auto;
    }

    .mono{
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
      font-weight:800;
      letter-spacing:-.02em;
    }

    .dashMedia{
      margin-top:12px;
      border-radius:18px;
      border:1px solid var(--line);
      background:var(--soft);
      overflow:hidden;
      aspect-ratio: 16 / 10;
      position:relative;
      display:grid;
      place-items:center;
    }

    .dashMedia img{
      width:100%;
      height:100%;
      object-fit:cover;
      opacity:.92;
    }

    .dashFloating{
      position:absolute;
      inset:auto 12px 12px 12px;
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:10px;
    }

    .miniCard{
      border:1px solid var(--line);
      background:rgba(255,255,255,.92);
      border-radius:16px;
      padding:10px 10px;
      display:grid;
      gap:6px;
    }

    .miniCard b{ font-size:13px; letter-spacing:-.02em; }
    .miniCard span{ color:var(--muted); font-size:12px; font-weight:700; }

    .catalog{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }

    .item{
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      background:var(--bg);
      display:grid;
    }

    .thumb{
      aspect-ratio: 4/3;
      background:var(--soft);
      border-bottom:1px solid var(--line);
      position:relative;
      overflow:hidden;
    }

    .thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scale(1.02);
    }

    .fav{
      position:absolute;
      top:10px;right:10px;
      width:38px;height:38px;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.92);
      display:grid;
      place-items:center;
      touch-action:manipulation;
      transition:transform var(--t) ease;
    }
    .fav:active{transform:scale(.98)}
    .fav[aria-pressed="true"]{
      border-color:rgba(37,99,235,.35);
      background:rgba(37,99,235,.10);
    }

    .itemBody{
      padding:12px 12px 12px;
      display:grid;
      gap:8px;
    }

    .itemBody h3{
      font-size:14px;
      line-height:1.2;
    }

    .metaRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color:var(--muted);
      font-weight:700;
      font-size:12px;
    }

    .pillTiny{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:6px 10px;
      border:1px solid var(--line);
      background:var(--soft2);
      font-weight:800;
      font-size:12px;
      color:var(--text);
    }

    .stories{
      display:grid;
      gap:12px;
    }

    .storiesRow{
      display:flex;
      gap:10px;
      overflow:auto;
      padding-bottom:2px;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
    }

    .story{
      flex:0 0 132px;
      scroll-snap-align:start;
      border:1px solid var(--line);
      border-radius:20px;
      overflow:hidden;
      background:var(--soft);
      position:relative;
      aspect-ratio: 3 / 4;
    }

    .story img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .storyBadge{
      position:absolute;
      inset:10px 10px auto 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    .avatar{
      width:34px;height:34px;
      border-radius:14px;
      border:2px solid rgba(255,255,255,.9);
      overflow:hidden;
      background:var(--bg);
    }
    .avatar img{width:100%;height:100%;object-fit:cover}

    .storyTag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.9);
      background:rgba(255,255,255,.92);
      font-size:12px;
      font-weight:900;
      letter-spacing:-.01em;
    }

    .feed{ display:grid; gap:12px; }

    .post{
      border:1px solid var(--line);
      border-radius:var(--r2);
      overflow:hidden;
      background:var(--bg);
    }

    .postHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px;
      border-bottom:1px solid var(--line);
      background:var(--soft2);
    }

    .who{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .who b{
      font-size:13px;
      letter-spacing:-.02em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:190px;
    }

    .who span{
      display:block;
      color:var(--muted);
      font-size:12px;
      font-weight:700;
    }

    .postMedia{
      aspect-ratio: 16 / 10;
      background:var(--soft);
    }

    .postMedia img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .postBody{
      padding:12px;
      display:grid;
      gap:10px;
    }

    .postBody p{font-size:13px}

    .postActions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    .miniBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:14px;
      padding:10px 12px;
      border:1px solid var(--line);
      background:var(--bg);
      font-weight:900;
      font-size:12px;
      touch-action:manipulation;
      transition:transform var(--t) ease;
    }
    .miniBtn:active{transform:scale(.99)}
    .miniBtn.primary{
      background:rgba(37,99,235,.10);
      border-color:rgba(37,99,235,.22);
      color:var(--accent);
    }

    .premiumGrid{ display:grid; gap:12px; }

    .product{
      border:1px solid var(--line);
      border-radius:var(--r2);
      overflow:hidden;
      background:var(--bg);
      display:grid;
    }

    .productBody{
      padding:12px;
      display:grid;
      gap:10px;
    }

    .priceRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    .price{ display:grid; gap:2px; }

    .price b{
      font-size:16px;
      letter-spacing:-.02em;
    }

    .price span{
      color:var(--muted);
      font-size:12px;
      font-weight:700;
    }

    .buyRow{
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
      align-items:center;
    }

    .qty{
      width:48px;height:48px;
      border-radius:16px;
      border:1px solid var(--line);
      background:var(--bg);
      display:grid;
      place-items:center;
      font-weight:900;
      font-size:13px;
      color:var(--muted);
    }

    .testi{
      border:1px solid var(--line);
      border-radius:var(--r2);
      background:var(--bg);
      overflow:hidden;
    }

    .testiTrack{
      display:flex;
      width:100%;
      transform:translateX(0);
      transition:transform 420ms cubic-bezier(.2,.8,.2,1);
    }

    .quote{
      flex:0 0 100%;
      padding:14px;
      display:grid;
      gap:12px;
    }

    .quote p{
      color:var(--text);
      font-size:14px;
      line-height:1.6;
      font-weight:700;
      letter-spacing:-.02em;
    }

    .quoteMeta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      border-top:1px solid var(--line);
      padding-top:12px;
    }

    .person{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .person b{
      font-size:13px;
      letter-spacing:-.02em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:180px;
    }

    .person span{
      display:block;
      color:var(--muted);
      font-size:12px;
      font-weight:700;
    }

    .logos{
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:flex-end;
      flex-wrap:wrap;
    }

    .logoChip{
      border:1px solid var(--line);
      background:var(--soft2);
      border-radius:999px;
      padding:8px 10px;
      font-weight:900;
      font-size:12px;
      color:var(--muted);
    }

    .dots{
      display:flex;
      justify-content:center;
      gap:8px;
      padding:12px;
      border-top:1px solid var(--line);
      background:var(--soft2);
    }

    .dotBtn{
      width:10px;height:10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:var(--bg);
      padding:0;
      touch-action:manipulation;
    }

    .dotBtn[aria-pressed="true"]{
      background:var(--accent);
      border-color:rgba(37,99,235,.45);
    }

    .cta{
      border:1px solid var(--line);
      border-radius:var(--r2);
      padding:14px;
      background:var(--soft2);
      display:grid;
      gap:10px;
    }

    .cta h2{
      font-size:24px;
      line-height:1.05;
    }

    .footer{
      margin-top:22px;
      border:1px solid var(--line);
      border-radius:var(--r2);
      padding:14px;
      background:var(--bg);
      display:grid;
      gap:6px;
      text-align:center;
      color:var(--muted);
      font-weight:700;
      font-size:12px;
    }

    .bottomBar{
      position:fixed;
      left:0;right:0;
      bottom:0;
      padding:10px 12px;
      background:rgba(255,255,255,.92);
      backdrop-filter:saturate(180%) blur(10px);
      border-top:1px solid var(--line);
      display:flex;
      justify-content:center;
      z-index:60;
    }

    .barInner{
      width:100%;
      max-width:var(--max);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border:1px solid var(--line);
      background:var(--bg);
      border-radius:18px;
      padding:10px 10px;
    }

    .cartMeta{
      display:grid;
      gap:2px;
      min-width:0;
    }
    .cartMeta b{
      font-size:13px;
      letter-spacing:-.02em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:200px;
    }
    .cartMeta span{
      color:var(--muted);
      font-size:12px;
      font-weight:800;
    }

    .checkoutBtn{
      flex:0 0 auto;
      border-radius:16px;
      padding:12px 12px;
      font-weight:900;
      border:1px solid transparent;
      background:var(--accent);
      color:#fff;
      touch-action:manipulation;
      transition:transform var(--t) ease;
      min-width:120px;
      text-align:center;
    }
    .checkoutBtn:active{transform:scale(.99)}
    .checkoutBtn[disabled]{
      opacity:.45;
      background:#9aa8c7;
    }

    .reveal{
      opacity:0;
      transform:translateY(10px);
      transition:opacity var(--t2) ease, transform var(--t2) ease;
      will-change:opacity,transform;
    }
    .reveal.on{
      opacity:1;
      transform:translateY(0);
    }

    @media (min-width:560px){
      h1{font-size:40px}
      .heroStats{grid-template-columns:1.3fr .7fr}
      .howCards{grid-template-columns:1fr 1fr}
      .premiumGrid{grid-template-columns:1fr 1fr}
    }