:root{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #3867D6;
  --primary-hover: #2d56b3;
  --surface: #f8fafc;
  --border: #e2e8f0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

/* Top Nav */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.nav .inner{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.branding img{height:135px;width:auto;display:block}
.nav .links{margin-left:auto;display:flex;gap:18px}
.nav a{color:var(--text);text-decoration:none;font-weight:600;opacity:.9}
.nav a:hover{opacity:1}

.container{max-width:1100px;margin:0 auto;padding:0 16px}
.grid{display:grid;gap:22px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;border:0;border-radius:14px;
  padding:14px 20px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(56,103,214,0.18);
  transition:transform .06s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 12px 26px rgba(45,86,179,0.22)}
.note{font-size:14px;color:var(--muted)}
.section{padding:56px 0}
.section.gray{background:var(--surface)}
h1{font-size:36px;line-height:1.18;margin:0 0 14px}
h2{font-size:28px;margin:0 0 14px}
p.lead{font-size:18px;color:var(--muted);margin:0 0 18px}

/* Hero background */
.hero-wrap{background: radial-gradient(1200px 600px at 70% -20%, #e0e7ff 0%, rgba(255,255,255,0) 60%);}
.hero{display:grid;grid-template-columns:1.05fr 0.95fr;gap:24px;align-items:center}

/* Slider */
.slider{position:relative;width:100%;max-width:520px;margin-inline:auto;overflow:hidden;border-radius:18px;
  box-shadow:0 8px 26px rgba(0,0,0,.1);background:#fff;}
.slider .frame{width:100%;height:300px}
@media (max-width:900px){ .slider .frame{height:220px} }
.slides{display:flex;transition:transform .35s ease;height:100%}
.slide{min-width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff}
.slide img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(17,24,39,.75);color:#fff;border:0;border-radius:999px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;cursor:pointer
}
.arrow:hover{background:rgba(17,24,39,.9)}
.arrow.left{left:8px}
.arrow.right{right:8px}

/* Thumbnails (desktop only) */
.thumbs{display:flex;gap:10px;justify-content:center;margin-top:10px}
.thumb{width:100px;height:64px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.06);transition:transform .08s ease, box-shadow .2s ease, border .2s ease}
.thumb:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.08)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.active{border:2px solid var(--primary)}
@media (max-width:900px){ .thumbs{display:none} }

.inline-form{margin-top:12px;display:none;gap:8px;flex-wrap:wrap;align-items:center}
.inline-form.show{display:flex}
.input{border:1px solid var(--border);border-radius:12px;padding:12px 14px;min-width:260px;font-size:16px}

.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 4px 10px rgba(0,0,0,.04)}
.card p{margin:0}

.trust{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.trust .pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 12px;font-weight:700;color:#334155;transition:transform .08s ease, box-shadow .2s ease}
.trust .pill:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.08)}

.faq{max-width:840px;margin:22px auto 0}
.faq details{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq p{margin:8px 0 0;color:var(--muted)}

.footer{background:#0b1220;color:#cbd5e1;text-align:center;padding:40px 0;margin-top:24px}
.footer img{height:55px;margin-bottom:8px}
.footer .site-name{font-size:20px;font-weight:800;margin:6px 0 6px}
.footer .legal{opacity:.9}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .branding img{height:135px}
  h1{font-size:30px}
  .cards{grid-template-columns:1fr}
}
.privacy-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.privacy-content {
  background: #fff;
  max-width: 600px;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: left;
}

.privacy-content h2 {
  margin-top: 0;
  color: #1a1a1a;
}

.privacy-content button {
  display: block;
  margin: 1.5rem auto 0;
  background: #1a3cff;
  color: white;
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  cursor: pointer;
}
/* --- FAQ (clean accordion) --- */
.faq { padding: 48px 0; }
.faq h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); margin: 0 0 16px; }
.faq-item {
  border-radius: 14px; background: #fff; margin: 12px 0;
  border: 1px solid #e2e8f0; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; color: #0f172a;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { 
  width: 22px !important; /* Added !important */
  height: 22px !important; /* Added !important */
  fill: none; 
  stroke: currentColor; 
  stroke-width: 2; 
  transition: transform .25s ease; 
}
.faq-item[open] summary svg { transform: rotate(180deg); }
/* ... existing code ... */

/* --- Privacy modal --- */
.privacy-modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); justify-content:center; align-items:center; z-index:1000; padding:16px; }
.privacy-content{ background:#fff; max-width:680px; width:100%; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:22px; }
.privacy-content h2{ margin:0 0 10px; }
.privacy-content p{ margin:0; color:#334155; }