/* KarValu site. Dark hero, navy + orange, Sora + Inter. Final minimal version (2026-09-26). */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:block;src:url(fonts/inter-var.woff2) format("woff2")}
@font-face{font-family:Sora;font-style:normal;font-weight:100 800;font-display:block;src:url(fonts/sora-var.woff2) format("woff2")}
:root{
  --navy:#0F1B2D; --navy-2:#13233B; --ink:#1C2230; --muted:#5E6675;
  --line:rgba(15,27,45,.10); --bg:#F6F7F9;
  --acc:#E0572A; --acc-2:#F28A3B; --acc-h:#C9481F; --acc-s:#FDEEE6;
  --r:16px; --wrap:1120px; --head-h:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 8px)}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:#fff;color:var(--ink);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:Sora,Inter,system-ui,sans-serif;letter-spacing:-.018em;font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0;line-height:1.12;color:var(--navy);text-wrap:balance}
a{color:inherit;text-decoration:none}
svg{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
:focus-visible{outline:3px solid var(--acc-2);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:10px;font-weight:600;font-size:15px;line-height:1.2;border:1px solid transparent;transition:transform .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:16px;height:16px;flex:none}
.btn-acc{background:var(--acc);color:#fff;box-shadow:0 10px 24px rgba(224,87,42,.30)}
.btn-acc:hover{background:var(--acc-h)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.07)}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.btn-sm{padding:10px 16px;font-size:14px}
.btn-locked{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.55);background:transparent;cursor:not-allowed}
.btn-locked:hover{transform:none}
.btn-xl{padding:18px 32px;font-size:18px}
.btn-xl svg{width:20px;height:20px}

