/* ==========================================================================
   DESIGN 1 — TRUSTED AUTHORITY
   Editorial B2B treatment. Navy, gold rules, large serif display.
   Fraunces (headings) + Inter (body).
   ========================================================================== */

:root{
  --ink:#102A43;
  --ink-2:#1A2433;
  --ink-soft:#3E5C76;
  --ink-mute:#6B7A8F;
  --gold:#C8A046;
  --gold-deep:#A6822F;
  --gold-tint:#F1E7CE;
  --paper:#FFFFFF;
  --paper-2:#F4F7FA;
  --paper-3:#E9EFF5;
  --line:#D8E0EA;
  --hairline:rgba(16,42,67,.12);

  --serif:'Fraunces', 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;

  --max:1280px;
  --pad-x: clamp(20px, 5vw, 72px);
  --gutter: clamp(20px, 3vw, 40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x)}

/* eyebrow */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}

/* hairline rule like FT */
.rule{height:1px;background:var(--hairline);border:0;margin:0}
.rule-gold{height:1px;background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);border:0;margin:0}

/* --------------------------------------------------------------------- */
/*  Skip link                                                            */
/* --------------------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:1000;
}
.skip:focus{left:8px;top:8px}

/* --------------------------------------------------------------------- */
/*  Top notice bar (newspaper masthead vibe)                              */
/* --------------------------------------------------------------------- */
.notice{
  background:var(--ink);color:#E2EAF2;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.notice .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:36px;flex-wrap:wrap;padding-block:6px}
.notice .left{display:flex;gap:18px;align-items:center;color:#A6B6CB}
.notice .left b{color:var(--gold);font-weight:500}
.notice .right{display:flex;gap:14px;align-items:center;color:#A6B6CB}
.notice .right a:hover{color:#fff}
@media (max-width:560px){
  .notice .left .hide-sm{display:none}
}

/* --------------------------------------------------------------------- */
/*  Header / Nav                                                          */
/* --------------------------------------------------------------------- */
.head{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--hairline);
}
.head .wrap{display:flex;align-items:center;gap:24px;min-height:84px}

.brand{display:flex;align-items:center;gap:12px;color:var(--ink);flex:0 0 auto}
.brand-mark{
  width:38px;height:38px;border:1.5px solid var(--gold);position:relative;display:grid;place-items:center;
  background:linear-gradient(135deg, var(--gold) 0 50%, transparent 50% 100%);
}
.brand-mark::after{content:"L";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-weight:600;color:var(--ink);font-size:18px}
.brand-name{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand-name .b1{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.005em;white-space:nowrap}
.brand-name .b2{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;white-space:nowrap}
@media (max-width:520px){
  .brand-name .b2{display:none}
}

.nav{display:none;flex:1;align-items:center;justify-content:center;gap:6px}
@media (min-width:1080px){.nav{display:flex}}

.nav > ul{display:flex;list-style:none;margin:0;padding:0;gap:2px;align-items:center}
.nav > ul > li{position:relative}
.nav > ul > li > a, .nav > ul > li > button{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;color:var(--ink-2);padding:10px 14px;border-radius:2px;
  font-feature-settings:"ss01";white-space:nowrap;
}
.nav > ul > li > a:hover,
.nav > ul > li > button:hover,
.nav > ul > li.is-open > button{color:var(--ink);background:var(--paper-2)}
.nav .caret{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.nav > ul > li:hover .caret, .nav > ul > li.is-open .caret{transform:rotate(225deg) translate(-2px,-2px)}

.head .actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.01em;
  padding:12px 18px;border:1px solid var(--ink);color:var(--ink);background:transparent;
  border-radius:2px;transition:all .2s ease;min-height:44px;
}
.btn:hover{background:var(--ink);color:#fff}
.btn-gold{
  background:var(--gold);border-color:var(--gold);color:var(--ink);
}
.btn-gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.btn-ghost{border-color:var(--hairline);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent}
.head .actions .btn-login{display:none}
@media (min-width:900px){.head .actions .btn-login{display:inline-flex}}

.hamb{
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:44px;height:44px;border:1px solid var(--hairline);align-items:center;border-radius:2px;
  flex:0 0 44px;
}
.hamb span{width:18px;height:1.5px;background:var(--ink);transition:transform .25s, opacity .25s}
.hamb.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hamb.is-open span:nth-child(2){opacity:0}
.hamb.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media (min-width:1080px){.hamb{display:none}}

/* mega panel — desktop */
.mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:min(960px, calc(100vw - 48px));
  background:var(--paper);border:1px solid var(--hairline);
  box-shadow:0 30px 60px -30px rgba(16,42,67,.25);
  padding:28px 32px;display:none;
  border-top:2px solid var(--gold);
}
.nav > ul > li:hover .mega,
.nav > ul > li.is-open .mega{display:grid}
.mega{grid-template-columns:repeat(3,1fr);gap:28px}
.mega h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
  margin:0 0 12px;font-weight:500;
}
.mega ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mega ul li a{
  display:block;font-size:14px;color:var(--ink-2);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s, border-color .2s;
}
.mega ul li a:hover{color:var(--ink);border-color:var(--hairline)}
.mega .mega-feature{
  grid-column:span 1;background:var(--paper-2);padding:18px;border:1px solid var(--hairline);
  display:flex;flex-direction:column;justify-content:space-between;
}
.mega .mega-feature .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.mega .mega-feature h5{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.15;margin:8px 0;color:var(--ink)}
.mega .mega-feature p{font-size:13px;color:var(--ink-soft);margin:0 0 12px}
.mega .mega-feature .arrow{font-size:13px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;background:rgba(16,42,67,.4);z-index:60;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.drawer.is-open{opacity:1;pointer-events:auto}
.drawer-panel{
  position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--paper);
  transform:translateX(100%);transition:transform .3s ease;
  display:flex;flex-direction:column;overflow:auto;
}
.drawer.is-open .drawer-panel{transform:translateX(0)}
.drawer-head{
  display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--hairline);
}
.drawer-head .close{
  width:44px;height:44px;border:1px solid var(--hairline);display:grid;place-items:center;
}
.drawer-nav{padding:8px 22px 22px;display:flex;flex-direction:column;gap:2px}
.drawer-nav details > summary{
  list-style:none;cursor:pointer;padding:14px 0;border-bottom:1px solid var(--hairline);
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--serif);font-size:18px;color:var(--ink);font-weight:500;
}
.drawer-nav details > summary::-webkit-details-marker{display:none}
.drawer-nav details > summary::after{content:"+";font-family:var(--sans);color:var(--gold-deep);font-size:22px;transition:transform .2s}
.drawer-nav details[open] > summary::after{content:"–"}
.drawer-nav details > div{padding:12px 0 16px;display:flex;flex-direction:column;gap:4px}
.drawer-nav details > div a{padding:10px 0;font-size:15px;color:var(--ink-soft);min-height:44px;display:flex;align-items:center}
.drawer-nav details > div h6{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin:14px 0 6px}
.drawer-nav > a{padding:14px 0;border-bottom:1px solid var(--hairline);font-family:var(--serif);font-size:18px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;min-height:44px}
.drawer-cta{margin-top:auto;padding:22px;border-top:1px solid var(--hairline);display:grid;gap:10px;grid-template-columns:1fr 1fr}

/* --------------------------------------------------------------------- */
/*  Hero                                                                  */
/* --------------------------------------------------------------------- */
.hero{
  position:relative;
  padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,72px);
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 49px, rgba(16,42,67,.04) 49px 50px);
  pointer-events:none;
}
.hero .wrap{position:relative;display:grid;gap:clamp(32px,4vw,56px);grid-template-columns:1fr}
@media (min-width:1024px){.hero .wrap{grid-template-columns:1.45fr .85fr;align-items:end}}

