/* ============================================================================
   DraftIQ — Shared sector-page design system.
   Used by every industry / alt-page (water.html, oil-gas.html, mining.html, …).
   Ported from index.html so sector pages match the flagship exactly.
   To add a sector: clone an existing *.html sector page and swap only the
   SECTOR CONTENT block — do not fork this file per sector.
   ============================================================================ */

:root{
  --navy:#07111f; --navy-deep:#050b15; --navy-warm:#0d1a2c;
  --navy-card:#0d1e33; --navy-elev:#122440;
  --muted:#8194b0; --muted-dim:#637a99; --light:#e2eaf5; --white:#ffffff;
  --border:rgba(129,148,176,0.14); --border-2:rgba(129,148,176,0.28);
  --teal:#0ea5a0; --teal-bright:#2dd4bf;
  --teal-bg:rgba(45,212,191,.08); --teal-border:rgba(45,212,191,.24); --teal-glow:rgba(45,212,191,.3);
  --amber:#f59e0b; --amber-2:#fbbf24;
  --amber-bg:rgba(245,158,11,.07); --amber-border:rgba(245,158,11,.24); --amber-glow:rgba(245,158,11,.3);
  --blue:#3B82F6; --blue-bright:#60A5FA;
  --blue-bg:rgba(96,165,250,.07); --blue-border:rgba(96,165,250,.24); --blue-glow:rgba(96,165,250,.3);
  --violet:#8B5CF6; --violet-bright:#A78BFA;
  --violet-bg:rgba(167,139,250,.08); --violet-border:rgba(167,139,250,.28); --violet-glow:rgba(167,139,250,.35);
  --red:#ef4444; --red-bright:#f87171;
  --red-bg:rgba(248,113,113,.08); --red-border:rgba(248,113,113,.28); --red-glow:rgba(248,113,113,.3);
  --font-display:'Syne',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --font-logo:'Arial Black','Helvetica Neue',Arial,sans-serif;
  --maxw:1240px; --pad:clamp(1.5rem,4vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--light);font-family:var(--font-body);font-size:17px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;min-height:100vh}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(45,212,191,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,191,0.07) 1px, transparent 1px),
    linear-gradient(rgba(45,212,191,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,191,0.035) 1px, transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px;
  background-position:-1px -1px,-1px -1px,-1px -1px,-1px -1px;
}
body>*{position:relative;z-index:1}
::selection{background:var(--teal-bright);color:var(--navy)}
a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-display);font-weight:700;color:var(--white);margin:0;line-height:1.15}
p{color:var(--muted);margin:0 0 1rem;line-height:1.7}
strong{color:var(--light);font-weight:500}

/* Logo + nav */
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.iq-mark{width:38px;height:38px;background:var(--teal);border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-size:15px;font-weight:700;color:#fff;letter-spacing:.02em;flex-shrink:0;line-height:1}
.wordmark{font-family:var(--font-logo);font-size:22px;font-weight:900;color:var(--white);letter-spacing:-.01em;line-height:1;display:inline-flex;gap:0}
.wordmark .draft{color:var(--white)} .wordmark .iq{color:var(--teal-bright)}
nav{display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;background:rgba(7,17,31,0.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14px;color:var(--muted);transition:color .15s;font-weight:400}
.nav-links a:hover{color:var(--light)}
.nav-cta{font-family:var(--font-mono);font-size:12px;padding:9px 20px;border-radius:7px;background:var(--teal);color:var(--navy);font-weight:700;letter-spacing:.04em;transition:transform .15s,box-shadow .15s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 16px -4px var(--teal-glow)}
@media (max-width:980px){.nav-links{display:none}}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:9px;padding:6px 16px;border-radius:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;animation:pulse 2s ease-in-out infinite}
.pill.teal{background:var(--teal-bg);border:1px solid var(--teal-border);color:var(--teal-bright)}
.pill.teal::before{background:var(--teal-bright);box-shadow:0 0 10px var(--teal-glow)}
.pill.violet{background:var(--violet-bg);border:1px solid var(--violet-border);color:var(--violet-bright)}
.pill.violet::before{background:var(--violet-bright);box-shadow:0 0 10px var(--violet-glow)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:9px;font-size:15px;font-weight:600;letter-spacing:.01em;transition:transform .15s,box-shadow .15s,opacity .15s;text-decoration:none;border:1px solid transparent}
.btn-primary{background:var(--teal);color:var(--navy);font-weight:700}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px var(--teal-glow)}
.btn-ghost{background:transparent;color:var(--light);border-color:var(--border-2)}
.btn-ghost:hover{border-color:var(--teal-bright);color:var(--teal-bright);transform:translateY(-1px)}
.btn-violet{background:var(--violet-bg);color:var(--violet-bright);border:1px solid var(--violet-border);font-weight:600}
.btn-violet:hover{background:#7C3AED;color:var(--white);border-color:#7C3AED;transform:translateY(-1px);box-shadow:0 10px 24px -8px var(--violet-glow)}
.btn-amber{background:var(--amber-bg);color:var(--amber-2);border:1px solid var(--amber-border);font-weight:600}
.btn-amber:hover{background:var(--amber);color:var(--navy);border-color:var(--amber);transform:translateY(-1px);box-shadow:0 10px 24px -8px var(--amber-glow)}

/* Breadcrumb */
.crumb{max-width:var(--maxw);margin:0 auto;padding:22px var(--pad) 0;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--muted-dim)}
.crumb a{color:var(--muted-dim);transition:color .15s} .crumb a:hover{color:var(--teal-bright)}
.crumb .sep{margin:0 8px;opacity:.6}

