/* LoomiTV — shared design system (tokens, reset, buttons, nav, footer) */

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

.skip-link{
  position:absolute; top:-100px; left:12px; z-index:1000;
  background:var(--gold); color:#241802; font-weight:700; font-size:13.5px;
  padding:10px 18px; border-radius:4px; transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

html{scroll-behavior:smooth;}

img,svg{display:block; max-width:100%;}

a{color:inherit; text-decoration:none;}

ul{list-style:none;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

.eyebrow span{color:var(--gold);}

.btn-primary{ background:var(--crimson); border-color:var(--crimson); color:#fff;}

footer p{ color:var(--muted-2); font-size:13px;}

/* Brand wordmark — currently only used in index.html's footer. */
.logo{ font-family:'Fraunces',serif; font-weight:700; font-size:24px;}
.logo::after{ content:'.'; color:var(--gold);}

body{ background:var(--bg); color:var(--fg); font-family:'Inter',sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased;}

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

.btn{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:14px; padding:16px 28px; border:1px solid var(--line-strong); border-radius:var(--radius); transition:all .25s ease; background:transparent; color:var(--fg); cursor:pointer;}

.btn-trial{ background:linear-gradient(135deg, var(--gold), #F2C766); border-color:var(--gold); color:#241802; font-weight:700; box-shadow:0 0 0 1px rgba(227,166,62,0.35), 0 10px 24px rgba(227,166,62,0.25);}

.btn-trial:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px rgba(227,166,62,0.5), 0 14px 30px rgba(227,166,62,0.35); }

.btn-ghost:hover{ border-color:var(--fg); background:rgba(255,255,255,0.04); }

.page-head p.eyebrow{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:14px;}

footer{ background:var(--bg-deep); border-top:1px solid var(--line); padding:40px 0; text-align:center;}

/* ======================================================================
   SITE HEADER — single shared component, used by every page.
   .site-header            → base structure + full desktop nav (identical
                              everywhere: index.html, why-us.html, blog.html,
                              installation-guide.html, dmca.html).
   .site-header--simple    → added on why-us/installation-guide/blog/dmca
                              only. Changes nothing on desktop (still the
                              same full nav). At mobile it swaps the nav
                              for a logo + "← Back to Home" link instead.
   No other file defines any header rule — this is the only source.
   ====================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  background:rgba(21,15,26,0.9);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; max-width:1240px; }

.site-header nav{ display:flex; align-items:center; justify-content:space-between; width:100%; }

.site-header .nav-links{ display:flex; gap:36px; align-items:center; }
.site-header .nav-links a{ font-weight:500; font-size:13.5px; color:var(--muted); transition:color .2s ease; }
.site-header .nav-links a:hover{ color:var(--fg); }

.site-header .nav-cta{ display:flex; align-items:center; gap:18px; }

.site-header .back-link{ display:none; font-size:13px; color:var(--muted); }
.site-header .back-link:hover{ color:var(--fg); }

.menu-toggle{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; position:relative; }
.menu-toggle::before{ content:''; position:absolute; inset:-12px; }
.menu-toggle span{ width:22px; height:2px; background:var(--fg); }

@media (max-width:980px){
  .site-header .nav-links{ display:none; }
  .menu-toggle{ display:flex; margin-left:16px; }
  .site-header.nav-open .nav-links{
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:8px 32px 20px;
  }
  .site-header.nav-open .nav-links a{ padding:12px 0; width:100%; }
  .site-header .logo{ margin-right:auto; }
  .site-header .wrap{ gap:12px; }
  .site-header nav{ gap:12px; }
  .site-header .nav-cta{ gap:10px; align-items:center; }
  .site-header .nav-cta .btn-ghost{ padding:0; border:none; background:none; color:var(--muted); font-weight:500; font-size:13px; line-height:1; }
  .site-header .nav-cta .btn-trial{ display:none; }

  .site-header--simple .nav-links{ display:none; }
  .site-header--simple .nav-cta{ display:none; }
  .site-header--simple .back-link{ display:inline-flex; align-items:center; white-space:nowrap; width:auto; min-width:max-content; flex-shrink:0; }
}

@media (max-width:480px){
  .site-header .wrap{ padding-left:24px; padding-right:24px; }
}