/* Aanganone Styles */
:root{
  --primary:#646AE8;
  --primary-600:#545AE0;
  --primary-100:#EEF0FF;
  --bg:#ffffff;
  --text:#0C1020;
  --muted:#60657A;
  --line:#E6E8F5;
  --card:#FFFFFF;
  --soft:#F7F8FE;
  --shadow: 0 6px 24px rgba(16,24,40,.08);
  --radius: 14px;
  --radius-sm: 10px;
  --space: clamp(16px, 3vw, 32px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  opacity:1;
  transition: opacity .3s ease;
}
body.is-loading, body.page-out{opacity:0}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.container{max-width:1100px; margin:0 auto; padding:0 20px}
.section{padding: clamp(48px, 8vw, 96px) 0}
.section-title{font-size: clamp(22px, 3vw, 28px); margin:0 0 16px}
.lead{color:var(--muted); font-size: clamp(16px, 2.2vw, 18px)}
.muted{color:var(--muted)}
.soft-bg{background:var(--soft)}

/* Header */
.site-header{position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--line); backdrop-filter:saturate(1.2) blur(6px)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700}
.logo-mark{color:var(--primary)}
.nav-links{display:flex; gap:20px}
.nav-links a{padding:10px 6px; color:#1a1f36; opacity:.8}
.nav-links a:hover, .nav-links a.active{opacity:1; color:var(--primary)}
.nav-cta{display:none}

.nav-toggle{display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:12px; background:#fff}
.nav-toggle span{display:block; width:20px; height:2px; background:#111; margin:5px auto; border-radius:2px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 16px; border-radius:12px; border:1px solid transparent; font-weight:600; transition:.2s ease; cursor:pointer}
.btn-primary{background:var(--primary); color:#fff; box-shadow: 0 6px 16px rgba(100,106,232,.25)}
.btn-primary:hover{background:var(--primary-600); transform: translateY(-1px)}
.btn-secondary{background:#fff; border-color:var(--line)}
.btn.secondary:hover,.btn-secondary:hover{transform: translateY(-1px); box-shadow: var(--shadow)}
.btn.full{width:100%}

/* Hero */
.hero-grid{display:grid; grid-template-columns:1fr; gap:var(--space); align-items:center}
.hero h1{font-size: clamp(28px, 5vw, 44px); line-height:1.12; margin:0 0 12px}
.hero-visual{ order:-1 }
.hero-illustration{width:100%; height:auto}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}

/* Cards & grid */
.grid{display:grid; gap:var(--space)}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow: var(--shadow)}
.card{transition: transform .2s ease, box-shadow .2s ease}
.card:hover{transform: translateY(-2px); box-shadow: 0 10px 28px rgba(16,24,40,.10)}
.icon-card{ text-align:left }
.icon-card .icon{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:10px; background:var(--primary-100); color:var(--primary); margin-bottom:10px}
.icon-card h3{margin:6px 0 6px}

.highlights{grid-template-columns:repeat(1,minmax(0,1fr))}

/* Testimonial slider */
.testimonial-slider{position:relative}
.testimonial-slider .slide{display:none; text-align:center}
.testimonial-slider .slide.active{display:block}
.testimonial-slider blockquote{font-size:clamp(16px,2.4vw,20px); line-height:1.5; margin:0 0 10px}
.testimonial-slider cite{color:var(--muted); font-style:normal}
.slider-dots{display:flex; justify-content:center; gap:8px; margin-top:14px}
.slider-dots .dot{width:8px; height:8px; border-radius:999px; border:1px solid var(--primary); background:transparent; opacity:.6}
.slider-dots .dot.active{background:var(--primary); opacity:1}

/* Features page */
.features-grid{display:grid; grid-template-columns: 1fr; gap:32px}
.anchors{display:flex; gap:12px; flex-wrap:wrap; position:sticky; top:76px}
.anchors a{padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:#3a3f58; background:#fff}
.anchors a:hover{border-color:var(--primary); color:var(--primary)}
.feature-row{display:grid; grid-template-columns:44px 1fr; gap:16px; padding:16px 0; border-bottom:1px dashed var(--line)}
.feature-row:last-child{border-bottom:0}
.feature-icon .icon{display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--primary-100); color:var(--primary)}
.feature-text h2{margin:0 0 6px}
.feature-text .example{color:var(--muted); font-size:14px}

/* How page */
.role-cards .card h3{margin-top:0}
.check-list{padding-left:0; list-style:none}
.check-list li{position:relative; padding-left:24px; margin:8px 0}
.check-list li::before{content:""; position:absolute; left:0; top:9px; width:10px; height:10px; border-radius:50%; background:var(--primary)}
.example-block{display:grid; grid-template-columns:1fr; gap:24px; align-items:center}
.example-visual svg{width:100%; height:auto}

/* About */
.split-grid{display:grid; grid-template-columns:1fr; gap:24px; align-items:center}
.team-note{margin-top:16px}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr; gap:24px}
.form-card{padding:24px}
.field{margin-bottom:14px}
.field label{display:block; font-weight:600; margin-bottom:6px}
.field input{width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:12px; outline:none}
.field input:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(100,106,232,.12)}
.field.two-col{display:grid; grid-template-columns:1fr; gap:12px}
.error{color:#b42318; font-size:12px; min-height:16px; display:block}
.form-success{color:#067647; margin-top:10px}
.map-placeholder{height:220px; border:1px dashed var(--line); border-radius:12px; display:grid; place-items:center; color:#9aa0b5}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding-top:32px}
.footer-grid{display:grid; grid-template-columns:1fr; gap:var(--space)}
.footer-grid h4{margin:6px 0}
.footer-grid ul{list-style:none; padding:0; margin:0}
.footer-grid li{margin:6px 0}
.footer-bottom{display:flex; justify-content:center; padding:16px 0; color:#6b7280}
.socials{display:flex; gap:10px}

/* Reveal on scroll */
[data-reveal]{opacity:0; transform: translateY(12px); transition: .5s ease}
[data-reveal].revealed{opacity:1; transform:none}

/* Responsive */
@media (min-width: 768px){
  .nav-cta{display:inline-flex}
  .hero-grid{grid-template-columns: 1.15fr .85fr}
  .hero-visual{ order: initial }
  .highlights{grid-template-columns:repeat(2,minmax(0,1fr))}
  .features-grid{grid-template-columns: 250px 1fr}
  .example-block{grid-template-columns:1fr 1.1fr}
  .split-grid{grid-template-columns: .95fr 1.05fr}
  .contact-grid{grid-template-columns: 1.1fr .9fr}
  .field.two-col{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns: 1.2fr .8fr .8fr}
}

/* Mobile nav */
@media (max-width: 1023.98px){
  .nav-toggle{display:inline-block}
  .nav-links{position:fixed; inset:64px 0 auto 0; background:#fff; border-bottom:1px solid var(--line); padding:12px 20px; display:none; flex-direction:column}
  .nav-links.open{display:flex}
}

/* Reduced motion: disable fades and hover elevate */
@media (prefers-reduced-motion: reduce){
  body{transition:none}
  .card{transition:none}
}