/* Nynch Landing Styles */
:root {
  --bg: #0c0d0f;
  --bg-alt:#13151a;
  --bg-soft:#1b1e24;
  --border:#262a33;
  --primary:#3d7dff;
  --primary-accent:#6aa2ff;
  --primary-glow:rgba(61,125,255,.35);
  --text:#f2f5f9;
  --text-soft:#b5bcc7;
  --danger:#ff4d4f;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 4px 16px -4px rgba(0,0,0,.6),0 2px 4px -1px rgba(0,0,0,.35);
  --gradient:linear-gradient(135deg,#214b99,#142c55 52%,#0d1624 100%);
  --font-stack:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-stack); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
html, body { -webkit-text-size-adjust:100%; }
body { overflow-x:hidden; }
body.js nav .menu { transition:max-height .4s ease; }

img { max-width:100%; display:block; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

.container { width:100%; max-width:1180px; margin:0 auto; padding:0 1.25rem; }
.flex { display:flex; }
.between { justify-content:space-between; }
.center { align-items:center; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:rgba(12,13,15,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); }
.site-header .logo { font-weight:700; font-size:1.25rem; letter-spacing:.5px; color:var(--text); display:inline-block; }
.site-header .logo span { color:var(--primary); }
.main-nav { position:relative; }
.main-nav .menu { list-style:none; margin:0; padding:0; display:flex; gap:1.75rem; }
.main-nav .menu a { font-weight:500; color:var(--text-soft); }
.main-nav .menu a:hover { color:var(--text); }
.nav-toggle { display:none; background:none; border:1px solid var(--border); color:var(--text); padding:.55rem .8rem; border-radius:var(--radius-sm); cursor:pointer; }

/* Hero */
.hero { padding:5.5rem 0 4rem; background:var(--gradient); position:relative; overflow:hidden; }
.hero:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 40%, var(--primary-glow), transparent 60%); opacity:.55; }
.hero-content { position:relative; z-index:2; max-width:760px; }
.hero h1 { margin:0 0 1.25rem; font-size:clamp(2.15rem,5vw,3.2rem); line-height:1.08; letter-spacing:.5px; }
.lead { font-size:1.15rem; line-height:1.5; color:var(--text-soft); margin:0 0 1.75rem; }
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.trust-points { list-style:none; padding:0; margin:0; display:flex; gap:1.25rem; flex-wrap:wrap; color:var(--text-soft); font-size:.9rem; }

