/* ==========================================================================
   faultline101 — "Neon" dark redesign (MOCKUP / preview only)
   Server-room-after-dark aesthetic, brand amber + teal glow.
   Targets the existing landing markup so nothing structural changes.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:        #0a0e10;
  --bg-2:      #0e1417;
  --panel:     rgba(255,255,255,.035);
  --panel-2:   rgba(255,255,255,.055);
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.14);
  --ink:       #eef3f5;
  --ink-soft:  #c2ccd2;
  --steel:     #8a97a1;
  --amber:     #e8a33d;
  --amber-hi:  #ffbf5c;
  --teal:      #45c4a8;
  --teal-hi:   #6fe0c6;
  --glow-amber: 0 0 40px rgba(232,163,61,.28);
  --glow-teal:  0 0 40px rgba(69,196,168,.22);
  --font-display:'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --radius: 16px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  line-height:1.6;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
/* ambient glows + faint grid, like a dark server room */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 40% at 75% -5%, rgba(232,163,61,.16), transparent 60%),
    radial-gradient(50% 45% at 10% 8%, rgba(69,196,168,.12), transparent 60%),
    var(--bg);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.4;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(80% 60% at 50% 0%, #000 30%, transparent 85%);
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

/* ---------------- Nav ---------------- */
.topnav{
  position:sticky; top:0; z-index:30;
  background:rgba(10,14,16,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topnav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{
  display:flex; align-items:center; gap:10px; cursor:pointer; background:none; border:none;
  font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:.01em; color:var(--ink);
}
.brand .bolt{ width:11px; height:11px; border-radius:50%; background:var(--amber); box-shadow:var(--glow-amber); display:inline-block; }
.nav-links{ display:flex; gap:6px; align-items:center; }
.nav-links button{
  background:none; border:none; color:var(--ink-soft); font-family:var(--font-body);
  font-size:14px; font-weight:500; padding:9px 12px; border-radius:9px; cursor:pointer; transition:.18s;
}
.nav-links button:hover{ color:var(--ink); background:var(--panel); }
.nav-links button:last-child{ background:var(--amber); color:#101314; font-weight:600; box-shadow:var(--glow-amber); }
.nav-links button:last-child:hover{ background:var(--amber-hi); }

/* ---------------- Buttons ---------------- */
.btn{
  font-family:var(--font-body); font-size:15px; font-weight:600; cursor:pointer;
  padding:13px 24px; border-radius:11px; border:1px solid transparent;
  background:var(--amber); color:#101314; box-shadow:var(--glow-amber); transition:.18s;
}
.btn:hover{ background:var(--amber-hi); transform:translateY(-1px); }
.btn.ghost{ background:var(--panel); color:var(--ink); border:1px solid var(--line-2); box-shadow:none; }
.btn.ghost:hover{ background:var(--panel-2); border-color:var(--amber); color:#fff; }

/* ---------------- Eyebrows / headings ---------------- */
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--teal-hi); margin:0 0 16px;
}
h1{
  font-family:var(--font-display); font-weight:800; line-height:1.02; letter-spacing:-.01em;
  font-size:clamp(38px, 6vw, 68px); margin:0 0 22px;
  /* keep a real `color` so the heading survives if background-clip:text is
     unsupported or disabled (forced-colors); only the fill is made transparent */
  color:#fff;
  background:linear-gradient(180deg, #fff 30%, #c8d2d8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  h1{ -webkit-text-fill-color:#fff; background:none; }
}
h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.4vw,40px); line-height:1.08; margin:0; color:var(--ink); }
h3{ font-family:var(--font-display); font-weight:700; font-size:21px; margin:0 0 8px; color:var(--ink); }
.section-head{ margin-bottom:34px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.section-head h2{ max-width:22ch; }
.count, .m-section-sub{ color:var(--steel); }
.m-section-sub{ margin:-18px 0 34px; max-width:70ch; font-size:15.5px; }

/* ---------------- Hero ---------------- */
.m-hero{ position:relative; padding:120px 0 96px; text-align:center; overflow:hidden; border-bottom:1px solid var(--line); }
.m-hero-bg{
  position:absolute; inset:0; z-index:0;
  background:url('img/hero-bg.webp') center 40%/cover no-repeat;
  opacity:.5;
}
/* scrim so headline contrast stays AA no matter the image */
.m-hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,16,.82) 0%, rgba(10,14,16,.66) 42%, rgba(10,14,16,.94) 100%);
}
.m-hero-inner{ position:relative; z-index:1; max-width:900px; }
.m-credibility .ti{ color:var(--amber); margin-right:4px; }

