/* Axionis — components: nav, buttons, cards, calculator, form, footer */

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:999px;
  font-family:'Space Grotesk'; font-weight:700; font-size:14.5px; transition:.22s var(--ease); white-space:nowrap; }
.btn--solid{ background:var(--ember); color:var(--obsidian); }
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -8px rgba(255,90,54,.55); }
.btn--ghost{ border:1px solid var(--hair); color:var(--bone); }
.btn--ghost:hover{ border-color:var(--ember); color:var(--ember); }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px; font-size:12px;
  font-weight:600; letter-spacing:.02em; background:var(--ember-soft); color:var(--ember); border:1px solid var(--ember-line); }
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 10px var(--ember); }

/* ---- nav ---- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; transition:.3s var(--ease); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; padding:18px 28px;
  max-width:var(--maxw); margin:0 auto; }
.nav.scrolled{ background:rgba(14,15,18,.78); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair-2); }
.nav.scrolled .nav__in{ padding-top:13px; padding-bottom:13px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand svg{ width:30px; height:30px; }
.brand b{ font-family:'Space Grotesk'; font-weight:700; letter-spacing:.18em; font-size:16px; }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{ font-size:13.5px; color:var(--bone-dim); transition:.2s; }
.nav__links a:hover{ color:var(--ember); }
@media(max-width:820px){ .nav__links a:not(.btn){ display:none; } }

/* ---- generic cards ---- */
.card{ background:var(--coal); border:1px solid var(--hair-2); border-radius:18px; padding:28px; transition:.3s var(--ease); }
.card:hover{ border-color:var(--hair); transform:translateY(-4px); }
.card.pop{ border-color:var(--ember-line); position:relative; }
.badge{ position:absolute; top:-11px; left:24px; background:var(--ember); color:var(--obsidian);
  font-family:'Space Grotesk'; font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; }

/* pillar cards */
.pillar{ display:flex; flex-direction:column; gap:12px; }
.pillar .ic{ width:46px; height:46px; border-radius:12px; background:var(--ember-soft); border:1px solid var(--ember-line);
  display:flex; align-items:center; justify-content:center; color:var(--ember); }
.pillar h3{ font-size:21px; }
.pillar p{ font-size:14px; color:var(--bone-dim); }
.pillar .k{ font-size:12.5px; color:var(--ash); margin-top:auto; padding-top:8px; }

/* ---- calculator ---- */
.calc{ display:grid; grid-template-columns:1.45fr 1fr; gap:22px; align-items:start; }
@media(max-width:900px){ .calc{ grid-template-columns:1fr; } }
.panel{ background:var(--coal); border:1px solid var(--hair); border-radius:20px; padding:24px; }
.tabs{ display:flex; gap:6px; background:var(--obsidian); border:1px solid var(--hair-2); border-radius:999px; padding:5px; margin-bottom:20px; }
.tab{ flex:1; text-align:center; padding:11px; border-radius:999px; font-family:'Space Grotesk'; font-weight:600;
  font-size:13px; color:var(--ash); transition:.18s; border:0; background:none; }
.tab.active{ background:var(--ember); color:var(--obsidian); }
.grouplabel{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ash); margin:18px 0 10px; }
.grouplabel:first-child{ margin-top:0; }
.opt{ display:flex; align-items:center; gap:14px; padding:13px 15px; border:1px solid var(--hair-2); border-radius:13px;
  margin-bottom:9px; background:var(--obsidian); transition:.16s; width:100%; text-align:left; }
.opt:hover{ border-color:var(--hair); }
.opt.sel{ border-color:var(--ember); background:var(--ember-soft); }
.opt .radio{ width:18px; height:18px; border-radius:50%; border:2px solid var(--ash); flex:0 0 auto; position:relative; }
.opt.sel .radio{ border-color:var(--ember); }
.opt.sel .radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--ember); }
.opt .nm{ font-family:'Space Grotesk'; font-weight:600; font-size:14.5px; }
.opt .ds{ font-size:12px; color:var(--ash); margin-top:2px; }
.opt .body{ flex:1; }
.opt .meta{ text-align:right; }
.opt .pr{ font-family:'Space Grotesk'; font-weight:700; font-size:16px; }
.opt .pr .em{ color:var(--ember); }
.opt .tm{ font-size:11px; color:var(--ash); margin-top:2px; }
.opt .lo{ font-size:11px; color:var(--ash); }
.opt .fr{ color:var(--ember); font-size:11px; }