/* Hero (single-column, text-forward) */
.s-hero{max-width:var(--maxw);margin:0 auto;padding:60px var(--pad) 64px}
.s-hero .pill{margin-bottom:26px}
.s-hero h1{font-size:clamp(38px,5vw,62px);line-height:1.04;margin-bottom:26px;letter-spacing:-.015em;max-width:20ch}
.s-hero h1 em{font-style:italic;color:var(--teal-bright);font-weight:700}
.s-hero .hero-sub{font-size:20px;color:var(--muted);max-width:640px;line-height:1.6;margin-bottom:36px}
.s-hero .hero-sub strong{color:var(--light);font-weight:500}
.s-hero .hero-sub .risk-accent{color:var(--red-bright);font-weight:500}
.s-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* Benefits strip */
.benefits{padding:52px var(--pad);border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--navy-deep)}
.benefits .section-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:880px){.benefits .section-inner{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:520px){.benefits .section-inner{grid-template-columns:1fr}}
.benefit .b-mark{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright);display:block;margin-bottom:12px;font-weight:500}
.benefit h4{font-family:var(--font-display);font-size:16px;color:var(--white);margin:0 0 8px;line-height:1.25;font-weight:700}
.benefit p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55}

/* Section base */
section{padding:80px var(--pad)}
.section-inner{max-width:var(--maxw);margin:0 auto}
.section-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-bright);margin-bottom:18px;display:inline-block;font-weight:500}
.section-label.blue{color:var(--blue-bright)}
section h2{font-size:clamp(28px,3.6vw,44px);font-weight:700;margin-bottom:22px;line-height:1.15;max-width:24ch;letter-spacing:-.01em}
.section-sub{font-size:18px;color:var(--muted);max-width:680px;margin:0 0 48px;line-height:1.65}
.section-sub .risk-accent{color:var(--red-bright);font-weight:500}
.risk-accent{color:var(--red-bright);font-weight:500}
.risk-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red-bright);margin:0 6px 0 2px;vertical-align:1px;box-shadow:0 0 8px var(--red-glow)}

/* Dividers */
.divider{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:18px}
.divider-rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border-2) 20%,var(--border-2) 80%,transparent)}
.divider-mark{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dim);font-weight:500}
.divider .accent-dot{width:8px;height:8px;border-radius:50%;background:var(--teal-bright);box-shadow:0 0 10px var(--teal-glow)}
.divider.blue .accent-dot{background:var(--blue-bright);box-shadow:0 0 10px var(--blue-glow)}
.divider.red .accent-dot{background:var(--red-bright);box-shadow:0 0 10px var(--red-glow)}

