:root{
      /* Polar Pop palette */
      --polar-deep:#065758;   /* deep teal */
      --polar-ice:#E2F0EF;    /* ice white */
      --polar-mist:#A9D4D6;   /* light teal */
      --polar-sea:#82C3C5;    /* mid teal */
      --polar-coral:#C46960;  /* coral */

      /* Theme */
      --bg:#065758;
      --bg-elev:#0c4a4c;
      --text:#E2F0EF;
      --muted:#A9D4D6;
      --card:#082f30;
      --accent:#C46960;
      --accent-2:#82C3C5;
      --ring: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent);
      --radius: 18px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --container: 1200px;
    }

    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{
      margin:0; background:var(--bg); color:var(--text);
      font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
    }
    a{ color:var(--accent); text-decoration:none }
    a:hover{ filter:brightness(1.1) saturate(1.05) }

    /* Header */
    header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
      background: color-mix(in oklab, var(--bg) 90%, transparent);
      border-bottom:1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
    .nav{ max-width:var(--container); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px }
    .brand{ display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.5px }
    .brand .logo-img{ width:36px; height:36px; border-radius:10px; box-shadow:var(--shadow); background:var(--bg-elev); object-fit:contain; padding:2px }
    .brand span{ color: var(--accent); }
    .nav a{ color:var(--text); opacity:.95 }
    .nav a.top-btn{ background: var(--accent); color:#fff; border:1px solid color-mix(in oklab, var(--accent) 60%, transparent); }
    .btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); background:var(--bg-elev); color:var(--text); box-shadow:var(--shadow); transition: transform .12s ease }
    .btn:hover{ transform:translateY(-2px) }
    .btn.primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border:0 }
    .btn .icon-img{ height:22px; width:auto; object-fit:contain; display:inline-block; vertical-align:middle }

    /* Hero */
    .hero-wrap{
      background:
        radial-gradient(900px 600px at 12% -10%, color-mix(in oklab, var(--polar-coral) 22%, transparent), transparent 70%),
        radial-gradient(900px 600px at 100% 0%, color-mix(in oklab, var(--polar-sea) 22%, transparent), transparent 70%),
        color-mix(in oklab, var(--polar-ice) 14%, var(--bg));
    }
    .hero{ max-width:var(--container); margin:auto; padding:56px 20px 28px; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center }
    .hero h1{ font-size:clamp(32px,4.2vw,54px); line-height:1.05; margin:0 0 10px }
    .hero p{ color:var(--muted); margin:0 0 18px }
    .illustration{ width:100%; border-radius: var(--radius); box-shadow: var(--shadow); border:1px solid color-mix(in oklab, var(--text) 10%, transparent) }
    .cta{ display:flex; gap:12px; flex-wrap:wrap }
    .cta-stack{ display:flex; flex-direction:column; gap:12px; align-items:flex-start }

    /* Sections */
    section{ padding: 42px 0 }
    section .wrap{ max-width:var(--container); margin:auto; padding:0 20px }
    /* Prevent sticky header from covering anchor targets */
    section[id]{ scroll-margin-top: 92px; }

    /* Alternating backgrounds */
    section.alt-a{ background: radial-gradient(circle at top left, color-mix(in oklab, var(--polar-coral) 20%, transparent), transparent 70%), color-mix(in oklab, var(--polar-ice) 20%, var(--bg)) }
    section.alt-b{ background: radial-gradient(circle at bottom right, color-mix(in oklab, var(--polar-sea) 25%, transparent), transparent 70%), color-mix(in oklab, var(--polar-mist) 20%, var(--bg)) }

    /* Cards & grid */
    .grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px }
    @media (max-width:1000px){ .hero{ grid-template-columns:1fr } .grid{ grid-template-columns:1fr 1fr } }
    @media (max-width:640px){ .grid{ grid-template-columns:1fr } }
    .card{ background:linear-gradient(180deg, color-mix(in oklab, var(--card) 86%, transparent), color-mix(in oklab, var(--bg) 40%, transparent)); border:1px solid color-mix(in oklab, var(--text) 8%, transparent); border-radius: var(--radius); padding:16px; position:relative; overflow:hidden }
    .card:hover{ box-shadow:var(--shadow) }
    .card .top{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
    .badge{ font-size:12px; background:var(--accent-2); color:#fff; padding:4px 8px; border-radius:999px; border:none }
    .card p{ color:var(--muted); margin:8px 0 12px }
    .actions{ display:flex; gap:10px; flex-wrap:wrap }
    .thumb{ width:100%; height:160px; object-fit:cover; border-radius:12px; border:1px solid color-mix(in oklab, var(--text) 10%, transparent); margin-bottom:10px; background:var(--bg-elev) }

    /* Make specific tool logos fit nicely inside their thumbs */
    .thumb.tool-logo{
      object-fit: contain;
      height: 120px;
      padding: 6px;
      background: var(--bg-elev);
    }

    /* Footer */
    footer{ border-top:1px solid color-mix(in oklab, var(--accent) 40%, transparent); background: radial-gradient(circle at 50% -30%, color-mix(in oklab, var(--polar-ice) 15%, transparent), transparent 80%), color-mix(in oklab, var(--polar-ice) 10%, var(--bg)) }
    .foot{ max-width:var(--container); margin:auto; padding:28px 20px; color:var(--muted); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between }

    /* Utilities */
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
    .icon{ width:22px; height:22px; display:inline-block }
    .icon svg{ width:100%; height:100% }

    /* Back-to-top FAB */
    #toTop{ position:fixed; right:18px; bottom:18px; opacity:0; transform:translateY(10px);
      transition: all .15s ease; background: var(--accent); color:#fff; }
    #toTop.show{ opacity:1; transform:none }

    /* Code + Copy button */
    pre{ background:var(--bg-elev); border:1px solid color-mix(in oklab, var(--text) 10%, transparent); padding:14px; border-radius:12px; overflow:auto }
    code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.95em }
    .codeblock{
      background: var(--bg-elev);
      border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
      border-radius:12px; padding:12px; overflow:auto;
    }
    .copy-row{
      display:flex; justify-content:flex-end; gap:8px; margin:6px 0 10px;
    }
    .copy-btn{
      background: var(--accent); color:#fff;
      border:1px solid color-mix(in oklab, var(--accent) 60%, transparent);
      border-radius:12px; padding:8px 12px;
      display:inline-flex; align-items:center; gap:8px;
    }

    /* ——— Sparkles ——— */
    .sparkle-host{ position:relative; isolation:isolate }
    .sparkle{
      position:absolute; z-index:2; left:0; top:0; pointer-events:none;
      width:6px; height:6px; border-radius:50%;
      background: radial-gradient(closest-side, #fff, rgba(255,255,255,.8) 55%, rgba(255,255,255,0));
      filter: drop-shadow(0 0 6px rgba(255,255,255,.35))
              drop-shadow(0 0 10px color-mix(in oklab, var(--accent) 60%, transparent));
      transform: translate(-50%,-50%);
      animation: sparkle-move .9s ease-out forwards;
    }
    @keyframes sparkle-move{
      0%   { opacity:1;   transform: translate(-50%,-50%) scale(1); }
      100% { opacity:0;   transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(0); }
    }
    @media (prefers-reduced-motion: reduce){ .sparkle{ display:none } }