/* Solantex site stylesheet
   Version: 1.0.0
   Source of truth: solantex_landing_final_v2_finish.html (locked 2026-08-16).
   Rules: CSS grid only, NO flex, NO SVG. Depth via gradients and shadows,
   no stock imagery. Mobile breakpoint 880px. */

* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --navy:#152238; --navy2:#1D2E4A; --blue:#3E6AB2; --blue-lt:#7C9CD0; --gold:#F5B301;
  --ink:#1B2534; --body:#404C5E; --dim:#6E7989;
  --bg:#FFFFFF; --tint:#F3F5F8; --line:#D9DEE6;
}
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--body); font-size:16.5px; line-height:1.7; }
.wrap { max-width:1100px; margin:0 auto; padding:0 28px; }
a:focus-visible, button:focus-visible { outline:3px solid var(--blue-lt); outline-offset:2px; }

/* Header */
header { border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:40; }
.nav { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; height:72px; gap:16px; }
.nav .logo img { height:29px; width:auto; display:block; }
.links { text-align:right; }
.links a { display:inline-block; font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none; padding:6px 11px; border-radius:6px; }
.links a:hover { color:var(--blue); background:var(--tint); }
.links a.active { color:var(--blue); }
.btn { display:inline-block; background:linear-gradient(180deg, #4A79C4, var(--blue)); color:#fff; font-weight:600; font-size:15px; text-decoration:none; padding:12px 24px; border-radius:6px; box-shadow:0 4px 14px rgba(62,106,178,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.btn:hover { background:linear-gradient(180deg, var(--blue), var(--navy2)); box-shadow:0 6px 18px rgba(21,34,56,.4); }
.menu-btn { display:none; background:none; border:1px solid var(--line); border-radius:6px; padding:8px 12px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; }
.m-nav { display:none; border-top:1px solid var(--line); background:var(--bg); }
.m-nav.open { display:block; }
.m-nav a { display:block; padding:14px 28px; font-size:16px; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }

/* Hero: layered glow + faint engineering grid */
.hero {
  position:relative; overflow:hidden; padding:76px 0 66px;
  background:
    radial-gradient(ellipse 60% 55% at 78% 12%, rgba(245,179,1,.16), transparent 60%),
    radial-gradient(ellipse 55% 60% at 8% 95%, rgba(124,156,208,.22), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy2) 100%);
}
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
}
.hero .wrap { position:relative; z-index:1; }
.hero h1 { color:#fff; font-size:clamp(28px,3.8vw,46px); font-weight:700; line-height:1.22; letter-spacing:-.7px; max-width:800px; margin-bottom:18px; }
.hero h1 em { font-style:normal; color:var(--gold); }
.hero p { color:#B9C4D6; font-size:18px; max-width:620px; margin-bottom:28px; }
.hero-row { display:grid; grid-template-columns:auto auto; gap:22px; align-items:center; justify-content:start; }
.hero-link { color:#C9D4E4; font-size:15px; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:2px; }
.hero-link:hover { color:#fff; border-bottom-color:#fff; }

/* Product cards bridging out of the hero */
.bridge { margin-top:-40px; padding-bottom:0; }
.cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.card { position:relative; overflow:hidden; background:linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%); border:1px solid var(--line); border-radius:12px; padding:29px 26px 22px; box-shadow:0 2px 4px rgba(21,34,56,.06), 0 14px 34px rgba(21,34,56,.10); display:grid; grid-template-rows:auto auto 1fr auto; transition:transform .18s ease, box-shadow .18s ease; }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--blue), var(--blue-lt)); }
.card.base::before { background:linear-gradient(90deg, var(--gold), #FFCE45); }
.card:hover { transform:translateY(-3px); box-shadow:0 4px 8px rgba(21,34,56,.08), 0 22px 46px rgba(21,34,56,.16); }
.card .tag { font-size:12px; font-weight:700; color:var(--dim); margin-bottom:8px; }
.card.base .tag { color:var(--gold); }
.card h2 { font-size:18.5px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.card p { font-size:14.5px; margin-bottom:16px; }
.card a { font-size:14px; font-weight:600; color:var(--blue); text-decoration:none; justify-self:start; border-bottom:2px solid var(--line); padding-bottom:2px; }
.card a:hover { border-bottom-color:var(--blue); }
.cardnote { font-size:13.5px; color:var(--dim); margin-top:16px; }

/* Sections */
section { padding:72px 0; border-bottom:1px solid var(--line); }
section.alt { background:linear-gradient(180deg, var(--bg) 0%, var(--tint) 100%); }
.klabel { display:grid; grid-template-columns:26px auto; gap:10px; align-items:center; justify-content:start; font-size:14px; font-weight:700; color:var(--blue); margin-bottom:8px; }
.klabel::before { content:''; height:3px; background:linear-gradient(90deg, var(--gold), var(--blue)); border-radius:2px; }
h2.t, .duo h2.t { font-size:clamp(24px,2.7vw,32px); font-weight:700; color:var(--ink); letter-spacing:-.4px; margin-bottom:14px; }
.lede { font-size:17px; max-width:660px; margin-bottom:38px; }

/* Condensed visit + languages side by side */
.duo { display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:start; }
.quote { display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:start; margin-top:14px; padding:12px 18px; background:linear-gradient(180deg, #F5F7FA, #EFF2F7); border-left:3px solid var(--blue); border-radius:0 10px 10px 0; font-size:14.5px; color:var(--ink); box-shadow:0 4px 12px rgba(21,34,56,.06); }
.quote.visitor { grid-template-columns:1fr; border-left-color:var(--line); }
.quote img { width:26px; height:26px; display:block; padding-top:2px; }
.quote b { font-weight:700; color:var(--dim); font-size:12.5px; display:block; margin-bottom:2px; }
.duo .after { font-size:15px; margin-top:16px; }
.langlist { border-top:2px solid var(--navy); }
.langrow { padding:18px 0; border-bottom:1px solid var(--line); }
.langrow .tag { font-size:12px; font-weight:700; color:var(--dim); margin-bottom:4px; }
.langrow p { font-size:15.5px; color:var(--ink); font-weight:600; }
.langnote { margin-top:16px; font-size:14px; }

/* Pricing */
.priceband { background:linear-gradient(135deg, #F5F7FA 0%, #E9EEF6 100%); border:1px solid var(--line); border-radius:12px; padding:32px 36px; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; box-shadow:inset 0 1px 0 #FFFFFF, 0 10px 26px rgba(21,34,56,.07); }
.priceband h3 { font-size:19px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.priceband p { font-size:15px; max-width:600px; }
.tiers { margin-top:14px; display:grid; grid-template-columns:auto auto auto; gap:10px; justify-content:start; }
.tier { font-size:13px; font-weight:600; color:var(--navy); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:7px 14px; }

/* Beta program strip: soft descriptor, selective framing, no popup */
.betastrip { border-left:4px solid var(--gold); background:linear-gradient(180deg, #FDFBF4, #FAF6EA); border-radius:0 12px 12px 0; padding:22px 28px; display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center; box-shadow:0 6px 18px rgba(21,34,56,.05); }
.betastrip p { font-size:15px; color:var(--ink); max-width:720px; }
.betastrip p b { font-weight:700; }
.betastrip a { font-size:14.5px; font-weight:600; color:var(--blue); text-decoration:none; white-space:nowrap; border-bottom:2px solid var(--gold); padding-bottom:2px; }
.betastrip a:hover { color:var(--navy); }

/* Straight answers */
.qa { padding:18px 0; border-bottom:1px solid var(--line); }
.qa:last-child { border-bottom:none; }
.qa h3 { font-size:16px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.qa p { font-size:15px; max-width:680px; }

/* Contact CTA band */
.cta {
  position:relative; overflow:hidden; border-bottom:none;
  background:
    radial-gradient(ellipse 55% 70% at 85% 30%, rgba(245,179,1,.13), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy2) 100%);
}
.cta .wrap { position:relative; z-index:1; }
.cta .watermark { position:absolute; right:-70px; bottom:-90px; width:380px; height:380px; opacity:.06; z-index:0; }
.cta h2 { color:#fff; font-size:clamp(25px,2.9vw,34px); font-weight:700; margin-bottom:12px; }
.cta p { color:#B9C4D6; max-width:560px; margin-bottom:28px; }

/* Footer */
footer { background:var(--navy); padding:44px 0 34px; border-top:3px solid var(--gold); }
.foot { display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:start; }
.foot img { height:24px; width:auto; }
.foot-links { text-align:right; }
.foot-links a { color:#C4CEDD; text-decoration:none; font-size:14px; display:inline-block; padding:2px 10px; }
.foot-links a:hover { color:#fff; }
.legal { margin-top:22px; font-size:13px; color:#8B99AF; }

/* Mobile */
@media (max-width:880px) {
  .links { display:none; }
  .menu-btn { display:block; }
  .hero { padding:52px 0 46px; }
  .hero-row { grid-template-columns:1fr; gap:16px; justify-items:start; }
  .bridge { margin-top:0; padding-top:24px; }
  .cards { grid-template-columns:1fr; }
  section { padding:52px 0; }
  .duo { grid-template-columns:1fr; gap:36px; }
  .priceband, .betastrip { grid-template-columns:1fr; padding:26px 22px; }
  .tiers { grid-template-columns:1fr 1fr; }
  .foot { grid-template-columns:1fr; }
  .foot-links { text-align:left; }
  .foot-links a { padding:2px 14px 2px 0; }
}