/* ============================================================
   CURRENTLINE ELECTRICAL — currentlineprep.com
   Brand design system  ·  Phase 1 (Scaffold)
   Copper #B8541C on near-black #1A1A1A · gold #C9A24B accents
   Faithful to the cover/divider art (heavy sans + waveform mark).
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Surfaces */
  --bg:        #1A1A1A;
  --bg-deep:   #121212;
  --bg-raise:  #211F1D;
  --bg-card:   #1F1D1B;

  /* Brand */
  --copper:        #B8541C;
  --copper-bright: #D8682A;
  --copper-deep:   #7A3711;
  --gold:          #C9A24B;
  --gold-bright:   #E3CC86;
  --flag:          #B23A3A;

  /* Neutrals */
  --cream:  #F2EEE6;
  --ink:    #E7E3DA;
  --muted:  #9C968B;
  --faint:  #6E695F;

  /* Lines */
  --line:       rgba(184,84,28,.30);
  --line-soft:  rgba(242,238,230,.09);
  --line-gold:  rgba(201,162,75,.35);

  /* Type */
  --f-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --f-accent:  'Fraunces', Georgia, 'Times New Roman', serif;

  /* Rhythm */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 4px;
  --radius-lg: 8px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(184,84,28,.35); color:var(--cream); }

/* Page texture: subtle copper glow, top-anchored, fixed */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(184,84,28,.10), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(201,162,75,.05), transparent 55%);
}

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(64px, 9vw, 128px); }
.section--tight{ padding-block:clamp(48px, 6vw, 84px); }
.deep{ background:var(--bg-deep); }
.center{ text-align:center; }
.stack > * + *{ margin-top:1.1em; }

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family:var(--f-display); color:var(--cream); margin:0; line-height:1.04; font-weight:800; letter-spacing:-.01em; }
.display{ font-size:clamp(2.9rem, 7.4vw, 6.1rem); letter-spacing:-.02em; }
h1{ font-size:clamp(2.4rem, 5.2vw, 4rem); }
h2{ font-size:clamp(1.9rem, 3.4vw, 3rem); }
h3{ font-size:clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing:0; }
p{ margin:0; }
.lead{ font-size:clamp(1.08rem,1.5vw,1.32rem); color:var(--ink); line-height:1.6; }
.muted{ color:var(--muted); }
.cream{ color:var(--cream); }
strong{ color:var(--cream); font-weight:700; }

.eyebrow{
  font-family:var(--f-mono); font-size:.74rem; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase; color:var(--gold);
  display:inline-block;
}
.eyebrow--copper{ color:var(--copper-bright); }

.tagline{
  font-family:var(--f-accent); font-style:italic; font-weight:400;
  color:var(--gold); letter-spacing:.01em;
}

.kicker-rule{ display:inline-flex; align-items:center; gap:14px; color:var(--gold); }
.kicker-rule::before,.kicker-rule::after{ content:""; height:1px; width:46px; background:var(--line-gold); }

/* ---------- Brand wordmark ---------- */
.wordmark{ display:inline-flex; flex-direction:column; line-height:1; gap:3px; }
.wordmark .w-main{
  font-family:var(--f-display); font-weight:800; color:var(--copper);
  letter-spacing:.16em; font-size:1.18rem;
}
.wordmark .w-sub{
  font-family:var(--f-body); font-weight:500; color:var(--cream);
  letter-spacing:.46em; font-size:.56rem; padding-left:.06em;
}
.wordmark:hover .w-main{ color:var(--copper-bright); }

