:root{
    --navy-950:#0d1526;
    --navy-900:#16213c;
    --navy-800:#1d2a49;
    --navy-700:#28395e;
    --line:#3c4a6b;
    --off-white:#f6f4ef;
    --paper:#e8e6df;
    --gold:#e8a838;
    --teal:#8fd8d3;
    --muted:#9aa6c2;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--navy-950);
    color:var(--off-white);
    font-family:'Inter', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--teal);
  }

  h1, h2, h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
  }

  /* ---------- NAV ---------- */
  nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.4rem clamp(1.5rem, 5vw, 4rem);
    background:linear-gradient(to bottom, rgba(13,21,38,0.92), rgba(13,21,38,0));
    backdrop-filter:blur(2px);
  }
  .nav-mark{
    display:flex;
    align-items:center;
    gap:0.65rem;
    font-family:'Fraunces', serif;
    font-size:1.05rem;
    letter-spacing:0.01em;
  }
  .nav-mark img{ height:28px; width:auto; display:block; }
  nav .links{
    margin-left:auto;
    display:flex;
    gap:2.2rem;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  nav .links a{
    text-decoration:none;
    color:var(--muted);
    transition:color 0.2s ease;
  }
  nav .links a:hover, nav .links a:focus-visible{ color:var(--off-white); }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:7rem 1.5rem 4.5rem;
    overflow:hidden;
    background:
      radial-gradient(ellipse 60% 45% at 22% 18%, rgba(232,168,56,0.06), transparent 60%),
      linear-gradient(180deg, #0d1526 0%, #16213c 55%, #1a2744 100%);
  }

  .stars{
    position:absolute;
    inset:0;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 20%, rgba(246,244,239,0.5), transparent),
      radial-gradient(1.5px 1.5px at 78% 12%, rgba(246,244,239,0.4), transparent),
      radial-gradient(1px 1px at 88% 34%, rgba(246,244,239,0.35), transparent),
      radial-gradient(1.5px 1.5px at 8% 46%, rgba(246,244,239,0.3), transparent),
      radial-gradient(1px 1px at 65% 8%, rgba(246,244,239,0.4), transparent),
      radial-gradient(1.5px 1.5px at 40% 15%, rgba(246,244,239,0.3), transparent);
    opacity:0.9;
    animation:twinkle 6s ease-in-out infinite;
  }
  @keyframes twinkle{
    0%,100%{ opacity:0.55; }
    50%{ opacity:1; }
  }

  .hero-content{ position:relative; z-index:2; }

  .hero .logo-mark{
    width:clamp(64px, 8vw, 92px);
    height:auto;
    margin:0 auto 1.75rem;
    filter:drop-shadow(0 0 24px rgba(232,168,56,0.12));
  }

  .hero-logo{
    width:clamp(260px, 38vw, 460px);
    margin:0 auto 1.5rem;
  }
  .hero-logo img{
    display:block;
    width:100%;
    height:auto;
  }

  .hero h1{
    font-size:clamp(2.4rem, 6vw, 4.4rem);
    font-weight:500;
    color:var(--off-white);
    margin-bottom:1.1rem;
  }
  .hero h1 em{
    font-style:italic;
    font-weight:400;
    color:var(--teal);
  }

  .hero p.lede{
    max-width:36rem;
    margin:0 auto;
    font-size:clamp(1rem, 1.6vw, 1.15rem);
    color:var(--muted);
  }

  .hero .eyebrow{ margin-bottom:1.2rem; display:inline-block; }

  .scroll-cue{
    position:absolute;
    bottom:2.4rem;
    left:50%;
    transform:translateX(-50%);
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--muted);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
    z-index:2;
  }
  .scroll-cue .line{
    width:1px;
    height:28px;
    background:linear-gradient(to bottom, var(--muted), transparent);
    animation:drip 2.2s ease-in-out infinite;
  }
  @keyframes drip{
    0%{ transform:scaleY(0); transform-origin:top; opacity:0; }
    40%{ transform:scaleY(1); transform-origin:top; opacity:1; }
    100%{ transform:scaleY(1); transform-origin:bottom; opacity:0; }
  }

  /* ---------- WATERLINE DIVIDER (signature element) ---------- */
  .waterline{
    position:relative;
    height:1px;
    background:linear-gradient(to right, transparent, var(--line) 15%, var(--line) 85%, transparent);
  }
  .waterline::after{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:120px;
    background:linear-gradient(to bottom, rgba(60,74,107,0.14), transparent);
    pointer-events:none;
  }

  /* ---------- SECTION shared ---------- */
  section{
    padding:6.5rem clamp(1.5rem, 6vw, 6rem);
    position:relative;
  }

  .section-inner{
    max-width:920px;
    margin:0 auto;
  }

  .reflected-heading{
    position:relative;
    margin-bottom:2.6rem;
  }
  .reflected-heading h2{
    font-size:clamp(1.7rem, 3vw, 2.3rem);
    color:var(--off-white);
  }
  .reflected-heading .ghost{
    font-family:'Fraunces', serif;
    font-size:clamp(1.7rem, 3vw, 2.3rem);
    color:var(--navy-700);
    transform:scaleY(-1);
    opacity:0.45;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 75%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 75%);
    user-select:none;
    pointer-events:none;
    margin-top:-0.15rem;
  }

  /* ---------- SOFTWARE ---------- */
  .software{ background:var(--navy-950); }

  .software-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
  }

  .software-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-decoration:none;
    border:1px solid var(--line);
    background:linear-gradient(160deg, rgba(232,168,56,0.03), transparent 60%), var(--navy-800);
    border-radius:4px;
    padding:2.2rem 2rem;
    transition:border-color 0.2s ease, transform 0.2s ease;
  }
  a.software-card:hover, a.software-card:focus-visible{
    border-color:var(--teal);
    transform:translateY(-2px);
  }
  .software-card img{
    width:96px;
    height:96px;
    border-radius:18px;
    margin-bottom:1.6rem;
  }
  .software-card .tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:0.9rem;
  }
  .software-card h3{
    font-size:1.35rem;
    margin-bottom:0.6rem;
    color:var(--off-white);
  }
  .software-card p{
    color:var(--muted);
    font-size:0.95rem;
  }
  .software-card .more{
    margin-top:auto;
    padding-top:1.4rem;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.85rem;
    color:var(--teal);
  }

  /* ---------- ABOUT ---------- */
  .about{ background:var(--navy-900); }
  .about p{
    font-size:1.08rem;
    color:var(--muted);
    max-width:640px;
  }
  .about p + p{ margin-top:1.1rem; }

  /* ---------- CONTACT ---------- */
  .contact{ background:var(--navy-950); }

  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-top:2.5rem;
  }

  .contact-card{
    border:1px solid var(--line);
    background:linear-gradient(160deg, rgba(232,168,56,0.03), transparent 60%), var(--navy-800);
    border-radius:4px;
    padding:2.2rem 2rem;
    transition:border-color 0.2s ease, transform 0.2s ease;
  }
  .contact-card:hover{
    border-color:var(--teal);
    transform:translateY(-2px);
  }

  .contact-card .tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
    display:block;
    margin-bottom:0.9rem;
  }

  .contact-card h3{
    font-size:1.35rem;
    font-weight:500;
    margin-bottom:0.6rem;
    color:var(--off-white);
  }

  .contact-card p{
    color:var(--muted);
    font-size:0.95rem;
    margin-bottom:1.4rem;
  }

  .contact-card a.mail{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.95rem;
    color:var(--teal);
    text-decoration:none;
    border-bottom:1px solid rgba(143,216,211,0.35);
    padding-bottom:2px;
    transition:border-color 0.2s ease;
  }
  .contact-card a.mail:hover, .contact-card a.mail:focus-visible{
    border-color:var(--teal);
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:3rem clamp(1.5rem, 6vw, 6rem) 2.5rem;
    background:var(--navy-950);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
  }
  footer .foot-mark{
    display:flex;
    align-items:center;
    gap:0.6rem;
    font-family:'Fraunces', serif;
    font-size:0.95rem;
    color:var(--muted);
  }
  footer .foot-mark img{ height:20px; width:auto; opacity:0.8; }
  footer .foot-links{
    display:flex;
    gap:1.6rem;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  footer .foot-links a{ text-decoration:none; color:var(--muted); }
  footer .foot-links a:hover{ color:var(--teal); }

  /* ---------- PRODUCT PAGE ---------- */
  a.foot-mark{ text-decoration:none; color:inherit; }
  .nav-home{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--muted);
    transition:color 0.2s ease;
  }
  .nav-home:hover, .nav-home:focus-visible{ color:var(--off-white); }

  .product-icon{
    display:block;
    width:clamp(88px, 10vw, 120px);
    height:auto;
    margin:0 auto 1.6rem;
    border-radius:22%;
    box-shadow:0 12px 36px rgba(0,0,0,0.45);
  }

  .btn{
    display:inline-block;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.8rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--navy-950);
    background:var(--gold);
    border-radius:3px;
    padding:0.85rem 1.4rem;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .btn:hover, .btn:focus-visible{ background:#f0bb5c; transform:translateY(-1px); }

  .product-hero{ padding-bottom:5rem; }
  .product-hero h1{ margin-top:0.2rem; }
  .hero-actions{
    margin-top:2.2rem;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:1rem 1.4rem;
  }
  .hero-note{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.08em;
    color:var(--muted);
  }

  .hero-shot{
    position:relative;
    z-index:2;
    width:100%;
    max-width:900px;
    margin:3.5rem auto 0;
  }
  .hero-shot img, .shot img{
    display:block;
    width:100%;
    height:auto;
    border:1px solid var(--line);
    border-radius:4px;
    box-shadow:0 18px 50px rgba(0,0,0,0.45);
  }
  .hero-shot figcaption, .shot figcaption{
    margin-top:0.9rem;
    font-size:0.9rem;
    color:var(--muted);
    text-align:center;
  }

  .feature-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.5rem;
  }
  .feature-grid .contact-card{ padding:1.8rem 1.6rem; }
  .feature-grid .contact-card p{ margin-bottom:0; }

  code{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.88em;
    color:var(--teal);
  }

  .shot{ margin:0 auto; }
  .shot + .shot{ margin-top:4rem; }
  .shot-small{ max-width:560px; }
  .strip{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0.8rem;
  }
  .strip img{ box-shadow:0 10px 30px rgba(0,0,0,0.4); }
  .strip-2x2{ grid-template-columns:1fr 1fr; }
  .method{ background:var(--navy-900); }
  .method-panel{
    border:1px solid var(--line);
    border-left:2px solid var(--teal);
    background:linear-gradient(160deg, rgba(143,216,211,0.04), transparent 60%), var(--navy-800);
    border-radius:4px;
    padding:2.4rem clamp(1.4rem, 4vw, 2.6rem);
  }
  .method-panel .tag, .method-panel .reading .tag{
    display:block;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:1rem;
  }
  .method-panel p{
    color:var(--paper);
    font-size:1.05rem;
    max-width:660px;
  }
  .method-panel p + p{ margin-top:1rem; }
  .method-panel .reading{
    margin-top:2rem;
    padding-top:1.4rem;
    border-top:1px solid var(--line);
  }
  .method-panel .reading .tag{ color:var(--muted); margin-bottom:0.7rem; }
  .method-panel .reading ul{
    list-style:none;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.8rem;
    color:var(--muted);
  }
  .method-panel .reading li + li{ margin-top:0.35rem; }
  .method-panel cite{ font-style:italic; }
  .method-panel .reading a{
    color:var(--teal);
    text-decoration:none;
    border-bottom:1px solid rgba(143,216,211,0.35);
    transition:border-color 0.2s ease;
  }
  .method-panel .reading a:hover, .method-panel .reading a:focus-visible{ border-color:var(--teal); }

  .setup{ margin-top:4.5rem; }
  .setup h3{
    font-size:1.5rem;
    color:var(--off-white);
    margin-bottom:0.7rem;
  }
  .setup > p{
    color:var(--muted);
    max-width:640px;
  }
  .setup-photos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-top:2rem;
  }
  .setup-photos img{
    display:block;
    width:100%;
    height:auto;
    border:1px solid var(--line);
    border-radius:4px;
    box-shadow:0 18px 50px rgba(0,0,0,0.45);
  }
  .setup-photos figcaption{
    margin-top:0.8rem;
    font-size:0.9rem;
    color:var(--muted);
  }
  .setup-parts{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:1.2rem 1.5rem;
    margin-top:2.2rem;
    padding:1.4rem 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .setup-parts dt{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:0.3rem;
  }
  .setup-parts dd{
    color:var(--paper);
    font-size:0.92rem;
  }
  .setup .setup-note{
    margin-top:1.2rem;
    font-size:0.9rem;
  }
  .setup .setup-note + .setup-note{ margin-top:0.9rem; }
  .setup-note a{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.85rem;
    color:var(--teal);
    text-decoration:none;
    border-bottom:1px solid rgba(143,216,211,0.35);
    overflow-wrap:anywhere;
  }
  .setup-note a:hover, .setup-note a:focus-visible{ border-color:var(--teal); }

  .hero-shot-window{ max-width:789px; }
  .shot-focus{ max-width:887px; }
  .shot-xsmall{ max-width:446px; }

  .download-grid{
    display:grid;
    grid-template-columns:3fr 2fr;
    gap:1.5rem;
  }
  .download-card .btn{ margin-right:1.4rem; margin-bottom:1rem; }
  .download-card .changelog{ display:inline-block; margin-right:1.4rem; }
  .contact-card p.extra{
    margin:1.2rem 0 0;
    font-size:0.88rem;
  }
  .contact-card p.extra a.mail{ font-size:0.85rem; }
  .callout{
    margin-top:1.4rem;
    border-left:2px solid var(--gold);
    background:rgba(232,168,56,0.06);
    padding:0.9rem 1.1rem;
  }
  .contact-card .callout p{
    margin:0;
    font-size:0.88rem;
    color:var(--paper);
  }
  .contact-card p.hash{
    margin:1.4rem 0 0;
    font-size:0.72rem;
    color:var(--muted);
    overflow-wrap:anywhere;
  }
  .hash span{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.12em;
    margin-right:0.4rem;
  }
  .hash code{ color:var(--muted); }

  .good-to-know{
    list-style:none;
    color:var(--muted);
    font-size:0.95rem;
  }
  .good-to-know li{
    position:relative;
    padding-left:1.2rem;
  }
  .good-to-know li + li{ margin-top:0.7rem; }
  .good-to-know li::before{
    content:'';
    position:absolute;
    left:0; top:0.62em;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--teal);
  }
  .contact-card p.support{
    margin:1.8rem 0 0;
    font-size:0.9rem;
  }
  .contact-card p.support a.mail{ font-size:0.85rem; overflow-wrap:anywhere; }

  footer .disclaimer + .disclaimer{ margin-top:-0.5rem; }
  footer .disclaimer{
    flex-basis:100%;
    font-size:0.78rem;
    color:var(--muted);
    opacity:0.85;
  }

  /* ---------- responsive ---------- */
  @media (max-width:860px){
    .feature-grid{ grid-template-columns:1fr 1fr; }
    .download-grid{ grid-template-columns:1fr; }
  }

  @media (max-width:720px){
    nav .links{ display:none; }
    .contact-grid{ grid-template-columns:1fr; }
    .software-grid{ grid-template-columns:1fr; }
    .feature-grid{ grid-template-columns:1fr; }
    .strip{ grid-template-columns:1fr; }
    .setup-photos{ grid-template-columns:1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    .stars, .scroll-cue .line{ animation:none; }
  }

  :focus-visible{
    outline:2px solid var(--teal);
    outline-offset:3px;
  }