/* ---------- header ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--head-h);display:flex;align-items:center;transition:background .3s,box-shadow .3s}
.site-head.scrolled{background:rgba(11,20,34,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.22)}
.site-head .wrap{width:100%;max-width:1200px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:Sora,Inter,sans-serif;font-weight:700;font-size:21px;letter-spacing:-.03em;color:#fff;justify-self:start}
.brand svg{width:34px;height:34px;flex:none}
.brand .v{color:var(--acc-2)}
.main-nav{display:flex;gap:32px;font-size:14.5px;font-weight:500}
.main-nav a{color:rgba(255,255,255,.78);padding-block:6px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.main-nav a:hover{color:#fff;border-bottom-color:var(--acc-2)}
.head-links{display:flex;align-items:center;gap:10px;justify-self:end}
.demo-short{display:none}

/* ---------- hero ---------- */
.top{position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(1100px 480px at 85% -15%,rgba(224,87,42,.34),transparent 60%),
    radial-gradient(900px 560px at -5% 115%,rgba(44,96,170,.42),transparent 60%),
    linear-gradient(160deg,#0B1422,var(--navy-2) 60%,#0B1422)}
.top::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.hero{position:relative;z-index:1;text-align:center;padding-block:calc(var(--head-h) + 56px) 96px}
.top.home{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);font-weight:600;margin-bottom:14px}
.top .eyebrow{color:var(--acc-2)}
.hero h1{color:#fff;font-size:clamp(38px,6.4vw,68px);max-width:860px;margin:0 auto}
.hero h1 span{background:linear-gradient(100deg,var(--acc-2),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:rgba(255,255,255,.80);font-size:clamp(16px,2.2vw,19px);max-width:600px;margin:22px auto 34px}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.trust{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-size:14.5px;color:rgba(255,255,255,.75)}
.trust li{display:flex;align-items:center;gap:7px}
.trust svg{width:17px;height:17px;color:var(--acc-2)}
.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:1;width:26px;height:42px;border:2px solid rgba(255,255,255,.35);border-radius:14px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--acc-2);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.top.slim .hero{padding-block:calc(var(--head-h) + 32px) 52px}

/* ---------- sections ---------- */
section{padding-block:88px}
.head-c{text-align:center;max-width:640px;margin:0 auto 40px}
.head-c h2{font-size:clamp(28px,4vw,40px);margin-bottom:10px}
.head-c p{color:var(--muted);font-size:17px}
.fine{max-width:760px;margin:20px auto 0;text-align:center;font-size:13px;color:var(--muted)}

/* before / after */
.era{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.era-card{border-radius:18px;padding:26px 30px;border:1px solid var(--line)}
.era-card.old{background:#F1EFEA;color:#4A4640}
.era-card.new{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 20px 44px rgba(15,27,45,.20)}
.era-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.era-year{font-family:Sora,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em}
.old .era-year{color:#7A746B}.new .era-year{color:var(--acc-2)}
.era-icons{display:flex;gap:10px}
.era-icons svg{width:24px;height:24px}
.old .era-icons{color:#9A948A}.new .era-icons{color:var(--acc-2)}
.steps{list-style:none}
.steps li{display:flex;justify-content:space-between;gap:14px;padding-block:13px;border-top:1px dashed rgba(128,128,128,.35);font-size:15.5px}
.steps b{font-family:Sora,sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums}
.old .steps b{color:#8A4A3A}.new .steps b{color:var(--acc-2)}
.era-total{padding-top:16px;border-top:2px solid rgba(128,128,128,.35);font-size:15px}
.era-total strong{font-family:Sora,sans-serif;font-size:26px;margin-left:8px}
.old .era-total strong{color:#5A544C}.new .era-total strong{color:#fff}
.bars{margin:36px auto 0;max-width:820px;display:grid;gap:14px}
.bar-row{display:grid;grid-template-columns:80px 1fr 86px;align-items:center;gap:14px;font-size:14.5px}
.bar-lbl{font-weight:600;color:var(--navy)}
.bar-val{font-family:Sora,sans-serif;font-weight:700;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
.track{height:18px;border-radius:99px;background:#EEF0F4;overflow:hidden}
.fill{height:100%;border-radius:99px}
.fill.old{width:100%;background:repeating-linear-gradient(135deg,#B9B2A6 0 8px,#C9C3B8 8px 16px)}
.fill.new{width:10.3%;min-width:22px;background:linear-gradient(90deg,var(--acc-2),var(--acc))}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.stats div{text-align:center;padding:22px 12px;border-radius:16px;background:var(--acc-s)}
.stats strong{display:block;font-family:Sora,sans-serif;font-size:32px;color:var(--acc-h);letter-spacing:-.02em;line-height:1.2}
.stats span{font-size:14.5px;color:#6B4A3C}

/* quote card */
.quote-sec{padding-block:0 88px}
.quote{max-width:1080px;margin:0 auto;border-radius:24px;padding:56px 32px;text-align:center;color:#fff;
  background:radial-gradient(640px 280px at 90% 0%,rgba(224,87,42,.35),transparent 60%),linear-gradient(160deg,#0B1422,var(--navy-2))}
.q-years{display:flex;justify-content:center;align-items:baseline;gap:20px;font-family:Sora,sans-serif;font-weight:800;letter-spacing:-.03em;margin-bottom:22px}
.y-old{font-size:clamp(38px,6vw,64px);color:rgba(255,255,255,.28);text-decoration:line-through;text-decoration-thickness:3px}
.y-arrow{font-size:30px;color:var(--acc-2)}
.y-new{font-size:clamp(44px,7vw,76px);background:linear-gradient(100deg,var(--acc-2),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.quote blockquote{font-family:Sora,sans-serif;font-size:clamp(20px,2.6vw,28px);line-height:1.35;max-width:640px;margin:0 auto;text-wrap:balance}
.quote figcaption{margin-top:16px;font-size:14px;color:rgba(255,255,255,.6)}

/* pricing */
.dark{background:var(--navy);color:#fff}
.dark .head-c h2{color:#fff}.dark .head-c p{color:rgba(255,255,255,.66)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;border-radius:18px;padding:30px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.plan h3{color:#fff;font-size:22px}
.plan .amt{font-family:Sora,sans-serif;font-size:42px;font-weight:700;margin-top:14px;font-variant-numeric:tabular-nums}
.plan .amt small{font-size:15px;font-weight:600;opacity:.6}
.plan .setup{font-size:14.5px;opacity:.7;margin-bottom:20px}
.plan ul{list-style:none;font-size:15.5px;flex:1}
.plan li{padding-block:11px;border-top:1px solid rgba(255,255,255,.12)}
.plan li::before{content:"✓";color:var(--acc-2);font-weight:700;margin-right:10px}
.plan li.no{opacity:.4;text-decoration:line-through;text-decoration-color:rgba(128,128,128,.6)}
.plan li.no::before{content:"×";color:inherit}
.plan.pop{background:#fff;color:var(--ink);border-color:#fff}
.plan.pop h3{color:var(--navy)}
.plan.pop li{border-color:var(--line)}
.plan .badge{position:absolute;top:-13px;right:24px;background:var(--acc);color:#fff;font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:99px}
.usage{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:28px auto 0}
.usage div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;padding:18px 24px;border-radius:14px;border:1px dashed rgba(255,255,255,.3)}
.usage span{font-size:15.5px;color:rgba(255,255,255,.9)}
.usage b{grid-row:span 2;font-family:Sora,sans-serif;font-size:32px;color:var(--acc-2)}
.usage small{font-size:13.5px;color:rgba(255,255,255,.55)}
.plans-note{text-align:center;color:rgba(255,255,255,.62);font-size:14px;margin-top:24px}

/* cancellation + contact */
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px}
.box h2{font-size:24px;margin-bottom:16px}
.box ul{list-style:none;display:grid;gap:10px}
.box li{padding-left:18px;position:relative;color:#333a47}
.box li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.box p{color:var(--muted);margin-top:16px;font-size:14.5px}
.box p a{text-decoration:underline}
.contact-list{display:grid;gap:18px}
.contact-list dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.contact-list dd{font-size:18px;font-weight:600;color:var(--navy)}
.contact-list dd a{border-bottom:2px solid var(--acc-s)}
.info{background:var(--bg)}

/* final CTA: full width band */
.final{color:#fff;text-align:center;
  background:radial-gradient(900px 420px at 85% -10%,rgba(224,87,42,.38),transparent 60%),radial-gradient(800px 460px at 0% 120%,rgba(44,96,170,.45),transparent 60%),linear-gradient(160deg,#0B1422,var(--navy-2))}
.final h2{color:#fff;font-size:clamp(30px,4.6vw,48px);margin-bottom:12px}
.final h2 span{background:linear-gradient(100deg,var(--acc-2),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.final .sub{color:rgba(255,255,255,.72);font-size:17px;margin-bottom:30px}
.demo-steps{list-style:none;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.demo-steps li{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:15px}
.demo-steps b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--acc);font-family:Sora,sans-serif;font-size:14px;flex:none}

/* legal pages */
.legal{max-width:760px;margin:0 auto;padding-block:52px 80px}
.legal h2{font-size:21px;margin:32px 0 10px}
.legal p,.legal li{color:#333a47;margin-bottom:12px}
.legal ul{padding-left:22px}
.legal a{text-decoration:underline}
.legal .upd{color:var(--muted);font-size:14px}

/* footer */
.site-foot{background:#0B1422;color:rgba(255,255,255,.7);padding-block:44px 30px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.site-foot h4{color:#fff;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.site-foot a:hover{color:#fff}
.site-foot ul{list-style:none;display:grid;gap:8px}
.site-foot .brand{margin-bottom:12px}
.foot-bottom{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- desktop: nav targets fill the screen ---------- */
@media (min-width:1001px){
  html{scroll-padding-top:0}
  .fs{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--head-h) + 32px) 48px}
  .fs > .wrap{width:100%}
}

/* ---------- tablet ---------- */
@media (max-width:1000px){
  .main-nav{display:none}
  .site-head .wrap{grid-template-columns:auto 1fr}
}
@media (max-width:900px){
  .plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .era{grid-template-columns:1fr;max-width:600px;margin-inline:auto}
  .two{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
  .usage{grid-template-columns:1fr;max-width:520px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > :first-child{grid-column:1 / -1}
}

/* ---------- phone ---------- */
@media (max-width:640px){
  :root{--head-h:62px}
  section{padding-block:60px}
  .quote-sec{padding-block:0 60px}
  .brand{font-size:19px}.brand svg{width:30px;height:30px}
  .head-links{gap:8px}
  .head-links .btn-sm{padding:9px 12px;font-size:13.5px}
  .top.home{min-height:0}
  .hero{padding-block:calc(var(--head-h) + 40px) 64px}
  .hero .ctas .btn{width:100%}
  .scroll-cue{display:none}
  .era-card{padding:22px}
  .stats{gap:10px}
  .stats div{padding:14px 6px}
  .stats strong{font-size:20px}
  .stats span{font-size:12px;display:block;line-height:1.35}
  .bar-row{grid-template-columns:62px 1fr 70px;gap:10px;font-size:13.5px}
  .quote{padding:40px 20px;border-radius:20px}
  .box{padding:24px}
  .demo-steps{flex-direction:column;align-items:stretch;max-width:360px;margin-inline:auto}
  .btn-xl{width:100%;font-size:16px;padding:16px 18px}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:420px){.demo-long{display:none}.demo-short{display:inline}}

/* ---------- desktop with a short screen: keep each section inside one screen ---------- */
@media (min-width:1001px){
  .fs{padding-block:calc(var(--head-h) + 24px) 32px}
}
@media (min-width:1001px) and (max-height:940px){
  .head-c{margin-bottom:26px}
  .head-c h2{font-size:34px}
  .era-card{padding:20px 26px}
  .era-top{margin-bottom:8px}
  .steps li{padding-block:9px;font-size:15px}
  .era-total{padding-top:10px}
  .bars{margin-top:22px;gap:10px}
  .stats{margin-top:22px}
  .stats div{padding:14px 12px}
  .stats strong{font-size:26px}
  .fine{margin-top:12px}
  .plan{padding:22px 26px}
  .plan .amt{font-size:36px;margin-top:8px}
  .plan .setup{margin-bottom:12px}
  .plan li{padding-block:8px;font-size:15px}
  .usage{margin-top:18px}
  .usage div{padding:12px 20px}
  .usage b{font-size:26px}
  .plans-note{margin-top:14px}
}
@media (min-width:1001px) and (max-height:760px){
  .head-c{margin-bottom:20px}
  .head-c h2{font-size:30px;margin-bottom:6px}
  .plan li{padding-block:6px}
  .plan .amt{font-size:32px}
  .plans-note{font-size:13px;margin-top:10px}
}
@media (min-width:641px) and (max-width:1000px){.top.home{min-height:min(100svh,760px)}}

/* pricing: cards lift on hover, clear usage fees */
.plan{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.plan:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.28);border-color:rgba(242,138,59,.55)}
.plan.pop:hover{border-color:#fff}
.usage-title{text-align:center;color:#fff;font-size:18px;margin-top:34px}
.usage{margin-top:14px}
@media (min-width:1001px) and (max-height:940px){.usage-title{margin-top:20px;font-size:16px}.usage{margin-top:10px}}
@media (min-width:1001px) and (max-height:760px){.usage-title{margin-top:14px}}
.alt-contact{margin-top:18px;font-size:15px;color:rgba(255,255,255,.7)}
.alt-contact a{color:#fff;border-bottom:1px solid rgba(242,138,59,.6)}
@media (min-width:1001px) and (max-height:760px){
  .plan{padding:18px 24px}
  .usage div{padding:9px 18px}
  .usage-title{margin-top:12px;font-size:15px}
}

/* ---------- phone hero: calmer colors (2026-09-26) ----------
   On a narrow screen the wide orange glow sits right behind the header and turns the top brownish,
   and the screen had six orange elements at once. Keep orange for the headline and the main button only. */
@media (max-width:640px){
  .top{background:
    radial-gradient(420px 260px at 100% 0%,rgba(224,87,42,.14),transparent 70%),
    radial-gradient(520px 420px at 0% 100%,rgba(44,96,170,.28),transparent 70%),
    linear-gradient(170deg,#0B1422,var(--navy-2) 70%,#0E1A2C)}
  .top::before{opacity:.55}
  .top .eyebrow{color:rgba(255,255,255,.62)}
  .trust svg{color:rgba(255,255,255,.6)}
  .hero .btn-acc{box-shadow:0 6px 16px rgba(224,87,42,.22)}
  .head-links .btn-acc{box-shadow:none}
}

/* "& beyond" rising mark + busier 1990's card icons (2026-09-27) */
.eyebrow .up{display:inline-flex;vertical-align:-3px;margin-left:6px;animation:rise 2.4s ease-in-out infinite}
.eyebrow .up svg{width:18px;height:18px}
@keyframes rise{0%,100%{transform:translate(0,2px);opacity:.75}50%{transform:translate(2px,-3px);opacity:1}}
.era-top{flex-wrap:wrap;row-gap:10px}
.old .era-icons{gap:9px}
.old .era-icons svg{width:22px;height:22px}
@media (max-width:640px){.old .era-icons svg{width:20px;height:20px}}
@media (prefers-reduced-motion:reduce){.eyebrow .up{animation:none}}
.eyebrow .up{width:26px;height:26px;margin-left:8px;vertical-align:-8px;align-items:center;justify-content:center;border-radius:50%;background:var(--acc-s);color:var(--acc-h)}
.eyebrow .up svg{width:16px;height:16px;stroke-width:2.4}
@keyframes rise{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
/* v10: plain static arrow, lowercase "s" in 1990's, same icon layout in both cards on phones */
.eyebrow .nocase{text-transform:none}
.eyebrow .up{width:auto;height:auto;margin-left:8px;vertical-align:-2px;background:none;border-radius:0;color:inherit;animation:none}
.eyebrow .up svg{width:15px;height:15px;stroke-width:2.2}
@media (max-width:640px){
  .era-top{flex-direction:column;align-items:flex-start;gap:10px}
  .new .era-icons svg{width:20px;height:20px}
}