/* Waveform mark (the 'current line' pulse) */
.wave{ display:block; }
.wave path{ fill:none; stroke:var(--copper); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.wave .node{ fill:var(--gold); }

/* ---------- Buttons ---------- */
.btn{
  --bw:1px;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-body); font-weight:600; font-size:.94rem; letter-spacing:.02em;
  padding:.82em 1.5em; border-radius:var(--radius); cursor:pointer;
  border:var(--bw) solid transparent; transition:all .25s var(--ease);
  white-space:nowrap;
  background:transparent; color:inherit; -webkit-appearance:none; appearance:none;
  font-family:var(--f-body);
}
.btn svg{ width:1em; height:1em; }
.btn-primary{ background:var(--copper); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.08) inset; }
.btn-primary:hover{ background:var(--copper-bright); transform:translateY(-1px); box-shadow:0 10px 30px -12px rgba(184,84,28,.7); }
.btn-ghost{ border-color:var(--line-gold); color:var(--gold); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); background:rgba(201,162,75,.06); }
.btn-dark{ background:transparent; border-color:var(--line-soft); color:var(--ink); }
.btn-dark:hover{ border-color:var(--copper); color:var(--cream); }
.btn-lg{ font-size:1.02rem; padding:1em 1.8em; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(12px);
  background:rgba(18,18,18,.72);
  border-bottom:1px solid var(--line-soft);
}
.nav__row{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px; }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{
  font-size:.92rem; font-weight:500; color:var(--ink); letter-spacing:.02em;
  position:relative; padding:4px 0; transition:color .2s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background:var(--copper); transition:width .25s var(--ease);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after,.nav__links a.is-active::after{ width:100%; }
.nav__links a.is-active{ color:var(--cream); }
.nav__cta{ display:flex; align-items:center; gap:14px; }
.nav__toggle{ display:none; background:none; border:0; color:var(--cream); cursor:pointer; padding:6px; }
.nav__toggle svg{ width:26px; height:26px; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-block:clamp(72px, 12vw, 150px); overflow:hidden; }
.hero__frame{ position:absolute; inset:clamp(18px,3vw,40px); border:1px solid var(--line); border-radius:var(--radius); pointer-events:none; }
.hero__frame::before,.hero__frame::after{ content:""; position:absolute; width:18px; height:18px; border:1px solid var(--gold); }
.hero__frame::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.hero__frame::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.hero__inner{ position:relative; max-width:920px; margin-inline:auto; text-align:center; }
.hero .tagline{ font-size:clamp(1.4rem,2.6vw,2rem); }
.hero__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.hero__wave{ margin:30px auto 4px; max-width:340px; }

/* Stat / trust strip */
.trust{ border-block:1px solid var(--line-soft); }
.trust__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,5vw,64px); padding-block:26px; }
.trust__item{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:90px; }
.trust__n{ font-family:var(--f-display); font-weight:800; font-size:1.7rem; color:var(--copper-bright); line-height:1; }
.trust__l{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* ---------- Grid + cards ---------- */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--bg-card); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:30px 28px; position:relative; transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover{ border-color:var(--line); transform:translateY(-3px); }
.card__num{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; color:var(--gold); }
.card h3{ margin-top:14px; color:var(--cream); }
.card p{ margin-top:10px; color:var(--muted); font-size:.98rem; }
.card__ico{ width:42px; height:42px; color:var(--copper-bright); }

/* Section heading block */
.head{ max-width:680px; }
.head.center{ margin-inline:auto; }
.head h2{ margin-top:14px; }
.head p{ margin-top:16px; }

/* Eyebrow row */
.lab{ display:flex; align-items:center; gap:12px; }
.lab .dot{ width:6px; height:6px; border-radius:50%; background:var(--copper); }

/* Topic chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em; color:var(--ink);
  border:1px solid var(--line); border-radius:999px; padding:.5em 1em; background:rgba(184,84,28,.05);
}

/* ---------- Pricing ---------- */
.tier{
  background:var(--bg-card); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:34px 30px; display:flex; flex-direction:column; gap:18px; position:relative; transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.tier:hover{ transform:translateY(-4px); border-color:var(--line); }
.tier--feature{ border-color:var(--gold); box-shadow:0 24px 60px -30px rgba(201,162,75,.4); }
.tier__flag{
  position:absolute; top:-12px; left:30px; background:var(--gold); color:#1a1a1a;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  padding:.4em .9em; border-radius:999px;
}
.tier__name{ font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:var(--cream); }
.tier__price{ font-family:var(--f-display); font-weight:800; font-size:3rem; color:var(--copper-bright); line-height:1; }
.tier__price span{ font-family:var(--f-body); font-size:.9rem; color:var(--muted); font-weight:500; }
.tier ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.tier li{ display:flex; gap:10px; font-size:.96rem; color:var(--ink); }
.tier li svg{ width:18px; height:18px; color:var(--copper-bright); flex:none; margin-top:3px; }
.tier .btn{ margin-top:auto; justify-content:center; }

/* ---------- Bio band ---------- */
.bio{ display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center; }
.bio__name{ font-family:var(--f-display); font-weight:800; color:var(--cream); font-size:1.4rem; }
.bio__cred{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.16em; color:var(--gold); text-transform:uppercase; }
.bio__card{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; background:linear-gradient(160deg, rgba(184,84,28,.07), transparent); }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--line-soft); background:var(--bg-deep); padding-block:56px 30px; }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.foot h4{ font-family:var(--f-mono); font-weight:500; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.foot a{ display:block; color:var(--muted); font-size:.94rem; padding:5px 0; transition:color .2s var(--ease); }
.foot a:hover{ color:var(--cream); }
.foot__bottom{ margin-top:44px; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--faint); font-size:.82rem; }