.hero-eyebrow{display:flex;gap:14px;align-items:center;color:var(--ink-soft)}
.hero-eyebrow .dot{width:6px;height:6px;background:var(--gold);border-radius:50%}
.hero-eyebrow .vol{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}

.hero h1{
  font-family:var(--serif);font-weight:300;font-size:clamp(28px, 4.9vw, 67px);
  line-height:1;letter-spacing:-.022em;color:var(--ink);margin:18px 0 0;
}
.hero h1 .accurate{font-weight:600;font-style:normal}
.hero h1 .fast{font-style:italic;color:var(--ink);font-weight:300}
.hero h1 .efficient{font-weight:600;font-style:normal}
.hero h1 .amp{
  display:inline-block;font-style:italic;color:var(--gold);font-weight:400;
  font-size:.7em;vertical-align:middle;margin:0 .12em;
}
.hero .deck-line{
  margin-top:28px;max-width:48ch;color:var(--ink-soft);font-size:clamp(15px,1.4vw,18px);line-height:1.55;
}
.hero .deck-line strong{color:var(--ink);font-weight:600}

.hero-ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-ctas .btn{padding:14px 22px;font-size:15px}
.hero-ctas .btn svg{transition:transform .2s}
.hero-ctas .btn:hover svg{transform:translateX(3px)}

