@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

  :root{
    --ink: #16110C;
    --paper: #FAF6EE;
    --paper-raised: #FFFFFF;
    --accent-1: #FF6D03;
    --accent-2: #FD9B54;
    --accent-3: #F53C04;
    --muted: #8A7C6A;
    --line: #E8DFCF;
    --shadow: 220 20% 10%;
    --thumb-ink: #1C1712;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink: #F4EEE2;
      --paper: #0B0906;
      --paper-raised: #17130D;
      --accent-1: #FF7E1F;
      --accent-2: #FFB273;
      --accent-3: #FF5B32;
      --muted: #A69882;
      --line: #2B241A;
      --thumb-ink: #050403;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --ink: #F4EEE2;
    --paper: #0B0906;
    --paper-raised: #17130D;
    --accent-1: #FF7E1F;
    --accent-2: #FFB273;
    --accent-3: #FF5B32;
    --muted: #A69882;
    --line: #2B241A;
    --thumb-ink: #050403;
    color-scheme: dark;
  }

  *{ box-sizing: border-box; }
  body{
    margin:0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3{
    font-family: 'Poppins', system-ui, sans-serif;
    text-wrap: balance;
    margin: 0;
  }
  a{ color: inherit; }
  .mono{
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
  }
  .wrap{
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ---------- perforation rule ---------- */
  .sprockets{
    height: 14px;
    background-image: repeating-linear-gradient(
      to right,
      var(--line) 0 6px,
      transparent 6px 26px
    );
    background-position: center;
    opacity: .8;
  }

  /* ---------- header ---------- */
  header{
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .headbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    padding: 14px 0;
  }
  .brand{
    display:flex;
    align-items:center;
    gap: 10px;
    text-decoration:none;
  }
  .brand svg{ width: 34px; height: 28px; display:block; }
  .brand-word{
    font-family:'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
  }
  .pill{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    font-family:'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration:none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .pill:focus-visible, .icon-link:focus-visible, .card:focus-visible{
    outline: 2px solid var(--accent-1);
    outline-offset: 3px;
  }
  .pill-solid{
    background: linear-gradient(135deg, var(--accent-2), var(--accent-1));
    color: #1A0E00;
  }
  .pill-solid:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent-1) 60%, transparent); }
  .pill-ghost{
    border-color: var(--line);
    color: var(--ink);
  }
  .pill-ghost:hover{ border-color: var(--accent-1); color: var(--accent-1); }

  /* ---------- hero ---------- */
  .hero{
    padding: 76px 0 56px;
    position: relative;
    overflow: hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset: -20% -10% auto -10%;
    height: 480px;
    background: radial-gradient(60% 60% at 30% 20%, color-mix(in srgb, var(--accent-1) 16%, transparent), transparent 70%);
    pointer-events:none;
    z-index:-1;
  }
  .dot-grid{
    position:absolute; top: 20px; right: 24px;
    width: 88px; height: 56px;
    background-image: radial-gradient(color-mix(in srgb, var(--ink) 50%, transparent) 1.3px, transparent 1.3px);
    background-size: 12px 12px;
    opacity: .3;
    pointer-events:none;
  }
  .ring-accent{
    position:absolute; left: -70px; bottom: -80px;
    width: 200px; height: 200px;
    border-radius: 50%;
    border: 20px solid color-mix(in srgb, var(--accent-1) 28%, transparent);
    pointer-events:none;
  }
  .eyebrow{
    display:flex;
    align-items:center;
    gap: 10px;
    font-family:'JetBrains Mono', monospace;
    font-size: 12.5px;
    letter-spacing: .08em;
    color: var(--accent-3);
    margin-bottom: 22px;
  }
  .eyebrow::before{
    content:"";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 22%, transparent);
  }
  .tagline{
    margin-top: 4px;
    max-width: 60ch;
    font-size: 17.5px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--ink) 80%, var(--muted));
  }
  .about-grid{
    display:grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    align-items:start;
  }
  @media (max-width: 620px){
    .about-grid{ grid-template-columns: 1fr; }
    .about-photo{ width: 160px; margin: 0 auto; }
  }
  .about-photo{
    width:100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: 0 20px 40px -28px color-mix(in srgb, var(--ink) 45%, transparent);
    display:block;
  }
  .stat-row{
    display:flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 28px;
    font-family:'JetBrains Mono', monospace;
    font-size: 13.5px;
    color: var(--muted);
  }
  .stat-row b{
    color: var(--ink);
    font-weight: 600;
  }
  .cta-row{
    display:flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
    align-items:center;
  }
  .social-icons{
    display:flex;
    gap: 8px;
    margin-top: 34px;
  }
  .icon-link{
    width: 38px; height: 38px;
    display:flex; align-items:center; justify-content:center;
    border-radius: 10px;
    border: 1px solid var(--line);
    text-decoration:none;
    color: var(--ink);
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
  }
  .icon-link:hover{ border-color: var(--accent-1); color: var(--accent-1); transform: translateY(-2px); }
  .icon-link svg{ width: 17px; height: 17px; }

  /* ---------- sections ---------- */
  section{ padding: 58px 0; }
  .section-head{ margin-bottom: 30px; }
  .section-head h2{
    font-size: clamp(24px, 4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .section-head p{
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 15px;
    max-width: 58ch;
  }

  /* ---------- reveal ---------- */
  .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
  .reveal.in{ opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity: 1; transform: none; transition: none; }
  }

  /* ---------- video card ---------- */
  .video-card{
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    display:block;
    text-decoration:none;
    color: var(--ink);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .video-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--ink) 40%, transparent);
  }
  .thumb{
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background:
      radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--accent-1) 32%, transparent), transparent 55%),
      linear-gradient(160deg, var(--thumb-ink), color-mix(in srgb, var(--thumb-ink) 60%, #000));
    display:flex; align-items:center; justify-content:center;
  }
  .thumb-img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit: cover;
    z-index: 0;
  }
  .thumb::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(160deg,
      color-mix(in srgb, var(--thumb-ink) 55%, transparent) 0%,
      color-mix(in srgb, var(--thumb-ink) 15%, transparent) 45%,
      color-mix(in srgb, var(--thumb-ink) 35%, transparent) 100%);
    z-index: 1;
    pointer-events: none;
  }
  .thumb .sprocket-edge{
    position:absolute; left:0; top:0; bottom:0; width: 22px;
    background-image: repeating-linear-gradient(
      to bottom, color-mix(in srgb, #fff 22%, transparent) 0 8px, transparent 8px 22px
    );
    background-position: 7px center;
    opacity: .5;
    z-index: 2;
  }
  .play-badge{
    position: relative;
    z-index: 2;
    width: 68px; height: 68px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent-2), var(--accent-1));
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--accent-1) 70%, transparent);
    transition: transform .2s ease;
  }
  .video-card:hover .play-badge{ transform: scale(1.06); }
  .play-badge svg{ width: 22px; height: 22px; margin-left: 3px; }
  .duration{
    position:absolute; right: 12px; bottom: 12px;
    z-index: 2;
    background: color-mix(in srgb, #000 72%, transparent);
    color: #fff;
    font-family:'JetBrains Mono', monospace;
    font-size: 12.5px;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: .02em;
  }
  .new-badge{
    position:absolute; left: 12px; top: 12px;
    z-index: 2;
    background: var(--accent-3);
    color: #fff;
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 4px 9px;
    border-radius: 6px;
  }
  .video-meta{ padding: 22px 24px 24px; }
  .video-meta .views{
    font-family:'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--muted);
    letter-spacing: .01em;
  }
  .video-meta h3{
    margin-top: 8px;
    font-size: 21px;
    line-height: 1.25;
  }
  .video-meta .watch{
    margin-top: 14px;
    display:inline-flex;
    align-items:center;
    gap: 6px;
    color: var(--accent-3);
    font-family:'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
  }
  .video-card:hover .watch{ gap: 10px; }
  .watch svg{ width: 14px; height: 14px; transition: transform .2s ease; }

  /* ---------- products ---------- */
  .product-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  @media (max-width: 700px){
    .product-grid{ grid-template-columns: 1fr; }
  }
  .card{
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px 22px;
    text-decoration:none;
    color: var(--ink);
    display:flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .card:hover{
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent-1) 45%, var(--line));
    box-shadow: 0 20px 40px -28px color-mix(in srgb, var(--ink) 45%, transparent);
  }
  .card.featured{
    background: linear-gradient(165deg, color-mix(in srgb, var(--accent-1) 10%, var(--paper-raised)), var(--paper-raised));
    border-color: color-mix(in srgb, var(--accent-1) 35%, var(--line));
  }
  .badge-value{
    position:absolute; top: -11px; right: 18px;
    background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
    color: #fff;
    font-family:'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    padding: 4px 9px;
    border-radius: 6px;
  }
  .card-icon{
    width: 40px; height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-1) 14%, transparent);
    display:flex; align-items:center; justify-content:center;
  }
  .card-icon svg{ width: 20px; height: 20px; color: var(--accent-3); }
  .card h3{
    font-size: 17px;
    line-height: 1.3;
  }
  .card p{
    margin:0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
    flex-grow: 1;
  }
  .card-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .price{
    font-family:'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 16px;
  }
  .buy{
    font-family:'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--accent-3);
    display:inline-flex; align-items:center; gap: 5px;
  }
  .card:hover .buy svg{ transform: translateX(2px); }
  .buy svg{ width: 12px; height: 12px; transition: transform .2s ease; }

  footer{
    padding: 40px 0 60px;
    border-top: 1px solid var(--line);
    margin-top: 10px;
  }
  .foot-row{
    display:flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items:center;
    justify-content:space-between;
  }
  .foot-copy{
    font-family:'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--muted);
  }