:root{
    /* Plush palette */
    --bg:#0b0c10;
    --surface:#0f1116;
    --card:#12141b;
    --line:#1b2030;
    --txt:#eef1f7;
    --muted:#a7afc6;
    --brand:#ff5a63;
    --accent:#6aa7ff;
    --cta:#ffb21a;
    --ok:#29d59a;
    --shadow-lg:0 30px 80px rgba(0,0,0,.55);
    --shadow-md:0 18px 50px rgba(0,0,0,.45);
    --r-xxl:28px; --r-xl:22px; --r-lg:18px; --r-md:14px;
    --max:1200px;
  
    /* Header sizing */
    --header-h: 64px;          /* adjust if your nav is taller */
    color-scheme: dark;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; color:var(--txt);
    font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
    background:
      radial-gradient(900px 500px at 80% -120px,#171a25 0%,transparent 60%),
      radial-gradient(700px 480px at -120px 70%,#141824 0%,transparent 65%),
      var(--bg);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  
    /* Space for fixed header */
    padding-top: var(--header-h);
  }
  
  /* Safe area for iOS notch */
  @supports(padding:max(0px)){
    body{ padding-top: calc(var(--header-h) + env(safe-area-inset-top)); }
  }
  
  a{color:inherit; text-decoration:none}
  .wrap{max-width:var(--max); margin-inline:auto; padding-inline:22px}
  
  /* ===== Fixed glass header (robust across browsers) ===== */
  header{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    z-index: 9999;
    isolation: isolate;
    transform: translateZ(0);
    backdrop-filter: saturate(120%) blur(10px);
    background: linear-gradient(180deg,rgba(10,12,16,.86),rgba(10,12,16,.66));
    border-bottom: 1px solid rgba(255,255,255,.04);
  }
  header *{position:relative}
  
  .nav{
    height: var(--header-h);
    display:flex; align-items:center; gap:18px; padding:0;
  }
  .brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px}
  .mark{
    width:16px; height:16px; border-radius:6px;
    background:conic-gradient(from 220deg,#ff5a63 0 34%,#6aa7ff 0 70%,#ffb21a 0 100%);
    box-shadow:0 8px 24px rgba(255,90,99,.35)
  }
  .brand b{color:var(--brand)}
  .links{display:flex; gap:16px; color:var(--muted)}
  .links a{padding:8px 10px; border-radius:10px; transition:.18s}
  .links a:hover{background:#121522;border:1px solid #1b2540}
  .right{margin-left:auto; display:flex; align-items:center; gap:10px}
  
  .btn{display:inline-flex; align-items:center; gap:.6rem; padding:.78rem 1.05rem; border-radius:999px; border:1px solid transparent; font-weight:800; cursor:pointer; transition:transform .16s ease, box-shadow .2s ease, background .2s ease}
  .btn.primary{background:var(--cta); color:#111; box-shadow:0 14px 36px rgba(255,178,26,.35)}
  .btn.ghost{background:transparent; border:1px solid #2a3a63; color:#dbe6ff}
  .btn.pill{background:#111522; border:1px solid #202a44; color:#cfe0ff}
  .btn.alt{background:#0f1422; border:1px solid #2c3e7a; color:#d6e2ff}
  .btn:hover{transform:translateY(-1px)}
  .kbd{padding:.2rem .5rem; border-radius:8px; font-size:.8rem; color:#cbd5ff; border:1px solid #2a3150; background:#121728}
  
  /* Hero */
  .hero{padding:54px 0 8px}
  .heroCard{
    position:relative; overflow:hidden; isolation:isolate;
    background:linear-gradient(180deg,#12141b, #0f1116);
    border:1px solid var(--line); border-radius:var(--r-xxl);
    box-shadow:var(--shadow-lg); padding:42px 26px;
  }
  .hero h1{font-size: clamp(38px, 6.5vw, 76px); line-height:.98; letter-spacing:-.6px; margin:0 0 16px}
  .hero p{color:var(--muted); margin:0 0 20px; font-size:clamp(15px,2.2vw,18px)}
  .ctaRow{display:flex; gap:12px; flex-wrap:wrap}
  .orbs{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
  .orb{position:absolute; width:320px; height:320px; border-radius:50%; filter:blur(26px); opacity:.32; transform:translateZ(0)}
  .orb.one{top:-90px; right:-60px; background:radial-gradient(circle,#6aa7ff,transparent 60%)}
  .orb.two{bottom:-100px; left:-60px; background:radial-gradient(circle,#ff5a63,transparent 60%)}
  .orb.three{top:30%; left:40%; width:200px; height:200px; background:radial-gradient(circle,#29d59a,transparent 60%); opacity:.22}
  
  /* Sections */
  section{padding:26px 0}
  .head{display:flex; align-items:end; justify-content:space-between; gap:10px; margin:6px 0 14px}
  .head h2{margin:0; font-size:clamp(18px,2.6vw,24px)}
  .hint{color:var(--muted); font-size:.95rem}
  
  /* Chips */
  .chips{display:flex; gap:8px; flex-wrap:wrap}
  .chip{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:999px; background:#111522; border:1px solid #1c2440; color:#cfd6f7; cursor:pointer; transition:background .2s ease, transform .16s ease}
  .chip.active{background:#16203a; border-color:#2740e6; box-shadow:inset 0 0 0 1px #2740e666}
  .chip:hover{transform:translateY(-1px)}
  
  /* Rails */
  .railWrap{position:relative}
  .rail{
    display:grid; grid-auto-flow:column; grid-auto-columns: clamp(210px, 22.5vw, 260px);
    gap:14px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scroll-behavior:smooth;
  }
  .rail::-webkit-scrollbar{height:10px}
  .rail::-webkit-scrollbar-thumb{background:#1a2130; border-radius:20px}
  .fadeL,.fadeR{
    content:""; position:absolute; top:0; bottom:0; width:80px; pointer-events:none;
    background:linear-gradient(to right, #0b0c10, transparent); z-index:0;
  }
  .fadeR{right:0; left:auto; transform:scaleX(-1)}
  .arrow{display:flex; gap:10px}
  .icon{display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:#121625; border:1px solid #212940; color:#cfe0ff; cursor:pointer; transition:transform .16s}
  .icon:disabled{opacity:.45; cursor:not-allowed}
  .icon:hover{transform:translateY(-1px)}
  
  /* Cards & grid */
  .card{
    scroll-snap-align:start; transform:translateZ(0);
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
    overflow:hidden; box-shadow:var(--shadow-md);
    display:flex; flex-direction:column;
    transition:transform .18s ease, box-shadow .25s ease, border-color .2s ease;
    z-index:0;
  }
  .card:hover{transform:translateY(-2px); border-color:#253256; box-shadow:0 22px 60px rgba(0,0,0,.5)}
  .thumb{aspect-ratio:4/3; position:relative; overflow:hidden}
  .thumb::before, .thumb::after{
    content:""; position:absolute; inset:-10%;
    background:
      radial-gradient(120px 70px at 20% 30%, #6aa7ff 0 40%, transparent 60%),
      radial-gradient(120px 70px at 68% 55%, #ff5a63 0 40%, transparent 60%),
      radial-gradient(120px 70px at 40% 75%, #29d59a 0 45%, transparent 60%),
      linear-gradient(135deg,#1a2132 0 20%, #0f121c 90%);
    filter:saturate(115%) contrast(105%);
  }
  .thumb::after{transform:skewY(-6deg) rotate(-4deg); mix-blend-mode:screen; opacity:.22}
  .body{padding:14px}
  .title{font-weight:900; letter-spacing:.1px}
  .sub{color:var(--muted); margin-top:4px}
  .row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px}
  .pill{padding:.35rem .6rem; border-radius:999px; font-size:.82rem; color:#cfe0ff; background:#111624; border:1px solid #223255}
  .fav{border:0; background:transparent; color:#9aa7c6; cursor:pointer}
  .fav.active{color:#ff6aa6}
  .grid{display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr))}
  @media (max-width:1080px){.grid{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:760px){.grid{grid-template-columns:repeat(2,1fr)} .hero{padding-top:28px}}
  
  /* Spotlight */
  .spot{
    display:grid; grid-template-columns:92px 1fr auto; gap:16px; align-items:center;
    background:linear-gradient(180deg,#121520,#0f1116);
    border:1px solid var(--line); border-radius:var(--r-xl); padding:14px 16px; box-shadow:var(--shadow-md);
    z-index:0;
  }
  .avatar{width:92px; aspect-ratio:1; border-radius:16px; background:conic-gradient(from 120deg,#ff5a63 0 30%, #6aa7ff 0 65%, #ffb21a 0 100%); position:relative}
  .avatar::after{content:""; position:absolute; inset:3px; border-radius:12px; background:linear-gradient(180deg,#171a26,#0e1016)}
  .spot .tag{color:#aeb8d7}
  .spot .actions{display:flex; gap:8px}
  
  /* Testimonials */
  .testi{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  @media (max-width:900px){.testi{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.testi{grid-template-columns:1fr}}
  .quote{
    background:linear-gradient(180deg,#121521,#0f1116);
    border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-md)
  }
  .quote p{margin:0 0 8px}
  .who{display:flex; align-items:center; gap:8px; color:#c7cfe8}
  .dot{width:10px;height:10px;border-radius:50%;background:#6aa7ff}
  
  /* Pricing teaser */
  .tiers{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media (max-width:760px){.tiers{grid-template-columns:1fr}}
  .tier{background:#12141b; border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow-md); z-index:0}
  
  /* Footer */
  footer{margin-top:30px; border-top:1px solid var(--line); background:linear-gradient(180deg,#0c0d12,#08090e)}
  .fcols{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px; padding:24px 0}
  @media (max-width:900px){.fcols{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.fcols{grid-template-columns:1fr}}
  .copy{padding:12px 0 32px; color:#8c93ad; border-top:1px solid var(--line)}
  
  /* Reveal-on-view */
  .reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
  .reveal.show{opacity:1; transform:none}
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .btn:hover, .chip:hover, .card:hover {transform:none}
    .reveal{transition:none}
    .rail{scroll-behavior:auto}
  }
  
  /* Responsive header height (adjust if your nav wraps) */
  @media (max-width: 640px){
    :root{ --header-h: 72px; }
  }

  /* ========== Product page ========== */
.crumbs{
    display:flex; align-items:center; gap:8px;
    margin: 14px 0; color: var(--muted);
  }
  .crumbs a{ color:#cfe0ff }
  .product{ padding-top: 22px; }
  
  .p-grid{
    display:grid; gap:18px;
    grid-template-columns: 1.1fr .9fr;
  }
  @media (max-width: 980px){ .p-grid{ grid-template-columns:1fr } }
  
  .p-gallery{
    background:linear-gradient(180deg,#12141b,#0f1116);
    border:1px solid var(--line); border-radius: var(--r-xl);
    box-shadow: var(--shadow-md); padding:16px;
  }
  .p-hero{
    aspect-ratio: 16/10; border-radius: 14px; overflow:hidden;
    border:1px solid var(--line); background:#0f131c; margin-bottom:10px;
    position:relative;
  }
  .p-hero .thumb::before,
  .p-hero .thumb::after{ content:""; position:absolute; inset:-10%;
    background:
      radial-gradient(140px 80px at 22% 32%, #6aa7ff 0 40%, transparent 60%),
      radial-gradient(140px 80px at 70% 50%, #ff5a63 0 40%, transparent 60%),
      radial-gradient(140px 80px at 42% 78%, #29d59a 0 45%, transparent 60%),
      linear-gradient(135deg,#1a2132 0 20%, #0f121c 90%);
    filter:saturate(115%) contrast(105%);
  }
  .p-hero.shot2 .thumb::before{ filter: hue-rotate(40deg) saturate(120%); }
  .p-hero.shot3 .thumb::before{ filter: hue-rotate(-30deg) saturate(120%); }
  .p-thumbs{ display:flex; gap:8px; }
  .p-thumb{
    width:84px; height:60px; border-radius:10px; overflow:hidden;
    border:1px solid var(--line); background:#0f131c; cursor:pointer; transition:transform .16s ease;
  }
  .p-thumb:hover{ transform: translateY(-2px); }
  .p-thumb.is-active{ outline:2px solid #2740e6; }
  
  .p-summary{
    background:linear-gradient(180deg,#12141b,#0f1116);
    border:1px solid var(--line); border-radius: var(--r-xl);
    box-shadow: var(--shadow-md); padding:18px;
  }
  .p-title{ margin:.2rem 0 .3rem; font-size:clamp(22px,3.2vw,32px) }
  .p-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px }
  .p-desc{ color:var(--muted); margin:.2rem 0 1rem; }
  .p-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px }
  
  .p-creator{
    display:flex; align-items:center; gap:12px;
    border:1px solid var(--line); background:linear-gradient(180deg,#141826,#0f1116);
    border-radius:14px; padding:12px; margin:12px 0;
  }
  .p-includes{ margin:12px 0 }
  .p-list{ margin: .4rem 0; padding-left: 1.1rem; }
  .p-list li{ margin:.25rem 0 }
  
  .p-acc{ margin-top: 10px }
  .p-acc-h{
    width:100%; text-align:left; font-weight:800; cursor:pointer;
    border:1px solid var(--line); background:#121625; color:#e8ecf7;
    border-radius:12px; padding:12px; margin:8px 0;
  }
  .p-acc-b{
    border:1px solid var(--line); border-radius:12px; padding:12px; margin-top:-6px;
    background:linear-gradient(180deg,#121521,#0f1116);
  }
  
  .p-related{ padding:26px 0 }
  /* ===== Profile ===== */
.profile{ padding-top: 18px; }
.pf-banner{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius: var(--r-xxl);
  background:linear-gradient(180deg,#12141b,#0f1116);
  box-shadow: var(--shadow-lg); margin-top:6px;
}
.pf-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.pf-orb{ position:absolute; border-radius:50%; filter:blur(28px); opacity:.28; }
.pf-orb.a{ width:420px; height:420px; top:-120px; right:-90px; background:radial-gradient(circle,#6aa7ff,transparent 60%); }
.pf-orb.b{ width:360px; height:360px; bottom:-140px; left:-120px; background:radial-gradient(circle,#ff5a63,transparent 60%); }
.pf-orb.c{ width:220px; height:220px; top:30%; left:40%; background:radial-gradient(circle,#29d59a,transparent 60%); opacity:.2; }
.pf-head{ position:relative; z-index:1; display:grid; grid-template-columns:120px 1fr auto; gap:16px; align-items:center; padding:18px; }
.pf-avatar{ width:120px; aspect-ratio:1; border-radius:22px; background:conic-gradient(from 120deg,#ff5a63 0 30%, #6aa7ff 0 65%, #ffb21a 0 100%); position:relative; box-shadow:var(--shadow-md) }
.pf-avatar::after{ content:""; position:absolute; inset:4px; border-radius:18px; background:linear-gradient(180deg,#171a26,#0e1016) }
.pf-name{ margin:0 0 4px; font-size:clamp(22px,3.4vw,32px); }
.pf-stats{ display:flex; gap:14px; color:#cbd2ee; margin-top:6px; }
.pf-actions{ display:flex; gap:10px; align-items:center; }
#followBtn.is-on{ background:#16203a; border:1px solid #2740e6; color:#d9e3ff; }

.pf-bio{ padding:14px 6px; }
.pf-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

.pf-controls{ display:flex; justify-content:space-between; align-items:end; gap:14px; padding:10px 6px; flex-wrap:wrap; }
.tabs{ display:flex; gap:8px; background:#111522; border:1px solid #1c2440; padding:6px; border-radius:999px; }
.tab{ border:0; background:transparent; color:#cfd6f7; padding:.5rem .9rem; border-radius:999px; cursor:pointer; font-weight:800; }
.tab.is-active{ background:#16203a; border:1px solid #2740e6; }
.pf-filters{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.select{
  appearance:none; background:#111522; color:#dbe6ff; border:1px solid #1c2440;
  padding:.6rem .9rem; border-radius:12px;
}

.pf-grid.grid{ margin-top:10px; }
.pf-posts{ display:grid; gap:12px; margin-top:10px; }
.post{
  background:linear-gradient(180deg,#121521,#0f1116); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-md);
}

.pf-more{ display:flex; justify-content:center; padding:18px 0 6px; }