.hero-aside{
  border-left:1px solid var(--hairline);padding-left:clamp(20px,2.4vw,32px);
}
@media (max-width:1023px){.hero-aside{border-left:0;padding-left:0;border-top:1px solid var(--hairline);padding-top:32px}}

.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}
.hero-stats .stat{display:flex;flex-direction:column;gap:6px}
.hero-stats .stat .num{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4vw,52px);line-height:1;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero-stats .stat .num em{font-style:italic;color:var(--gold);font-weight:400}
.hero-stats .stat .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

.hero-quote{margin-top:28px;border-top:1px solid var(--hairline);padding-top:20px;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--ink-soft)}
.hero-quote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}

/* --------------------------------------------------------------------- */
/*  Trust bar                                                             */
/* --------------------------------------------------------------------- */
.trust{
  background:var(--ink);color:#A6B6CB;
}
.trust .wrap{
  display:grid;grid-template-columns:1fr;gap:18px;align-items:center;
  padding-block:clamp(20px,2.6vw,32px);
}
@media (min-width:760px){.trust .wrap{grid-template-columns:auto 1fr}}
.trust .label{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  border-right:0;padding-right:0;white-space:nowrap;
}
@media (min-width:760px){.trust .label{border-right:1px solid rgba(255,255,255,.15);padding-right:24px}}
.trust .partners{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);align-items:center;padding-left:0}
@media (min-width:760px){.trust .partners{padding-left:24px}}
.trust .p{
  display:inline-flex;align-items:center;gap:10px;color:#E2EAF2;font-weight:500;font-size:14px;letter-spacing:.02em;
}
.trust .p .icon{width:22px;height:22px;display:grid;place-items:center;color:var(--gold)}
.trust .p .icon svg{width:100%;height:100%}

/* --------------------------------------------------------------------- */
/*  Section: products                                                     */
/* --------------------------------------------------------------------- */
.section{padding-block:clamp(56px,7vw,112px)}
.section.alt{background:var(--paper-2)}

.section-head{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:clamp(32px,4vw,56px);align-items:end}
@media (min-width:900px){.section-head{grid-template-columns:1.2fr .8fr;gap:48px}}
.section-head .roman{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  display:flex;gap:14px;align-items:center;
}
.section-head .roman::before{content:"";width:34px;height:1px;background:var(--gold)}
.section-head h2{
  font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.5vw,56px);line-height:1.02;color:var(--ink);margin:14px 0 0;letter-spacing:-.015em;
}
.section-head h2 em{font-style:italic;color:var(--ink-soft);font-weight:400}
.section-head .head-aside{color:var(--ink-soft);font-size:16px;line-height:1.55;max-width:42ch;align-self:end}

/* product duo */
.duo{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.4vw,32px)}
@media (min-width:900px){.duo{grid-template-columns:1fr 1fr}}

.product{
  background:var(--paper);border:1px solid var(--hairline);padding:clamp(28px,3vw,44px);
  display:flex;flex-direction:column;gap:22px;position:relative;
}
.product.business{border-top:3px solid var(--ink)}
.product.individual{border-top:3px solid var(--gold)}