/* ---------------- Showcase band (image + text) ---------------- */
.m-showcase{ padding:64px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.m-showcase-inner{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.m-showcase-text p{ color:var(--ink-soft); margin:0 0 22px; }
.m-showcase-text h2{ margin-bottom:14px; }
.m-showcase-media{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 24px 70px -30px rgba(0,0,0,.9); }
.m-showcase-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.m-showcase-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(10,14,16,.5)); pointer-events:none; }
.m-hero .lead{ font-size:clamp(16px,1.7vw,19px); color:var(--ink-soft); max-width:65ch; margin:0 auto 18px; }
.m-credibility{ font-family:var(--font-body); font-size:13px; color:var(--teal-hi); margin:0 0 30px; }
.m-cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.m-hero-meta{ margin-top:22px; color:var(--steel); font-size:14px; font-family:var(--font-mono); }
/* Hero offline wedge + differentiator strip (2026-09-07) */
.m-hero-wedge{ font-family:var(--font-body); font-size:clamp(13px,1.5vw,15px); line-height:1.55; color:var(--teal-hi); max-width:62ch; margin:0 auto 26px; }
.m-hero-wedge i{ color:var(--teal); margin-right:4px; }
.m-hero-wedge b{ color:var(--amber-hi); font-weight:600; }
.m-hero-badges{ display:flex; gap:10px 12px; justify-content:center; flex-wrap:wrap; margin:24px auto 0; max-width:660px; }
.m-hero-badges span{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--ink-soft); background:rgba(69,196,168,.10); border:1px solid rgba(69,196,168,.32); border-radius:999px; padding:7px 15px; }
.m-hero-badges i{ color:var(--teal-hi); font-size:15px; }

/* ---------------- Sections ---------------- */
.m-section{ padding:76px 0; }
.m-section-alt{ background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.m-case-lead{ font-size:17px; color:var(--ink-soft); max-width:75ch; margin:0 0 40px; }

/* ---------------- Cards ---------------- */
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; }
/* 4-card sections read better as a balanced 2x2 than an orphaned 3+1 */
.feature-grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:700px){ .feature-grid-2{ grid-template-columns:1fr; } }
.feature-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; transition:.2s; position:relative; overflow:hidden;
}
.feature-card:hover{ border-color:rgba(232,163,61,.4); background:var(--panel-2); box-shadow:0 0 0 1px rgba(232,163,61,.12), 0 18px 50px -20px rgba(0,0,0,.7); transform:translateY(-2px); }
.feature-card i.ti{ font-size:26px; color:var(--amber); display:inline-block; margin-bottom:14px; filter:drop-shadow(0 0 10px rgba(232,163,61,.5)); }
.feature-card p{ color:var(--ink-soft); font-size:15px; margin:0; }

/* audience grid — image cards */
.m-audience-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:20px; }
.m-aud-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.2s; }
.m-aud-card:hover{ border-color:rgba(232,163,61,.38); transform:translateY(-2px); box-shadow:0 20px 50px -26px rgba(0,0,0,.85); }
.m-aud-card img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; opacity:.82; transition:.2s; }
.m-aud-card:hover img{ opacity:1; }
.m-aud-body{ padding:20px 22px 24px; }
.m-aud-body h3{ color:var(--amber-hi); }
.m-aud-body p{ color:var(--ink-soft); font-size:14.5px; margin:0; }

/* modules tag grid — cards are injected by landing.js (.tag-card markup: .tag-num, h3, p, .tag-meta, .stamp) */
.tag-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.tag-card{
  display:flex; flex-direction:column; gap:7px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:20px; transition:.2s; position:relative; overflow:hidden;
}
.tag-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:2px;
  background:linear-gradient(180deg, var(--amber), transparent); opacity:0; transition:.2s;
}
.tag-card:hover{ border-color:rgba(69,196,168,.42); background:var(--panel-2); transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(69,196,168,.12), 0 18px 44px -22px rgba(0,0,0,.8); }
.tag-card:hover::before{ opacity:1; }
.tag-card .tag-num{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-hi); margin:0; }
.tag-card h3{ font-size:18px; margin:0; line-height:1.2; }
.tag-card p{ color:var(--ink-soft); font-size:14px; margin:0; flex:1; }
.tag-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px;
  padding-top:11px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:11.5px; color:var(--steel); }
.stamp{ padding:3px 9px; border-radius:20px; background:rgba(69,196,168,.12); border:1px solid rgba(69,196,168,.3); color:var(--teal-hi); }