/* Buttons */
.btn-primary, .btn-secondary, .btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; font-weight:600; border-radius:var(--radius-sm); padding:.7rem 1.15rem; line-height:1; position:relative; }
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 4px 14px -4px rgba(61,125,255,.55); }
.btn-primary:hover { background:var(--primary-accent); text-decoration:none; }
.btn-secondary { background:var(--bg-soft); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:#222831; text-decoration:none; }
.btn-outline { border:1px solid var(--primary); color:var(--primary); }
.btn-outline:hover { background:var(--primary); color:#fff; text-decoration:none; }
.btn-primary.small, .btn-outline.small { padding:.5rem .85rem; font-size:.85rem; }
.btn-primary.large { font-size:1.05rem; padding:1rem 1.55rem; }

/* Social Proof */
.social-proof { background:var(--bg-alt); padding:2.75rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.social-proof .section-intro { text-transform:uppercase; font-size:.75rem; letter-spacing:1px; color:var(--text-soft); margin:0 0 1rem; }
.logo-line { display:flex; list-style:none; margin:0; padding:0; gap:2rem; flex-wrap:wrap; }
.logo-txt { font-weight:600; background:var(--bg-soft); padding:.55rem .9rem; border-radius:var(--radius-sm); border:1px solid var(--border); font-size:.85rem; }

/* Services */
.services { padding:4.5rem 0 3.5rem; }
.services h2 { margin:0 0 2.25rem; font-size:2.1rem; }
.grid { display:grid; gap:1.75rem; }
.cols-3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card.service { background:var(--bg-soft); padding:1.3rem 1.25rem 1.15rem; border-radius:var(--radius); border:1px solid var(--border); position:relative; transition:background .3s,border-color .3s; }
.card.service:hover { border-color:var(--primary); }
.card.service h3 { margin:.25rem 0 .65rem; font-size:1.05rem; }
.card.service p { margin:0; font-size:.92rem; line-height:1.4; color:var(--text-soft); }

/* Pricing */
.pricing { padding:4.5rem 0 3.25rem; background:linear-gradient(145deg,#12151b,#0d1218); position:relative; }
.pricing h2 { margin:0 0 1.1rem; font-size:2.1rem; }
.section-sub { color:var(--text-soft); margin:0 0 2.2rem; font-size:.95rem; }
.pricing-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.price-card { background:var(--bg-soft); border:1px solid var(--border); padding:1.5rem 1.4rem 1.4rem; border-radius:var(--radius); position:relative; display:flex; flex-direction:column; gap:1rem; min-height:100%; }
.price-card .badge { position:absolute; top:-10px; right:12px; background:var(--primary); padding:.35rem .6rem; font-size:.65rem; text-transform:uppercase; font-weight:600; border-radius:var(--radius-sm); letter-spacing:.5px; }
.price-card.highlight { border:1px solid var(--primary); box-shadow:0 0 0 1px var(--primary),0 6px 22px -8px var(--primary-glow); }
.price-card h3 { margin:0; font-size:1.05rem; letter-spacing:.5px; }
.price { font-weight:600; font-size:1.6rem; margin:0; }
.price small { font-size:.7rem; font-weight:500; margin-left:.25rem; color:var(--text-soft); }
.features { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; font-size:.8rem; color:var(--text-soft); }
.price-card .features { flex:1 1 auto; }

/* Stack popover */
.stack-item { position:relative; }
.stack-trigger { background:var(--bg-soft); color:var(--text-soft); border:1px dashed var(--border); width:100%; text-align:left; padding:.5rem .65rem; font-size:.75rem; line-height:1.2; border-radius:6px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.stack-trigger:hover { border-color:var(--primary); color:var(--text); }
.stack-trigger[aria-expanded="true"] { border-color:var(--primary); background:rgba(61,125,255,.08); color:var(--text); }
.badge-mini { display:inline-block; background:var(--primary); color:#fff; font-size:.55rem; padding:.15rem .4rem; border-radius:4px; letter-spacing:.5px; text-transform:uppercase; }
.stack-popover { position:absolute; left:50%; top:100%; transform:translate(-50%, .75rem); width:320px; max-width:92vw; background:#0f141b; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:.65rem .7rem .75rem; backdrop-filter:saturate(140%) blur(6px); z-index:60; animation:popIn .35s cubic-bezier(.22,.8,.36,1); }
.stack-popover:before { content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:14px; height:14px; background:#0f141b; border:1px solid var(--border); border-bottom:none; border-right:none; transform-origin:center; rotate:45deg; box-shadow:var(--shadow); }
@keyframes popIn { from { opacity:0; transform:translate(-50%, .4rem) scale(.96); } to { opacity:1; transform:translate(-50%, .75rem) scale(1); } }
.stack-popover-inner { display:flex; flex-direction:column; gap:.55rem; }
.stack-popover-head { display:flex; justify-content:space-between; align-items:center; }
.stack-popover-head strong { font-size:.78rem; letter-spacing:.5px; }
.stack-close { background:none; border:1px solid var(--border); color:var(--text-soft); border-radius:6px; font-size:.7rem; cursor:pointer; padding:.15rem .4rem; }
.stack-close:hover { color:var(--text); border-color:var(--primary); }
.stack-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem; font-size:.68rem; color:var(--text-soft); max-height:230px; overflow:auto; }
.stack-list li strong { color:var(--text); }
.stack-foot-note { margin:0; font-size:.6rem; color:var(--text-soft); opacity:.85; }

/* Scrollbar finesse */
.stack-list::-webkit-scrollbar { width:6px; }
.stack-list::-webkit-scrollbar-track { background:rgba(255,255,255,.04); }
.stack-list::-webkit-scrollbar-thumb { background:var(--primary); border-radius:10px; }
.billing-note { font-size:.75rem; margin:2rem 0 0; color:var(--text-soft); text-align:center; }

/* Advantages */
.advantages { padding:4.25rem 0 3.5rem; }
.advantages:before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); }
.advantages h2 { margin:0 0 2rem; font-size:2.1rem; }
.adv-card { background:var(--bg-soft); padding:1.2rem 1.1rem 1.05rem; border:1px solid var(--border); border-radius:var(--radius-sm); transition:border-color .3s; }
.adv-card:hover { border-color:var(--primary); }
.adv-card h3 { margin:.1rem 0 .55rem; font-size:1rem; }
.adv-card p { margin:0; font-size:.84rem; line-height:1.4; color:var(--text-soft); }

/* Tech */
.tech { padding:3.75rem 0 3.25rem; background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.tech h2 { margin:0 0 1.75rem; font-size:2.05rem; }
.tech-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.75rem; }
.tech-list li { background:var(--bg-soft); padding:.55rem .85rem; font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-soft); font-weight:600; }

/* Contact */
.contact { padding:4.5rem 0 3.5rem; }
.contact h2 { margin:0 0 1.25rem; font-size:2.05rem; }
#contact-form { max-width:880px; }
.form-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.form-grid label { display:flex; flex-direction:column; gap:.45rem; font-size:.8rem; font-weight:500; color:var(--text-soft); }
.form-grid input, .form-grid select, .form-grid textarea { background:var(--bg-soft); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.7rem .75rem; font:inherit; resize:vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline:1px solid var(--primary); border-color:var(--primary); }
.form-extra { margin:1rem 0; }
.checkbox { font-size:.75rem; color:var(--text-soft); display:flex; gap:.45rem; align-items:flex-start; }
.checkbox input { margin-top:.2rem; }
.form-actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.form-status { font-size:.75rem; color:var(--text-soft); min-height:1rem; }
.form-status.success { color:#4caf50; }
.form-status.error { color:var(--danger); }

/* Toast / feedback */
.toast-container { position:fixed; top:1.1rem; right:1.1rem; z-index:200; display:flex; flex-direction:column; gap:.75rem; width:min(340px, 92vw); }
.toast { background:linear-gradient(135deg,#182230,#121920); color:var(--text); padding:.85rem 1rem .9rem; border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow); font-size:.8rem; line-height:1.35; position:relative; overflow:hidden; opacity:0; transform:translateY(-8px); animation:toast-in .55s cubic-bezier(.22,.8,.38,1) forwards; }
.toast.success { border-color:#2e7d32; }
.toast.error { border-color:var(--danger); }
.toast .toast-close { position:absolute; top:4px; right:6px; background:none; border:none; color:var(--text-soft); cursor:pointer; font-size:.8rem; padding:.25rem; }
.toast .toast-close:hover { color:var(--text); }
@keyframes toast-in { to { opacity:1; transform:translateY(0); } }
@keyframes toast-out { to { opacity:0; transform:translateY(-6px); } }

/* Button loading state */
.btn-primary.loading, .btn-outline.loading { position:relative; pointer-events:none; opacity:.8; }
.btn-primary.loading:after, .btn-outline.loading:after { content:""; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); }
.btn-primary.loading:before, .btn-outline.loading:before { content:""; position:absolute; width:16px; height:16px; border:2px solid rgba(255,255,255,.55); border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite; top:50%; left:50%; margin:-8px 0 0 -8px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Success highlight */
form.success-highlight { animation:successPulse 2.1s ease 1; }
@keyframes successPulse { 0%{ box-shadow:0 0 0 0 rgba(61,125,255,.0);} 20%{ box-shadow:0 0 0 4px rgba(61,125,255,.25);} 100%{ box-shadow:0 0 0 0 rgba(61,125,255,0);} }

/* FAQ */
.faq { padding:4rem 0 3.25rem; background:linear-gradient(135deg,#10151c,#0d1217); }
.faq h2 { margin:0 0 1.75rem; font-size:2.05rem; }
.faq details { background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1rem .8rem; margin-bottom:.8rem; }
.faq summary { cursor:pointer; font-weight:600; font-size:.9rem; }
.faq p { margin:.65rem 0 0; font-size:.8rem; color:var(--text-soft); }

/* Final CTA */
.final-cta { padding:4rem 0 4.25rem; text-align:center; background:radial-gradient(circle at 55% 45%,rgba(61,125,255,.18),transparent 65%); }
.final-cta h2 { margin:0 0 1rem; font-size:2.25rem; }
.final-cta p { margin:0 0 1.5rem; font-size:1rem; color:var(--text-soft); }

/* Footer */
.site-footer { background:#0a0c10; padding:2.5rem 0; border-top:1px solid var(--border); margin-top:2rem; }
.footer-grid { display:grid; gap:2.25rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:start; max-width:980px; margin:0 auto; }
/* Force footer columns to align their content to the top and ensure consistent baseline
  across columns even when one column has multiple lines. Use flex in child columns. */
.footer-grid > * { display:flex; flex-direction:column; justify-content:flex-start; }
.footer-grid .foot-nav { display:flex; gap:1rem; align-items:center; justify-content:center; }
.footer-grid .contact-block { display:flex; flex-direction:column; justify-content:center; }
.site-footer a { color:var(--text-soft); font-size:.8rem; }
.site-footer a:hover { color:var(--text); }
.muted { color:var(--text-soft); }
.small { font-size:.7rem; }
.contact-block p { margin:.15rem 0; }

/* Navigation responsive */
@media (max-width:840px){
  .footer-grid > * { align-items:flex-start; }
  .footer-grid { grid-template-columns:1fr; max-width:100%; }
  .footer-grid .foot-nav { justify-content:flex-start; flex-wrap:wrap; }
  /* Mobile nav: collapsed by default (no padding, no pointer events) to avoid small exposed strip */
  .main-nav .menu { flex-direction:column; position:absolute; top:120%; right:0; background:var(--bg-alt); padding:0; border:1px solid var(--border); border-radius:var(--radius-sm); max-height:0; overflow:hidden; width:220px; pointer-events:none; transition:max-height .35s ease, padding .25s ease; }
  .main-nav .menu.open { max-height:600px; box-shadow:var(--shadow); padding:1rem 1.25rem; pointer-events:auto; }
  .nav-toggle { display:inline-block; }
}

/* Mobile refinements */
@media (max-width:640px){
  .hero { padding:4.2rem 0 3rem; }
  .hero h1 { font-size:clamp(1.9rem,6.4vw,2.45rem); }
  .lead { font-size:1rem; }
  .services, .pricing, .advantages, .contact { padding:3.8rem 0 3rem; }
  .tech { padding:3.2rem 0 2.8rem; }
  .faq { padding:3.4rem 0 2.9rem; }
  .final-cta { padding:3.3rem 0 3.6rem; }
  .pricing-grid { gap:1.25rem; }
  .price-card { padding:1.3rem 1.1rem 1.15rem; }
  .price { font-size:1.45rem; }
  .trust-points { gap:.85rem; font-size:.78rem; }
}

@media (max-width:520px){
  .container { padding:0 .95rem; }
  .hero h1 { font-size:1.95rem; }
  .price-card .features { font-size:.75rem; }
  .stack-popover { width:280px; max-width:96vw; }
  .main-nav .menu { width:88vw; right:0; }
  .final-cta h2 { font-size:1.95rem; }
  .tech-list li { font-size:.65rem; }

  /* On very small screens, make popovers fixed and above content to avoid being hidden */
  .stack-popover { position:fixed !important; left:50% !important; top:50% !important; transform:translate(-50%, -50%) !important; z-index:12000 !important; }
  /* smooth scale+fade for mobile popovers */
  .stack-popover { animation: mobilePop .28s cubic-bezier(.22,.9,.36,1) both !important; }
  @keyframes mobilePop { from { opacity:0; transform:translate(-50%,-48%) scale(.96); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
}

@media (max-width:400px){
  .hero { padding:3.8rem 0 2.6rem; }
  .hero h1 { font-size:1.75rem; }
  .btn-primary, .btn-secondary, .btn-outline { padding:.75rem 1rem; }
  .price { font-size:1.35rem; }
  .price-card { gap:.8rem; }
  .stack-trigger { font-size:.68rem; }
}

/* Animations */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Accessibility focus */
:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:4px; }
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.6rem .9rem; background:var(--primary); color:#fff; z-index:500; border-radius:var(--radius-sm); box-shadow:var(--shadow); }

/* Scroll offset for anchored sections below sticky header */
section[id] { scroll-margin-top:4.5rem; }

/* Subtle transitions global */
button, a, .price-card, .card.service, .adv-card { transition:background .3s, border-color .3s, color .25s, box-shadow .35s; }
.price-card:hover { box-shadow:0 0 0 1px var(--primary),0 10px 28px -10px var(--primary-glow); }

/* Footer contrast tweak */
.site-footer { background:#07090c; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* Utilities */
.hidden { display:none !important; }
.hp-field { position:absolute !important; left:-5000px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }

/* Print adjustments */
@media print {
  nav, .hero-ctas, .nav-toggle, .btn-primary, .btn-secondary, .btn-outline, .final-cta { display:none !important; }
  body { background:#fff; color:#000; }
  .price-card, .card.service, .adv-card, .faq details { box-shadow:none; background:#fff; }
}