.product .ribbon{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;justify-content:space-between;align-items:center;
}
.product .ribbon b{color:var(--ink);font-weight:600}
.product h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,38px);line-height:1.05;letter-spacing:-.015em;color:var(--ink);margin:0;
}
.product h3 em{font-style:italic;color:var(--ink-soft);font-weight:300}
.product p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.6}
.product ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.product ul li{display:flex;gap:12px;font-size:14.5px;color:var(--ink-2)}
.product ul li::before{
  content:"";flex:0 0 6px;width:6px;height:6px;background:var(--gold);margin-top:8px;border-radius:50%;
}
.product .price-line{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--hairline);padding-top:18px;
}
.product .price-line .from{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.product .price-line .amount{font-family:var(--serif);font-weight:300;font-size:36px;color:var(--ink);font-variant-numeric:tabular-nums}
.product .price-line .amount sup{font-size:14px;color:var(--ink-soft);margin-left:4px;font-family:var(--mono);letter-spacing:.06em}
.product .btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* --------------------------------------------------------------------- */
/*  How it works                                                          */
/* --------------------------------------------------------------------- */
.steps{
  display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,32px);position:relative;
}
@media (min-width:780px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}

.step{
  display:flex;flex-direction:column;gap:14px;padding:28px 0 0;
  border-top:1px solid var(--hairline);position:relative;
}
.step::before{
  content:"";position:absolute;top:-1px;left:0;width:42px;height:2px;background:var(--gold);
}
.step .num{
  font-family:var(--serif);font-weight:300;font-size:54px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;
}
.step .num span{color:var(--gold)}
.step h4{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--ink);margin:0;line-height:1.15}
.step p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.6}
.step .stamp{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:auto}

/* --------------------------------------------------------------------- */
/*  Why us                                                                */
/* --------------------------------------------------------------------- */
.pillars{
  display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hairline);
}
@media (min-width:900px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{
  padding:clamp(28px,3vw,44px) clamp(0px,2vw,28px) clamp(28px,3vw,44px) 0;
  border-bottom:1px solid var(--hairline);
}
@media (min-width:900px){
  .pillar{border-right:1px solid var(--hairline);padding-left:clamp(28px,2.4vw,40px);border-bottom:0}
  .pillar:first-child{padding-left:0}
  .pillar:last-child{border-right:0}
}
.pillar .index{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.pillar .index .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold-deep);text-transform:uppercase}
.pillar .index .line{flex:1;height:1px;background:var(--hairline)}
.pillar h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.05;color:var(--ink);margin:0 0 12px;letter-spacing:-.01em}
.pillar h3 em{font-style:italic;color:var(--gold)}
.pillar p{margin:0 0 14px;color:var(--ink-soft);font-size:15px;line-height:1.6}
.pillar .meta{display:flex;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-top:1px dashed var(--hairline);padding-top:14px;margin-top:14px}
.pillar .meta b{color:var(--ink);font-weight:500}

