:root {
  --bg: #FFFFFF;
  --bg2: #F8FAFC;
  --text: #0F172A;       /* slate-900 */
  --muted: #475569;      /* slate-600 */
  --primary: #0F172A;
  --accent: #16A34A;     /* green-600 */
  --card: #FFFFFF;
  --card2: #F9FAFB;
  --ring: rgba(2,6,23,.08); /* subtle dark border */
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  line-height: 1.6;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  min-height: 100vh;
}

.container { width: min(1100px, 92vw); margin: 0 auto; }

.nav {
  position: sticky; top:0; z-index: 50;
  backdrop-filter: saturate(1.2) blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.66));
  border-bottom: 1px solid var(--ring);
}
.nav .row {
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 0;
}
.brand { display:flex; align-items:center; gap: 12px; text-decoration:none; }
.brand img, .brand svg { height: 64px; width: auto; display:block; }
.brand span { font-weight: 700; font-size: 18px; color: var(--primary); letter-spacing:.2px; }
.nav a { color: var(--text); text-decoration:none; opacity:.9; padding:10px 12px; border-radius:10px;  font-size: 18px; font-size: 19px;}
.nav a:hover { background: rgba(255,255,255,.06); opacity:1; }
.cta {
  background: var(--accent); color: #052e12; font-weight: 700; padding: 12px 20px; border-radius: 12px;
  text-decoration:none; display:inline-flex; align-items:center; gap:10px; border:0;
}
.cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ghost { border:1px solid var(--ring); color: var(--text); background: transparent; }
.hero {
  padding: 72px 0 40px;
}
.hero h1 { font-size: clamp(32px, 6vw, 54px); line-height: 1.05; margin: 0 0 14px; }
.hero p.lede { font-size: clamp(16px, 2.6vw, 20px); color: var(--muted); margin:0 0 26px; }
.hero .card {
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--ring);
  border-radius: 18px;
  padding: 22px;
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
  box-shadow: 0 6px 24px rgba(2,6,23,.06), inset 0 1px 0 rgba(255,255,255,.8);
}
.badges { display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
.badge { font-size:12px; color:#4338CA; background: rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.22); padding:5px 10px; border-radius:999px; }

.grid {
  display:grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tile {
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--ring);
  border-radius: 16px; padding: 18px;
}
.tile h3 { margin: 4px 0 8px; font-size: 18px; }
.tile p { margin:0; color: var(--muted); font-size: 14px; }
.kicker { color:#93C5FD; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }

.section { padding: 36px 0; }
.section h2 { font-size: clamp(24px, 4.2vw, 36px); margin: 0 0 16px; }
.section p.sub { color: var(--muted); margin: 0 0 20px; }

.feature-list { display:flex; flex-direction:column; gap: 12px; }
.feature { display:flex; gap:12px; align-items:flex-start; }
.feature .dot { width: 20px; height: 20px; background: var(--accent); border-radius:6px; display:inline-block; margin-top: 4px; }
.feature strong { color: #F9FAFB; }
.cards-2 { display:grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cards-2 { grid-template-columns: 1fr 1fr; } }

.quote {
  background: linear-gradient(180deg, #F8FAFC, #FFFFFF);
  border: 1px solid var(--ring);
  padding: 20px; border-radius: 16px; font-size: 16px; color: #065F46;
}
.quote .who { color: var(--muted); font-size: 14px; margin-top: 6px; }

.faq details { background: linear-gradient(180deg, var(--card), var(--card2)); border:1px solid var(--ring); border-radius:14px; padding: 14px 16px; }
.faq details + details { margin-top: 10px; }
.faq summary { cursor:pointer; font-weight: 600; }
.faq p { color: var(--muted); margin-top: 8px; }

.footer {
  border-top: 1px solid var(--ring); margin-top: 40px; padding: 24px 0; color: var(--muted);
}
.footer a { color: var(--primary); text-decoration:none; }
.footer a:hover { text-decoration: underline; }

.code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
         background: #0a0f1d; border:1px solid var(--ring); padding:2px 6px; border-radius:6px; }


.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border:1px solid var(--ring);
  border-radius: 14px;
  overflow: hidden;
}
.table th, .table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--ring);
  text-align: left;
  vertical-align: top;
}
.table tr:last-child td { border-bottom: 0; }
.table th { background: var(--card2); font-weight: 700; }
.kit { display:grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ss {
  border:1px solid var(--ring);
  border-radius: 12px;
  background: linear-gradient(180deg, #F8FAFC, #FFFFFF);
  height: 220px;
  display:grid; place-items:center;
  color: var(--muted);
  font-size: 14px;
}
.callout {
  background: linear-gradient(180deg, #ECFDF5, #FFFFFF);
  border:1px solid rgba(16,185,129,.25);
  padding: 16px; border-radius: 14px;
  color: #065F46;
}
.pricing-box {
  border:1px solid var(--ring); border-radius: 14px; padding: 18px;
  background: var(--card);
}
.price { font-size: 28px; font-weight: 800; color: var(--primary); }
.small { font-size: 13px; color: var(--muted); }
.anchor-nav { display:flex; flex-wrap:wrap; gap:10px; margin: 10px 0 18px; }
.anchor-nav a { border:1px solid var(--ring); border-radius: 999px; padding:6px 10px; text-decoration:none; color: var(--primary); }
.anchor-nav a:hover { background:#F1F5F9; }
.badge-green { background:#DCFCE7; color:#166534; border:1px solid #86EFAC; padding:4px 8px; border-radius:999px; font-size:12px; }


.pricing { display:grid; gap:18px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .pricing { grid-template-columns: 1fr 1fr; } }
.plan { background: var(--card); border:1px solid var(--ring); border-radius:14px; padding:18px; }
.plan strong.tier { display:block; font-size:22px; }
.plan .sub { color: var(--muted); margin-top: 2px; }
.plan .price { font-size: 38px; font-weight: 900; margin: 12px 0 2px; color: var(--primary); }
.plan .cta { width: 100%; justify-content: center; }
.ribbon { background:#FDE68A; color:#7C2D12; font-weight: 800; font-size:12px; padding:6px 10px; border-radius:10px; display:inline-block; margin-bottom:10px; border:1px solid #F59E0B; }
.plan--featured { border-color:#F59E0B; box-shadow: 0 8px 24px rgba(245,158,11,.18); }
.feature-rows { margin-top: 26px; }
.fr { display:grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: start; padding: 18px 0; border-top:1px solid var(--ring); }
.fr:first-child { border-top:0; }
.fr h3 { margin: 0 0 6px; font-size: 22px; }
.fr p { margin: 0; color: var(--muted); }
.ico { width:72px; height:72px; border-radius: 12px; display:grid; place-items:center; border:1px solid var(--ring); background: linear-gradient(180deg, #F8FAFC, #FFFFFF); font-weight:800;}
.activate { text-align:center; margin-top: 14px; color: var(--primary); }
.hero-simple { background:#F3F4F6; border-bottom:1px solid #E5E7EB; padding: 42px 0; }
.hero-simple h1 { font-size: clamp(36px, 6vw, 56px); margin: 0 0 6px; color: #0F172A; }
.hero-simple p { color:#374151; font-size: 18px; margin: 0; }
.section-title { text-align:center; font-size: clamp(28px, 4.5vw, 40px); margin: 26px 0 10px; }


.ico { width:72px; height:72px; object-fit:contain; border:1px solid var(--ring); border-radius:12px; padding:8px; background:linear-gradient(180deg,#F8FAFC,#FFFFFF); }
.modal[aria-hidden="false"] { display:block; }


/* Align pricing buttons across cards */
.pricing { align-items: stretch; }
.plan { display: flex; flex-direction: column; }
.plan .price { margin-top: 10px; }
.plan .small { margin-top: 6px; }
.plan .cta { margin-top: auto; width: 100%; justify-content: center; }


/* Force bottom-aligned pricing CTA buttons */
.plan { position: relative; padding-bottom: 90px; } /* reserve space for the button */
.plan .cta { 
  position: absolute; 
  left: 18px; 
  right: 18px; 
  bottom: 18px; 
  margin-top: 0; 
  width: auto; 
  justify-content: center; 
}


/* Ribbon inside card header for alignment */
.plan { position: relative; padding-top: 68px; } /* reserve space for ribbon across all plans */
.plan .ribbon {
  position: absolute;
  top: 14px;
  left: 18px;
  right: 18px;
  margin: 0; /* don't push content */
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}


/* Featured plan glow + hover */
.plan--featured {
  border-color: #F59E0B;
  box-shadow: 0 14px 38px rgba(245, 158, 11, 0.25), 0 0 0 2px rgba(245, 158, 11, 0.55) inset;
  background-image: radial-gradient(600px 200px at 20% 0%, rgba(245, 158, 11, 0.06), transparent 60%);
  transition: transform .18s ease, box-shadow .18s ease;
}
.plan--featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(245, 158, 11, 0.30), 0 0 0 2px rgba(245, 158, 11, 0.65) inset;
}


/* Premium pricing typography */
.plan .price {
  font-size: 64px;         /* big, bold amount */
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.plan .price .small {
  font-size: 22px;         /* smaller unit (/year, /month) */
  font-weight: 700;
  letter-spacing: 0;
}
.plan .vat-note,
.plan + .small, .plan .small-note {
  text-align: left;
  font-size: 18px;
  color: #0F172A;
  opacity: .9;
}
\n
.plan .price .currency { font-size: 48px; font-weight: 800; line-height: 1; }
.plan .price .amount   { font-size: 64px; font-weight: 900; line-height: 1; }