/* ---------- Maker's mark (SmartestDesk) ---------- */
.maker{ display:flex; flex-direction:column; gap:9px; margin-top:24px; }
.maker__label{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }
.maker__logo{ width:188px; height:auto; opacity:.9; filter:drop-shadow(0 1px 6px rgba(0,0,0,.5)); transition:opacity .25s var(--ease); }
.maker__logo:hover{ opacity:1; }
.maker--center{ align-items:center; text-align:center; }
.maker--lg{ gap:14px; }
.maker--lg .maker__logo{ width:300px; opacity:.96; }

/* ---------- Top brand bar (SmartestDesk — persistent identity) ---------- */
.topbar{ background:#0E0E0E; border-bottom:1px solid var(--line-soft); }
.topbar__row{ display:flex; align-items:center; justify-content:center; gap:16px; min-height:46px; padding-block:7px; }
.topbar__label{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.topbar__logo{ width:134px; height:auto; opacity:.9; transition:opacity .25s var(--ease); }
.topbar:hover .topbar__logo{ opacity:1; }
@media (max-width:520px){ .topbar__label{ display:none; } .topbar__logo{ width:124px; } }

/* ---------- Brand plate (large logo feature) ---------- */
.brandplate{ display:inline-flex; align-items:center; justify-content:center;
  padding:clamp(28px,5vw,48px) clamp(34px,7vw,76px); border-radius:14px; border:1px solid var(--line);
  background:radial-gradient(130% 130% at 50% 26%, rgba(255,255,255,.075), rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(201,162,75,.05), transparent); }
.brandplate__logo{ width:min(440px,74vw); height:auto; display:block; }

/* ---------- Manual TOC ---------- */
.toc{ display:grid; gap:26px; }
.toc__part{ border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:26px 28px; background:var(--bg-card); transition:border-color .3s var(--ease); }
.toc__part:hover{ border-color:var(--line); }
.toc__plabel{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.toc__ptitle{ font-family:var(--f-display); font-weight:800; color:var(--cream); font-size:1.25rem; margin-top:6px; letter-spacing:-.01em; }
.toc__list{ display:grid; grid-template-columns:1fr; gap:0; margin-top:16px; }
.chap{ display:flex; align-items:baseline; gap:13px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.chap:last-child{ border-bottom:0; }
.chap__n{ font-family:var(--f-mono); font-size:.8rem; color:var(--copper-bright); min-width:26px; }
.chap__t{ color:var(--ink); font-size:.99rem; line-height:1.45; }
.chap__art{ margin-left:auto; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.04em; color:var(--gold); white-space:nowrap; padding-left:14px; opacity:.85; }
@media(max-width:600px){ .chap__art{ display:none; } }

/* ---------- Gallery (cover + dividers) ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery figure{ margin:0; border:1px solid var(--line-soft); border-radius:10px; overflow:hidden; background:var(--bg-deep); transition:border-color .3s var(--ease), transform .3s var(--ease); }
.gallery figure:hover{ border-color:var(--copper); transform:translateY(-4px); }
.gallery img{ width:100%; height:auto; display:block; }
.gallery figcaption{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-top:1px solid var(--line-soft); }
@media(max-width:900px){ .gallery{ grid-template-columns:repeat(2,1fr);} }

/* ---------- Guide cards ---------- */
.guide{ display:flex; flex-direction:column; }
.guide .card__num{ color:var(--gold); }
.guide a.glink{ margin-top:16px; font-weight:600; font-size:.92rem; color:var(--copper-bright); display:inline-flex; align-items:center; gap:7px; }
.guide a.glink:hover{ color:var(--gold-bright); }

/* ---------- Look Inside (sample pages) ---------- */
.samples{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.sample{ position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--line-soft);
  background:var(--bg-deep); transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.sample:hover{ border-color:var(--copper); transform:translateY(-4px); box-shadow:0 26px 60px -34px rgba(184,84,28,.6); }
.sample__img{ width:100%; height:auto; display:block; }
.sample__cap{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-top:1px solid var(--line-soft); background:var(--bg-card); }
.sample__tag{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.sample__txt{ color:var(--ink); font-size:.92rem; }
.sample__txt b{ color:var(--cream); }
@media(max-width:760px){ .samples{ grid-template-columns:1fr; } }

/* ---------- Secure-checkout trust row ---------- */
.trustrow{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(16px,4vw,42px);
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:18px 24px; background:var(--bg-card); }
.trustrow__item{ display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-size:.92rem; }
.trustrow__item svg{ width:18px; height:18px; color:var(--copper-bright); flex:none; }

/* ---------- Success / post-purchase ---------- */
.success{ min-height:62vh; display:flex; align-items:center; }
.success__card{ max-width:640px; margin-inline:auto; text-align:center; border:1px solid var(--line);
  border-radius:14px; padding:clamp(34px,6vw,60px); background:linear-gradient(170deg, rgba(184,84,28,.07), transparent 60%); }
.success__check{ width:62px; height:62px; margin:0 auto 22px; border-radius:50%; border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; }
.success__check svg{ width:30px; height:30px; color:var(--gold); }
.success__order{ display:inline-flex; gap:10px; align-items:baseline; font-family:var(--f-mono); font-size:.8rem;
  letter-spacing:.06em; color:var(--muted); border:1px solid var(--line-soft); border-radius:999px; padding:.5em 1.1em; margin-top:6px; }
.success__order b{ color:var(--cream); }
.access-box{ border:1px solid var(--line-gold); border-radius:10px; padding:22px; margin-top:26px; background:rgba(201,162,75,.05); text-align:left; }
.access-box h3{ color:var(--cream); font-size:1.05rem; }
.access-box p{ color:var(--muted); font-size:.93rem; margin-top:8px; }
.steps{ counter-reset:s; list-style:none; padding:0; margin:18px 0 0; text-align:left; display:grid; gap:12px; }
.steps li{ counter-increment:s; display:flex; gap:13px; color:var(--ink); font-size:.96rem; }
.steps li::before{ content:counter(s); flex:none; width:26px; height:26px; border-radius:50%; background:var(--copper);
  color:#fff; font-family:var(--f-display); font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; }

/* ---------- Phase scaffold marker (dev-only banner) ---------- */
.scaffold-note{
  border:1px dashed var(--line); border-radius:var(--radius); background:rgba(201,162,75,.04);
  padding:14px 18px; color:var(--muted); font-family:var(--f-mono); font-size:.78rem; letter-spacing:.03em;
}
.scaffold-note b{ color:var(--gold); font-weight:500; }

/* Page hero (interior pages) */
.phead{ padding-block:clamp(64px,9vw,120px) clamp(30px,4vw,48px); border-bottom:1px solid var(--line-soft); }
.phead .display{ font-size:clamp(2.4rem,5.5vw,4.2rem); }

/* Divider waveform band */
.wband{ display:flex; justify-content:center; padding-block:8px; }
.wband svg{ width:min(520px,70%); }

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:18px}.mt-3{margin-top:28px}.mt-4{margin-top:44px}
.maxw{ max-width:760px; }
.hide{ display:none !important; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .bio{ grid-template-columns:1fr; gap:28px; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  body{ font-size:16px; }
  .nav__links{
    position:absolute; top:74px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--bg-deep); border-bottom:1px solid var(--line); padding:8px 0;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .22s var(--ease);
  }
  .nav__links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:14px var(--gutter); width:100%; }
  .nav__links a::after{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .nav__cta .btn:not(.nav__toggle){ display:none; }
  .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; gap:28px; }
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; justify-content:center; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}