.addon{ display:flex; align-items:center; gap:13px; padding:11px 14px; border:1px solid var(--hair-2);
  border-radius:12px; margin-bottom:8px; background:var(--obsidian); }
.addon .check{ width:18px; height:18px; border-radius:5px; border:2px solid var(--ash); flex:0 0 auto; position:relative; }
.addon.on .check{ border-color:var(--ember); background:var(--ember); }
.addon.on .check::after{ content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--obsidian); font-size:12px; font-weight:800; }
.addon .body{ flex:1; }
.addon .nm{ font-size:13.5px; font-weight:600; }
.addon .ds{ font-size:11.5px; color:var(--ash); }
.addon .pr{ font-family:'Space Grotesk'; font-weight:600; font-size:13.5px; color:var(--bone-dim); white-space:nowrap; }
.stepper{ display:flex; align-items:center; gap:8px; }
.stepper button{ width:24px; height:24px; border-radius:6px; border:1px solid var(--hair); background:var(--coal); color:var(--bone); font-size:15px; line-height:1; }
.stepper span{ min-width:16px; text-align:center; font-family:'Space Grotesk'; font-weight:600; font-size:14px; }
.note{ font-size:12.5px; color:var(--ash); padding:6px 2px; }

.summary{ position:sticky; top:96px; background:linear-gradient(180deg,#181922,#131319);
  border:1px solid var(--ember-line); border-radius:20px; padding:26px; }
.summary h3{ font-family:'Space Grotesk'; font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ash); margin-bottom:14px; }
.summary .selname{ font-family:'Space Grotesk'; font-weight:700; font-size:22px; letter-spacing:-.02em; }
.summary .seltime{ display:inline-block; margin-top:8px; font-size:12px; color:var(--ember); border:1px solid var(--ember-line); border-radius:999px; padding:3px 11px; }
.deliv{ list-style:none; margin:16px 0; }
.deliv li{ font-size:13px; color:var(--bone-dim); padding:6px 0 6px 18px; position:relative; border-bottom:1px solid var(--hair-2); }
.deliv li::before{ content:""; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:2px; background:var(--ember); }
.lines .ln{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ash); padding:4px 0; }
.lines .ln b{ color:var(--bone-dim); font-weight:500; }
.total{ display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid var(--hair); padding-top:16px; margin-top:8px; }
.total .lab{ font-family:'Space Grotesk'; font-weight:600; font-size:14px; }
.total .amt{ font-family:'Space Grotesk'; font-weight:700; font-size:34px; letter-spacing:-.03em; color:var(--ember); }
.gline{ font-size:12px; color:var(--ember); margin-top:12px; text-align:center; }
.summary .btn{ width:100%; justify-content:center; margin-top:14px; }
.micro{ text-align:center; font-size:11px; color:var(--ash); margin-top:10px; }

/* ---- form ---- */
.form{ display:grid; gap:16px; }
.field label{ display:block; font-size:12.5px; color:var(--ash); margin-bottom:7px; letter-spacing:.02em; }
.field input,.field textarea{ width:100%; background:var(--coal); border:1px solid var(--hair); border-radius:12px;
  padding:14px 16px; color:var(--bone); font-family:inherit; font-size:15px; transition:.2s; }
.field input:focus,.field textarea:focus{ border-color:var(--ember); outline:none; }
.field textarea{ min-height:120px; resize:vertical; }
.hp{ position:absolute; left:-9999px; opacity:0; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:560px){ .row2{ grid-template-columns:1fr; } }

/* ---- footer ---- */
.foot{ border-top:1px solid var(--hair-2); padding:64px 0 56px; }
.foot__top{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start; }
.foot__claim{ font-family:'Space Grotesk'; font-weight:500; font-size:22px; max-width:360px; }
.foot__col h5{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash); margin-bottom:12px; }
.foot__col a,.foot__col p{ display:block; font-size:13.5px; color:var(--bone-dim); margin-bottom:7px; }
.foot__bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--hair-2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--ash); }