/* --------------------------------------------------------------------- */
/*  Pricing teaser                                                        */
/* --------------------------------------------------------------------- */
.tiers{
  display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--hairline);
}
@media (min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{
  padding:clamp(28px,2.6vw,40px);background:var(--paper);
  display:flex;flex-direction:column;gap:18px;border-bottom:1px solid var(--hairline);
}
@media (min-width:900px){.tier{border-right:1px solid var(--hairline);border-bottom:0}.tier:last-child{border-right:0}}
.tier.featured{background:var(--ink);color:#E2EAF2}
.tier.featured h3, .tier.featured .price{color:#fff}
.tier.featured .price sup{color:var(--gold)}
.tier.featured .meta{color:#A6B6CB}
.tier.featured ul li{color:#E2EAF2}
.tier.featured ul li::before{background:var(--gold)}
.tier.featured .from{color:var(--gold)}
.tier .from{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.tier h3{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ink);margin:0;letter-spacing:-.01em}
.tier .price{font-family:var(--serif);font-weight:300;font-size:52px;line-height:1;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tier .price sup{font-size:16px;font-family:var(--mono);color:var(--ink-soft);letter-spacing:.04em;margin-left:6px;vertical-align:top}
.tier .meta{color:var(--ink-soft);font-size:13.5px;line-height:1.55;border-bottom:1px solid var(--hairline);padding-bottom:14px}
.tier.featured .meta{border-color:rgba(255,255,255,.15)}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tier ul li{display:flex;gap:10px;font-size:14px;color:var(--ink-2)}
.tier ul li::before{content:"";flex:0 0 5px;width:5px;height:5px;background:var(--ink);margin-top:8px;border-radius:50%}

/* --------------------------------------------------------------------- */
/*  Add-on services strip                                                 */
/* --------------------------------------------------------------------- */
.addons{
  display:grid;gap:clamp(28px,4vw,48px);grid-template-columns:1fr;
  background:var(--ink);color:#E2EAF2;padding:clamp(40px,5vw,72px);position:relative;overflow:hidden;
}
@media (min-width:900px){.addons{grid-template-columns:.9fr 1.1fr}}
.addons::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg, var(--gold), transparent);
}
.addons .left h3{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.2vw,42px);line-height:1.05;color:#fff;margin:14px 0 16px;letter-spacing:-.015em}
.addons .left h3 em{font-style:italic;color:var(--gold)}
.addons .left p{color:#A6B6CB;font-size:15.5px;line-height:1.6;margin:0 0 22px;max-width:42ch}
.addons .left .stamp{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.addons .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:560px){.addons .grid{grid-template-columns:1fr}}
.addons .grid .a{
  padding:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);
  display:flex;flex-direction:column;gap:8px;
}
.addons .grid .a .t{display:flex;justify-content:space-between;align-items:center}
.addons .grid .a .t b{font-family:var(--serif);font-weight:500;font-size:18px;color:#fff}
.addons .grid .a .t span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.addons .grid .a p{margin:0;color:#A6B6CB;font-size:13.5px;line-height:1.55}

/* --------------------------------------------------------------------- */
/*  Security                                                              */
/* --------------------------------------------------------------------- */
.security{
  display:grid;grid-template-columns:1fr;gap:clamp(28px,3vw,48px);align-items:center;
}
@media (min-width:900px){.security{grid-template-columns:1.1fr .9fr}}
.security .copy h3{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.6vw,46px);line-height:1.05;letter-spacing:-.015em;color:var(--ink);margin:14px 0 16px}
.security .copy h3 em{font-style:italic;color:var(--gold)}
.security .copy p{color:var(--ink-soft);font-size:16px;line-height:1.6;margin:0 0 16px}
.security .copy .checks{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.security .copy .checks{grid-template-columns:1fr}}
.security .copy .checks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.security .copy .checks li svg{flex:0 0 18px;width:18px;height:18px;color:var(--gold);margin-top:2px}

.vault-card{
  background:var(--paper);border:1px solid var(--hairline);padding:clamp(24px,2.4vw,36px);
  display:flex;flex-direction:column;gap:20px;position:relative;overflow:hidden;
}
.vault-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.vault-card .vc-head{display:flex;justify-content:space-between;align-items:center}
.vault-card .vc-head b{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.vault-card .vc-head .badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-tint);padding:6px 10px}
.vault-card .vc-body{display:flex;flex-direction:column;gap:8px}
.vault-card .vc-body h4{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink);margin:0;letter-spacing:-.01em}
.vault-card .vc-body p{color:var(--ink-soft);font-size:14px;margin:0}
.vault-card .vault-stack{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.vault-card .vault-stack .row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;background:var(--paper-2);border:1px solid var(--hairline);
}
.vault-card .vault-stack .row .name{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink-2);font-weight:500}
.vault-card .vault-stack .row .name svg{flex:0 0 16px;color:var(--ink-soft)}
.vault-card .vault-stack .row .stat{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}

/* --------------------------------------------------------------------- */
/*  FAQ                                                                   */
/* --------------------------------------------------------------------- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq details > summary{
  list-style:none;cursor:pointer;padding:24px 0;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:baseline;
}
.faq details > summary::-webkit-details-marker{display:none}
.faq details > summary .q-no{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--gold-deep);text-transform:uppercase;font-variant-numeric:tabular-nums}
.faq details > summary .q{font-family:var(--serif);font-weight:400;font-size:clamp(18px,2vw,26px);color:var(--ink);line-height:1.2;letter-spacing:-.01em}
.faq details > summary .ico{
  width:28px;height:28px;border:1px solid var(--hairline);position:relative;display:grid;place-items:center;
  transition:background .2s;align-self:center;
}
.faq details > summary .ico::before,
.faq details > summary .ico::after{
  content:"";position:absolute;background:var(--ink);
}
.faq details > summary .ico::before{width:12px;height:1.5px}
.faq details > summary .ico::after{width:1.5px;height:12px;transition:transform .2s}
.faq details[open] > summary .ico{background:var(--ink)}
.faq details[open] > summary .ico::before,
.faq details[open] > summary .ico::after{background:var(--gold)}
.faq details[open] > summary .ico::after{transform:scaleY(0)}
.faq details > div{padding:0 0 26px;display:grid;grid-template-columns:1fr;gap:14px;color:var(--ink-soft);font-size:15.5px;line-height:1.65;max-width:64ch}
@media (min-width:900px){.faq details > div{padding-left:48px}}

/* --------------------------------------------------------------------- */
/*  Final CTA + countdown                                                 */
/* --------------------------------------------------------------------- */
.final{
  background:var(--ink);color:#E2EAF2;padding-block:clamp(56px,7vw,96px);position:relative;overflow:hidden;
}
.final::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px);
  pointer-events:none;
}
.final .wrap{position:relative;display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,56px)}
@media (min-width:1024px){.final .wrap{grid-template-columns:1.1fr .9fr;align-items:end}}

