/* ============ Recon Design System ============ */
:root{
  /* App-matching dark + blueAccent palette */
  --bg:#0b0e12;
  --surface:#12151b;
  --surface-2:#161a22;
  --elev:#1a1f2a;

  --text:#e9edf6;
  --muted:#a8b1c4;
  --line:#232a37;

  --primary:#4ea3ff;
  --primary-strong:#2e86ff;
  --accent:#00e0d1;
  --ok:#38d686;
  --warn:#ffd365;
  --danger:#ff6b6b;

  --radius-xl:18px;
  --radius-lg:14px;
  --radius:12px;
  --radius-sm:10px;

  --shadow-1:0 12px 30px rgba(0,0,0,.35);
  --shadow-2:0 22px 44px rgba(0,0,0,.45);

  --grad-1: radial-gradient(1200px 800px at 10% -10%,rgba(78,163,255,.18),transparent 60%),
            radial-gradient(1200px 800px at 110% 10%,rgba(0,224,209,.12),transparent 60%);

  /* Spacing & typography scales for mobile → desktop */
  --space: clamp(16px, 4vw, 24px);
  --space-lg: clamp(24px, 6vw, 40px);
  --space-xl: clamp(36px, 9vw, 64px);

  --fs-hero: clamp(28px, 6.2vw, 46px);
  --fs-h2: clamp(20px, 3.5vw, 28px);
  --fs-body: clamp(15px, 1.9vw, 16px);
  --fs-small: clamp(13px, 1.7vw, 14px);

  /* Breakpoints */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}

/* ===== Reset / Base ===== */
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/1.6 Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  letter-spacing:.2px;
  /* iOS safe areas */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
img{max-width:100%;display:block;height:auto}
a{color:var(--primary);text-decoration:none;transition:opacity .2s}
a:hover{opacity:.9}
hr{border:none;border-top:1px solid var(--line);margin:var(--space) 0}

/* Focus visibility for keyboard users */
:focus-visible{outline:2px solid color-mix(in srgb, var(--primary) 75%, white); outline-offset:2px; border-radius:8px}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important}
}

/* ===== Layout ===== */
.container{max-width:1180px;margin:0 auto;padding:0 var(--space)}
.section{margin:var(--space-lg) 0}
.section h2{margin:0 0 6px; font-size:var(--fs-h2)}
.section p.lead{color:var(--muted);margin:6px 0 10px}