/* ---------------- Own-it-forever ---------------- */
.m-own-inner{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
.m-own-text p{ color:var(--ink-soft); }
.m-own-note{ font-size:14px; color:var(--steel); }
.m-own-compare{ display:flex; flex-direction:column; gap:14px; }
.m-own-row{ border:1px solid var(--line); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:4px; }
.m-own-them{ background:var(--panel); opacity:.7; }
.m-own-us{ background:linear-gradient(180deg, rgba(232,163,61,.12), rgba(232,163,61,.03)); border-color:rgba(232,163,61,.45); box-shadow:var(--glow-amber); }
.m-own-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); }
.m-own-val{ font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--ink); }
.m-own-us .m-own-val{ color:var(--amber-hi); }
.m-own-sub{ font-size:13px; color:var(--steel); }

/* ---------------- Pricing ---------------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; align-items:stretch; }
.price-card{
  display:flex; flex-direction:column; gap:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px 24px; position:relative;
}
.price-card.featured{ border-color:rgba(232,163,61,.5); box-shadow:var(--glow-amber); background:linear-gradient(180deg, rgba(232,163,61,.06), var(--panel)); }
.price-badge{ position:absolute; top:-11px; left:24px; background:var(--amber); color:#101314; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 12px; border-radius:20px; box-shadow:var(--glow-amber); }
.tag-num{ font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-hi); margin:0; }
.price-amount{ font-family:var(--font-display); font-weight:800; font-size:44px; color:var(--ink); margin:0; }
.price-desc{ color:var(--ink-soft); font-size:14.5px; margin:0; }
.price-card ul{ list-style:none; padding:0; margin:4px 0 16px; display:flex; flex-direction:column; gap:9px; }
.price-card li{ position:relative; padding-left:24px; color:var(--ink-soft); font-size:14px; }
.price-card li::before{ content:""; position:absolute; left:0; top:7px; width:14px; height:8px; border-left:2px solid var(--teal-hi); border-bottom:2px solid var(--teal-hi); transform:rotate(-45deg); }
.price-card .btn{ margin-top:auto; }
.price-cur{ font-size:14px; font-weight:400; color:var(--steel); font-family:var(--font-body); }
.price-fine{ font-size:12px; color:var(--steel); margin:10px 0 0; text-align:center; }
.price-btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
.price-btn-row .btn{ flex:1; }

/* teams cta */
.team-cta{ margin-top:26px; display:grid; grid-template-columns:1.5fr 1fr; gap:28px; align-items:center;
  background:linear-gradient(180deg, rgba(69,196,168,.06), transparent); border:1px solid var(--line); border-radius:var(--radius); padding:32px; }
.team-cta h3{ color:var(--ink); font-size:24px; }
.team-cta-body p{ color:var(--ink-soft); }
.team-cta-list{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px; }
.team-cta-list li{ position:relative; padding-left:22px; color:var(--ink-soft); font-size:14px; }
.team-cta-list li::before{ content:"▸"; position:absolute; left:0; color:var(--teal-hi); }
.team-cta-action{ text-align:center; }
.m-pricing-note{ margin-top:26px; font-size:13px; color:var(--steel); text-align:center; max-width:75ch; margin-inline:auto; }

/* ---------------- FAQ ---------------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:4px 20px; }
.faq-item summary{ cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:17px; padding:16px 0; list-style:none; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; float:right; color:var(--amber); font-weight:700; }
.faq-item[open] summary::after{ content:"–"; }
/* answers keep a comfortable reading measure even though the list is full width */
.faq-item p{ color:var(--ink-soft); font-size:14.5px; padding:0 0 16px; margin:0; max-width:78ch; }

/* ---------------- CTA band + footer ---------------- */
.m-cta-band{ padding:80px 0; text-align:center; background:radial-gradient(60% 120% at 50% 0%, rgba(232,163,61,.14), transparent 70%); border-top:1px solid var(--line); }
.m-cta-band h2{ margin-bottom:26px; }
.site-footer{ border-top:1px solid var(--line); padding:30px 24px; text-align:center; color:var(--steel); font-size:13px; font-family:var(--font-mono); }
.site-footer a{ color:var(--teal-hi); }

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .m-own-inner, .team-cta, .m-showcase-inner{ grid-template-columns:1fr; }
  .m-showcase-media{ order:-1; }
}
@media (max-width:760px){
  .m-hero{ padding:64px 0 52px; }
  .m-section, .m-showcase{ padding:52px 0; }
  .nav-links{ gap:2px; }
  .nav-links button{ padding:8px 9px; font-size:13px; }
  /* small screens: keep Pricing + Log in + Try it; hide secondary nav items
     (1 Modules, 2 Guides, 4 FAQ, 5 Contact — all reachable by scrolling/footer) */
  .nav-links button:nth-child(1),
  .nav-links button:nth-child(2),
  .nav-links button:nth-child(4),
  .nav-links button:nth-child(5){ display:none; }
  .section-head h2{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}