.final .lead .roman{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:flex;gap:14px;align-items:center}
.final .lead .roman::before{content:"";width:34px;height:1px;background:var(--gold)}
.final .lead h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,5vw,68px);line-height:1;letter-spacing:-.02em;color:#fff;margin:16px 0 20px}
.final .lead h2 em{font-style:italic;color:var(--gold);font-weight:400}
.final .lead p{color:#A6B6CB;font-size:16px;line-height:1.6;margin:0 0 28px;max-width:46ch}
.final .lead .ctas{display:flex;gap:12px;flex-wrap:wrap}
.final .lead .ctas .btn{background:transparent;border-color:rgba(255,255,255,.2);color:#fff}
.final .lead .ctas .btn:hover{border-color:#fff;background:#fff;color:var(--ink)}
.final .lead .ctas .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.final .lead .ctas .btn-gold:hover{background:#fff;border-color:#fff}

.countdown{display:grid;gap:14px}
.countdown .cd-card{
  border:1px solid rgba(255,255,255,.12);padding:24px;background:rgba(255,255,255,.02);
  display:grid;gap:14px;
}
.countdown .cd-card.gold{border-color:var(--gold)}
.countdown .cd-card .cd-h{display:flex;justify-content:space-between;align-items:baseline}
.countdown .cd-card .cd-h .name{font-family:var(--serif);font-weight:400;font-size:20px;color:#fff}
.countdown .cd-card .cd-h .form{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.countdown .cd-card .cd-date{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#A6B6CB}
.countdown .cd-card .cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.countdown .cd-card .cd-grid .cell{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  padding:14px 6px;text-align:center;
}
.countdown .cd-card.gold .cd-grid .cell{border-color:rgba(200,160,70,.3)}
.countdown .cd-card .cd-grid .cell .v{font-family:var(--serif);font-weight:300;font-size:clamp(24px,3vw,34px);color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.countdown .cd-card.gold .cd-grid .cell .v{color:var(--gold)}
.countdown .cd-card .cd-grid .cell .u{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#A6B6CB;margin-top:6px}

/* --------------------------------------------------------------------- */
/*  Footer                                                                */
/* --------------------------------------------------------------------- */
.foot{background:#0B1B2D;color:#A6B6CB;padding-block:clamp(48px,5vw,80px) 0}
.foot .top{display:grid;gap:clamp(28px,3vw,44px);grid-template-columns:1fr;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08)}
@media (min-width:640px){.foot .top{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.foot .top{grid-template-columns:1.2fr repeat(4,1fr)}}

.foot .brand-block{display:flex;flex-direction:column;gap:18px;max-width:36ch}
.foot .brand-block .brand{color:#fff}
.foot .brand-block .brand-name .b2{color:var(--gold)}
.foot .brand-block p{margin:0;font-size:14px;color:#7E91A8;line-height:1.6}
.foot .brand-block .marks{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E91A8;border-top:1px solid rgba(255,255,255,.08);padding-top:18px}
.foot .brand-block .marks span b{color:var(--gold);display:block;font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;margin-top:4px;font-weight:500}

.foot h5{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot ul li a{font-size:14px;color:#A6B6CB;display:inline-block;padding:3px 0}
.foot ul li a:hover{color:#fff}

.foot .bottom{
  display:grid;grid-template-columns:1fr;gap:18px;padding:24px 0;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6B7C92;
}
@media (min-width:900px){.foot .bottom{grid-template-columns:1.4fr 1fr auto}}
.foot .bottom .line{display:flex;gap:14px;flex-wrap:wrap}
.foot .bottom .line span b{color:var(--gold);font-weight:500}
.foot .bottom .social{display:flex;gap:10px}
.foot .bottom .social a{
  width:36px;height:36px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;
}
.foot .bottom .social a:hover{border-color:var(--gold);color:var(--gold)}
.foot .bottom .marks-line span b{color:var(--gold);font-weight:500}

/* utility */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --------------------------------------------------------------------- */
/*  Magic UI–inspired effects (vanilla CSS/JS)                            */
/* --------------------------------------------------------------------- */

/* fx-shimmer — slow diagonal gloss sweep, for buttons */
.fx-shimmer{position:relative;overflow:hidden;isolation:isolate}
.fx-shimmer::after{
  content:"";position:absolute;top:0;bottom:0;left:0;right:0;
  background:linear-gradient(115deg, transparent 35%, var(--fx-shimmer-color, rgba(255,255,255,.5)) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:fx-shimmer-sweep 4.5s cubic-bezier(.55,.1,.45,.9) infinite;
  pointer-events:none;mix-blend-mode:overlay;
}
@keyframes fx-shimmer-sweep{
  0%, 12%{transform:translateX(-120%)}
  60%, 100%{transform:translateX(120%)}
}

/* fx-shine — rotating conic-gradient border (animates the gradient angle, not the element) */
@property --fx-shine-a{syntax:'<angle>';initial-value:0deg;inherits:false}
.fx-shine{position:relative;isolation:isolate;overflow:hidden}
.fx-shine::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--fx-shine-a),
    transparent 0deg,
    var(--fx-shine-color, var(--gold)) 40deg,
    transparent 80deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:fx-shine-spin 5s linear infinite;
  pointer-events:none;z-index:3;
}
@keyframes fx-shine-spin{to{--fx-shine-a:360deg}}

/* fx-magic — cursor-tracked radial glow on hover */
.fx-magic{position:relative}
.fx-magic::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
    var(--fx-magic-color, rgba(200,160,70,.18)),
    transparent 55%);
  opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:1;
}
.fx-magic:hover::after{opacity:1}
.fx-magic > *{position:relative;z-index:2}

/* Per-element tuning */
.btn-gold.fx-shimmer{--fx-shimmer-color: rgba(255,255,255,.55)}
.tier.featured.fx-shine{--fx-shine-color: var(--gold)}
.product.fx-magic{--fx-magic-color: rgba(200,160,70,.22)}
.hero-aside.fx-magic{--fx-magic-color: rgba(200,160,70,.14)}

@media (prefers-reduced-motion: reduce){
  .fx-shimmer::after, .fx-shine::before{animation:none}
  .fx-shimmer::after{display:none}
  .fx-magic:hover::after{opacity:0}
}