/* KA IT — Base UI (assets/css/style.css) */
/* Typography & base */
:root{
  /* Stripe Light System tokens */
  --container:1200px;
  --s-1:8px;
  --s-2:16px;
  --s-3:24px;
  --s-4:32px;
  --s-5:48px;
  --s-6:72px;

  --bg:#ffffff;
  --panel:#ffffff;
  --surface:var(--panel);
  --surface-2:#f6f9fc;
  --surface-3:#eef2ff;

  --text:#0a2540;
  --muted:#425466;
  --muted-2:#6b7c93;

  --brand:#635bff;
  --brand-600:#4f46e5;
  --primary:var(--brand);
  --primary-hover:var(--brand-600);

  --ring:rgba(99,102,241,.28);
  --border:rgba(60,66,87,.16);
  --border-strong:rgba(60,66,87,.22);

  --shadow-sm:0 10px 25px rgba(15,23,42,.08);
  --shadow:0 18px 55px rgba(15,23,42,.10);
  --radius:18px;
  --radius-sm:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}

/* Layout helpers */
.section{max-width:var(--container);margin:32px auto;padding:0 16px}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.grid-auto{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.grid-auto>.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card{grid-column:span 6}
.grid-3{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.grid-3>.card{grid-column:span 4}

/* Header & nav */
header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.nav-wrap{max-width:1120px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:18px}
.brand .title{font-weight:700;letter-spacing:.2px}
.brand .subtitle{font-size:12px;color:var(--muted)}

.nav-links{margin-left:auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.nav-links a{color:#0f1720;text-decoration:none;padding:8px 10px;border-radius:10px}
.nav-links a:hover{background:#f0f4ff}
.nav-links a.active{font-weight:600;color:var(--brand)}
.nav-cta{background:var(--brand);color:#fff !important;padding:8px 14px;border-radius:12px;box-shadow:var(--shadow)}
.nav-cta:hover{background:var(--brand-600)}

.langs{color:var(--muted);font-size:14px;display:flex;gap:8px;align-items:center}
.langs a{color:var(--muted);text-decoration:none}
.langs a:hover{color:var(--text)}

/* Mobile burger */
.burger{display:none;margin-left:8px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:#0f1720;position:relative}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;right:0;height:2px;background:#0f1720}
.burger span:before{top:-6px}.burger span:after{top:6px}
.mobile{display:none;border-top:1px solid var(--border);background:#fff}
.mobile.open{display:block}
.mobile ul{list-style:none;margin:0;padding:10px}
.mobile li a{display:block;padding:10px 12px;border-radius:10px;color:#0f1720;text-decoration:none}
.mobile li a:hover{background:#f3f4f6}
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:block}
  .grid-auto>.card,.grid-3>.card{grid-column:span 12}
}

/* Section titles & hero */
h1{font-size:28px;line-height:1.2;margin:0 0 8px}
h2{font-size:22px;margin:0 0 8px}
h3{font-size:18px;margin:0 0 6px}
p{margin:0 0 12px;color:#1f2937}
.badge{display:inline-flex;gap:8px;align-items:center;background:#eef2ff;color:#1e3a8a;border:1px solid #e0e7ff;border-radius:999px;padding:6px 10px;font-size:12px}
.badge .dot{width:7px;height:7px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}

/* Cards */
.card,.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
ul{margin:8px 0 0 18px;padding:0}
li{margin:4px 0}

/* Pricing tiers */
.pricing{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.tier{grid-column:span 3;background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.tier .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.tier .price{font-size:28px;font-weight:700;margin:6px 0 10px}
.tier .price span{font-size:12px;font-weight:500;color:var(--muted)}
.tier ul{list-style:disc;margin-left:18px}
.tier.featured{border-color:#c7d2fe;box-shadow:0 1px 2px rgba(79,70,229,.1),0 10px 24px rgba(79,70,229,.15)}

/* Forms */
.form-card{display:grid;grid-template-columns:1.15fr 1.85fr;gap:16px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.form-card .card{border:none;box-shadow:none;padding:0}
label{display:block;font-weight:600;margin:8px 0 6px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;padding:12px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;outline:none;
}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:#bcd1ff;box-shadow:0 0 0 4px var(--ring)}
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-weight:600;cursor:pointer;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease}
.btn.primary,.submit.primary,button.primary{background:var(--brand);color:#fff;border-color:rgba(99,102,241,.35);box-shadow:0 18px 40px rgba(99,102,241,.18)}
.btn.primary:hover,.submit.primary:hover{background:var(--brand-600)}

/* Footer */
footer{margin-top:8px;border-top:none;background:transparent}
.footer-inner{max-width:1120px;margin:0 auto;padding:18px 16px;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}
.footer-links{display:flex;gap:16px}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--text)}

/* Small helpers */
.muted{color:var(--muted)}
.mini{font-size:12px;color:var(--muted)}


/* KA IT — clickable pricing tiers */
.tier{position:relative}
.tier-overlay{position:absolute;inset:0;z-index:5;text-indent:-9999px}


/* --- Mobile fix for pricing packs (KA IT) --- */
@media (max-width: 900px) {
  .pricing-row {
    display: flex;
    flex-direction: column;
  }
  .pricing-row .tier {
    grid-column: auto;
    width: 100%;
  }
}

/* Stripe-light alternating sections (subtle, full-bleed) */
.section.section-alt{
  position:relative;
}
.section.section-alt::before{
  content:"";
  position:absolute;
  inset:-32px -100vmax;
  background:var(--surface-2);
  border-radius: 28px;
  z-index:-1;
}

.btn.secondary,.btn.ghost{background:rgba(255,255,255,.95);border-color:var(--border);color:var(--text)}

.btn:focus,button:focus{outline:none;box-shadow:0 0 0 4px var(--ring), var(--shadow-sm)}

h1{font-size:clamp(40px,4.2vw,56px);line-height:1.05;letter-spacing:-0.02em}
.lead{font-size:18px;color:var(--muted)}


/* === Release v11: Pricing packs mobile stack (robust) ===
   Some iOS/Safari setups (or cached/desktop-viewport) can render with a wider layout.
   This forces the 3 pack cards to stack earlier so they never become ultra-narrow. */
@media (max-width: 1100px), (max-device-width: 480px){
  .pricing-preview .pricing-row,
  .pricing-row{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
  }
  .pricing-preview .pricing-row > .tier,
  .pricing-row > .tier{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
  .pricing-preview .tier .benefits,
  .tier .benefits{
    padding-left: 18px; /* keeps bullets readable */
  }
}
/* a11y: visually-hidden helper (used for logo text fallback) */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}