/* Mobile-first grid */
.grid{display:grid;gap:clamp(14px, 3.8vw, 22px)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media (min-width: 700px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 960px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

.panel{
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  overflow:hidden; /* prevents child bleed on rounded corners */
}

/* ===== Navigation ===== */
nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border-bottom:1px solid var(--line);
}
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0; /* tighter on mobile */
}
.brand{display:flex;align-items:center;gap:10px;min-height:44px}
.brand-logo{
  width:28px;height:28px;border-radius:8px;
  background: conic-gradient(from 120deg, var(--primary), #7eb8ff 35%, var(--accent) 70%, #0ff 100%);
  box-shadow: 0 0 18px rgba(78,163,255,.35), inset 0 0 18px rgba(0,224,209,.18);
}
.brand-name{font-weight:800;letter-spacing:.4px;font-size:clamp(16px, 3.6vw, 20px)}
.badge{
  background:#0e1320;border:1px solid #20283a;color:#cbd5ea;
  padding:3px 9px;border-radius:999px;font-size:var(--fs-small)
}

/* Mobile nav: stack links, bigger tap targets */
.navlinks{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.navlinks a{
  color:#dfe6fb;padding:10px 12px;border-radius:10px;position:relative;
  min-height:44px; display:inline-flex; align-items:center;
}
.navlinks a.active, .navlinks a:hover{
  background: linear-gradient(180deg, #101626, #0d1422);
  outline:1px solid #1b2740;
}

/* ===== Hero ===== */
.hero{
  padding: var(--space-lg) 0; background: var(--grad-1);
}
.hero-card{
  padding: clamp(22px, 5vw, 38px); border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)) ,
    linear-gradient(180deg, var(--surface), var(--elev));
  border:1px solid #1b2130; box-shadow: var(--shadow-2);
}
.hero h1{font-size:var(--fs-hero);line-height:1.12;margin:0 0 8px;letter-spacing:.3px}
.hero p{color:var(--muted);max-width:72ch}
.hero .cta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

/* ===== Cards / Blocks ===== */
.card{
  padding: clamp(16px, 4.2vw, 22px); border-radius:var(--radius-lg);
  background: linear-gradient(180deg, #121722, #0f141e);
  border:1px solid var(--line); box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform: translateY(-1px); border-color:#2a3750; box-shadow:0 16px 44px rgba(0,0,0,.5)}
.card h3{margin:6px 0 6px; font-size:clamp(16px, 3.2vw, 20px)}
.kv{display:flex;gap:12px;align-items:flex-start}
.kv .icon{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:#cfe0ff;background:linear-gradient(180deg,#12213a,#0d1525);border:1px solid #1d2a42;
  box-shadow: inset 0 0 18px rgba(78,163,255,.08);
}

/* ===== Buttons ===== */
.btn{
  display:inline-block;padding:14px 18px;border-radius:12px;font-weight:700;
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  color:white; box-shadow:0 8px 18px rgba(78,163,255,.35); border:1px solid #3178f6;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s;
  min-height:44px; /* finger-friendly */
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 12px 26px rgba(78,163,255,.45) }
.btn:active{transform: translateY(0)}
.btn.secondary{
  background: linear-gradient(180deg, var(--accent), #00c4b7);
  border-color:#00bdb0; box-shadow:0 8px 18px rgba(0,224,209,.25)
}
.btn.outline{
  background:transparent; color:var(--primary);
  border:1px solid #2a3750; box-shadow:none
}
.btn.block{display:block;width:100%;text-align:center}

/* ===== Tables ===== */
/* Keep your existing table but make cells wrap & scroll nicely on small screens */
.table-wrap{overflow:auto; -webkit-overflow-scrolling: touch}
table{
  width:100%; border-collapse:separate; border-spacing:0;
  background: linear-gradient(180deg, #121722, #0f141e);
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow: var(--shadow-1)
}
th,td{padding:12px 14px;border-bottom:1px solid #20283a; word-break: break-word}
th{
  background: linear-gradient(180deg,#0f1726,#0d1421);
  color:#d8e4ff; text-align:left; position:sticky; top:0; z-index:1
}
tbody tr:hover{background:#12192a}
td.center{text-align:center}
.check{color:var(--ok);font-weight:800}
.cross{color:#7e8699}

/* ===== Ribbons / Pricing cards ===== */
.ribbon{
  position:absolute; top:14px; right:-8px; padding:6px 12px;
  background: linear-gradient(180deg,#ffb76a,#ff9640);
  color:#23140a; font-weight:800; border-radius:10px 10px 0 10px;
  box-shadow:0 8px 18px rgba(255,150,64,.25); border:1px solid #ff9c4b
}

/* ===== Footer ===== */
footer{
  margin-top:var(--space-lg);
  border-top:1px solid var(--line);
  color:#9aa5bd;
  padding-bottom: env(safe-area-inset-bottom);
}
footer .foot{
  padding:var(--space) 0;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
footer .foot a{min-height:44px; display:inline-flex; align-items:center}

/* ===== Utilities ===== */
.m-0{margin:0}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.text-muted{color:var(--muted)}
.badge.soft{ background:#0f1627;border:1px solid #1b2740;color:#c6d3f1 }

/* Show/hide helpers */
.hide-mobile{display:none}
@media (min-width: var(--bp-md)){
  .hide-mobile{display:initial}
}
.show-mobile{display:initial}
@media (min-width: var(--bp-md)){
  .show-mobile{display:none}
}

/* Larger layouts scale up spacing a bit */
@media (min-width: var(--bp-lg)){
  .navbar{padding:14px 0}
  .navlinks{gap:18px}
  .hero{padding: var(--space-xl) 0}
}



/* ---- Plans UI additions ---- */
.price{ font-size: 1.75rem; font-weight: 800; margin: .25rem 0 .5rem; }
.price .per{ font-size: .9rem; font-weight: 600; opacity: .8; margin-left: .15rem; }
.cta{ margin-top: .5rem; }
.btn{ display:inline-block; padding:.65rem 1rem; border-radius: 0.75rem; background: var(--blueAccent, #3b82f6); color: var(--bg,#0b0e12); font-weight:700; text-decoration:none; }
.btn:hover{ filter: brightness(1.06); }
.table-wrap{ overflow-x: auto; }
.plan-table{ width:100%; border-collapse: collapse; }
.plan-table th, .plan-table td{ padding:.75rem 1rem; border-bottom:1px solid var(--line,#232a37); text-align:center; }
.plan-table th:first-child, .plan-table td:first-child{ text-align:left; }


/* ---- Responsive comparison + sticky header + FAQ ---- */
.plan-table thead th{
  position: sticky; top: 0; z-index: 2; backdrop-filter: saturate(1.2) blur(6px);
  background: var(--surface, #12151b);
}
details{ background: var(--surface-2,#161a22); border: 1px solid var(--line,#232a37); border-radius: 0.75rem; padding: .75rem 1rem; margin: .5rem 0; }
details > summary{ cursor: pointer; font-weight: 700; }
details[open]{ box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset; }

/* Card view appears on small screens, table hides */
#compare-cards{ display: none; }
@media (max-width: 720px){
  .table-wrap, #compare{ display: none; }
  #compare-cards{ display: block; }
  .compare-cards{
    display: grid; gap: var(--space,16px);
    grid-template-columns: 1fr;
  }
  .cmp-card{
    background: var(--surface-2,#161a22);
    border: 1px solid var(--line,#232a37);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
  }
  .cmp-card h3{ margin: 0 0 .5rem; }
  .cmp-card ul{ margin: 0; padding-left: 1.2rem; }
}

/* Left-align Pricing FAQ */
.faq-left .container{ max-width: 960px; margin-left:auto; margin-right:auto; }
.faq-left, .faq-left details, .faq-left p { text-align: left; }