/* ===== v10 — consulting UI ===== */
:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --alt: #fbfcff;
  --text: #0f172a;        /* slate-900 */
  --muted: #5b6478;       /* slate-500/600 */
  --line: #e8ecf4;
  --brand: #5446e8;       /* indigo / purple */
  --brand-2: #7c6cf2;
  --shadow: 0 10px 30px rgba(23, 23, 60, .08);
  --radius: 20px;
  --content: 62ch;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.container{max-width:1200px; margin-inline:auto; padding-inline:24px}
.section{padding:84px 0}
.section.alt{background:var(--alt)}
.kicker,.eyebrow{letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:700; font-size:.82rem; margin:0 0 10px}
h1{font-size: clamp(3rem, 7.5vw, 7rem); line-height:.9; letter-spacing:-.02em; margin:.15em 0 .3em; color:#382e7c; font-weight:900}
h2{font-size: clamp(1.8rem, 2.2vw, 2.6rem); margin:0 0 12px; letter-spacing:-.01em}
h3{font-size:1.25rem; margin:20px 0 10px}
.lead{font-size:1.125rem; max-width:var(--content); color:#3b4154}
p{max-width:var(--content)}

/* Header / nav */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.85); backdrop-filter: blur(8px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:68px; gap:24px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.01em; color:#1d1b3b; text-decoration:none}
.brand .dot{width:10px; height:10px; border-radius:999px; background:linear-gradient(45deg,var(--brand),var(--brand-2)); display:inline-block}
.nav-links{display:flex; gap:20px; list-style:none; padding:0; margin:0; align-items:center}
.nav-links a{color:#33365c; text-decoration:none; font-weight:600}
.link-cta{padding:10px 14px; border:1px solid var(--line); border-radius:10px}
.nav-toggle{display:none; background:none; border:0}
.nav-toggle span{display:block; width:22px; height:2px; background:#2f3056; margin:5px 0}

/* Hero */
.hero{padding-top:60px}
.hero-grid{display:grid; gap:40px; align-items:center}
.hero-visual{justify-self:end; max-width:520px; background:#f6f5fe; border-radius:28px; box-shadow:var(--shadow); overflow:hidden}
.hero-visual img{display:block; width:100%; height:auto}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}
.btn{
  display:inline-block; padding:14px 18px; border-radius:14px; border:0; cursor:pointer; text-decoration:none; font-weight:800; letter-spacing:.01em;
  color:#fff; background:linear-gradient(90deg,var(--brand),var(--brand-2)); box-shadow:0 10px 26px rgba(84,70,232,.26);
}
.btn.ghost{background:transparent; color:#362e78; border:1.5px solid #cfd4ef; box-shadow:none}

/* Grid systems */
.grid{display:grid; gap:28px}
.grid.two{grid-template-columns: repeat(auto-fit,minmax(280px,1fr))}
.grid.three{grid-template-columns: repeat(auto-fit,minmax(220px,1fr))}
.grid-auto{display:grid; gap:28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}

/* Cards and lists */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.cards .card h3{margin-top:0}
.bullets{margin:8px 0 0; padding:0 0 0 18px}
.bullets li{margin:.4em 0}

/* Panel / aside */
.panel{border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:linear-gradient(180deg, #ffffff, #fbfbff)}
.panel .note{color:#4d5470}
.panel .quote{font-weight:700; color:#2f2b68}

/* About */
.about .portrait img{width:100%; height:auto; display:block; border-radius:16px; box-shadow:var(--shadow)}
.links{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px}
.links a{font-weight:700; color:#3b3a7a; text-decoration:none}

/* Contact form */
.form label{display:block; font-weight:600; margin:12px 0 6px}
.form input,.form textarea{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 12px; font:inherit; color:inherit; background:#fff;
}
.form .consent{display:flex; gap:8px; align-items:flex-start; font-weight:500}
.form .consent input{margin-top:4px}

/* Myths */
#mity .card p{margin:0; font-weight:700; color:#2b2f4e}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:36px 0; color:#61688c}
.footer-grid{display:flex; align-items:center; justify-content:space-between}
.to-top{color:#3a3a7a; text-decoration:none; font-weight:700}

/* Responsive behaviors */
@media (min-width: 960px){
  .hero-grid{grid-template-columns: minmax(0, 680px) minmax(0, 520px)}
}
@media (max-width: 900px){
  .nav-toggle{display:block}
  .nav-links{display:none; position:absolute; left:0; right:0; top:68px; background:#fff; border-bottom:1px solid var(--line); padding:16px 24px; flex-direction:column; gap:12px}
  .nav-links.open{display:flex}
  .hero-grid{grid-template-columns: 1fr}
  .hero-visual{justify-self:stretch; max-width:100%}
}

/* v10.2: section banners + icons + hero fix */
.section-banner{margin:0 0 18px 0}
.section-banner img{width:100%; height:auto; border-radius:22px; box-shadow:var(--shadow)}

.cards .card .icon{
  width:56px; height:56px; border-radius:14px; object-fit:cover; display:block; margin-bottom:14px;
  border:1px solid var(--line);
}

/* HERO: ensure text never overlaps image & dot remains visible */
.hero-grid{column-gap:56px}
.hero-copy{position:relative; z-index:1; max-width:640px; padding-right:8px}
.hero-visual{position:relative; z-index:0; max-width:520px}
.hero-copy h1{letter-spacing:-0.015em}
@media (min-width: 1000px){
  .hero-grid{grid-template-columns: 1fr 520px}
}