/* Conditions band (red) */
.conditions{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.conditions .section-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
@media (max-width:900px){.conditions .section-inner{grid-template-columns:1fr;gap:32px}}
.conditions-card{background:var(--navy-card);border:1px solid var(--border);border-left:3px solid var(--red-bright);border-radius:10px;padding:28px 30px}
.conditions-card h3{font-family:var(--font-display);font-size:18px;color:var(--white);margin-bottom:6px;display:flex;align-items:center;gap:10px}
.conditions-card h3 .risk-dot{width:8px;height:8px}
.conditions-card .conditions-sub{font-size:14px;color:var(--muted-dim);margin-bottom:18px;font-family:var(--font-mono);letter-spacing:.04em}
.conditions-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.conditions-list li{font-size:15px;color:var(--light);padding-left:24px;position:relative;line-height:1.5}
.conditions-list li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--red-bright);box-shadow:0 0 8px var(--red-glow)}

/* Use cases (blue grid) */
.use-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.use-case-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.use-case-grid{grid-template-columns:1fr}}
.use-case{background:var(--navy-card);border:1px solid var(--border);border-radius:10px;padding:28px 26px;transition:all .18s;position:relative;overflow:hidden}
.use-case::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue-bright));opacity:.7}
.use-case:hover{border-color:var(--blue-border);transform:translateY(-3px);background:var(--navy-elev)}
.use-case-num{font-family:var(--font-mono);font-size:11px;color:var(--blue-bright);letter-spacing:.12em;margin-bottom:14px;font-weight:500}
.use-case h3{font-size:19px;color:var(--white);margin-bottom:10px;line-height:1.25}
.use-case p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.6}

/* Trust (teal, centered) */
.trust{background:radial-gradient(ellipse 60% 100% at 50% 0%,var(--teal-bg),transparent 70%)}
.trust-inner{max-width:840px;margin:0 auto;text-align:center}
.trust-inner .section-label{display:inline-block}
.trust h2{margin-left:auto;margin-right:auto;max-width:24ch}
.trust-lead{font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--white);line-height:1.35;margin:0 auto 24px;max-width:30ch}
.trust-lead em{font-style:italic;color:var(--teal-bright)}
.trust p{font-size:17px;line-height:1.7;max-width:600px;margin:0 auto 36px}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:780px;margin:0 auto;text-align:left}
@media (max-width:780px){.trust-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.trust-grid{grid-template-columns:1fr}}
.trust-item{background:var(--navy-card);border:1px solid var(--border);border-radius:8px;padding:18px 18px;display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--light);line-height:1.5}
.trust-item-icon{width:8px;height:8px;border-radius:50%;background:var(--teal-bright);margin-top:8px;flex-shrink:0;box-shadow:0 0 8px var(--teal-glow)}

/* CTA band (violet) */
.cta-band{background:radial-gradient(ellipse 60% 100% at 50% 50%,var(--violet-bg),transparent 70%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:84px var(--pad);text-align:center}
.cta-band-inner{max-width:720px;margin:0 auto}
.cta-band .pill{margin-bottom:22px}
.cta-band h2{font-size:clamp(28px,3.2vw,40px);color:var(--white);margin:0 auto 16px;max-width:24ch}
.cta-band p{color:var(--muted);font-size:18px;margin:0 auto 36px;max-width:560px;line-height:1.6}
.cta-band .btn{font-size:16px;padding:17px 36px}

/* Footer */
footer{border-top:1px solid var(--border);padding:48px var(--pad) 32px;background:rgba(5,11,21,0.65);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.foot-inner{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.foot-brand{max-width:26rem}
.foot-brand .nav-brand{margin-bottom:18px}
.foot-brand p{font-size:14px;color:var(--muted);margin:0;line-height:1.65}
.foot-links{display:flex;gap:56px;flex-wrap:wrap}
.foot-col h4{font-family:var(--font-mono);font-size:11px;color:var(--muted-dim);letter-spacing:.18em;text-transform:uppercase;margin:0 0 16px;font-weight:500}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;font-size:14px}
.foot-col a{color:var(--light);transition:color .15s} .foot-col a:hover{color:var(--teal-bright)}
.foot-meta{max-width:var(--maxw);margin:32px auto 0;padding-top:24px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:12px;color:var(--muted-dim);letter-spacing:.04em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}