/* ── RESET & VARIABLES ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --o: #FF4D00;
  --b: #0A0A0A;
  --w: #F5F3EE;
  --w2: #FEFCF8;
  --cream: #EAE6DC;
  --ink: #1A1714;
  --muted: #5A5248;
  --border: #E2DDD5;
  --card: #FFFFFF;
}

html { scroll-behavior: smooth; }
body { background: var(--w2); color: var(--ink); font-family: 'DM Sans', sans-serif; overflow-x: hidden; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--w); }
::-webkit-scrollbar-thumb { background: var(--o); }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 16px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(254,252,248,.97);
  backdrop-filter: blur(16px);
  border-bottom: 2px solid var(--border);
}
.nav-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:22px; letter-spacing:-.5px; color:var(--ink); text-decoration:none; flex-shrink:0; }
.nav-logo span { color: var(--o); }
.nav-links { display:flex; align-items:center; }
.nl { font-family:'Syne',sans-serif; font-weight:700; font-size:15px; color:var(--ink); padding:10px 16px; text-decoration:none; transition:color .2s; position:relative; white-space:nowrap; }
.nl::after { content:''; position:absolute; bottom:4px; left:16px; right:16px; height:2px; background:var(--o); transform:scaleX(0); transition:transform .25s; }
.nl:hover { color: var(--o); }
.nl:hover::after { transform: scaleX(1); }
.nav-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-cta { font-family:'Syne',sans-serif; font-weight:800; font-size:14px; letter-spacing:.8px; text-transform:uppercase; background:var(--o); color:#fff; padding:14px 26px; text-decoration:none; transition:opacity .2s; white-space:nowrap; }
.nav-cta:hover { opacity: .85; }
.lang-sw { display:flex; gap:2px; }
.lbtn { font-family:'Syne',sans-serif; font-weight:800; font-size:13px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); background:none; border:2px solid transparent; padding:7px 12px; cursor:pointer; transition:all .2s; }
.lbtn.active { color:var(--o); border-color:rgba(255,77,0,.4); background:rgba(255,77,0,.06); }
.lbtn:hover { color: var(--ink); }
.nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:6px; align-items:center; }
.nav-burger span { display:block; width:24px; height:2px; background:var(--ink); transition:transform .25s ease,opacity .2s ease,background .2s; transform-origin:center; }
.nav-burger:focus { outline: 3px solid rgba(0,0,0,.06); border-radius:4px; }

/* Burger open state -> X */
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* When nav is open, prevent body scroll */
body.nav-open { overflow: hidden; }

/* ── HERO ── */
#hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 100px 52px 88px;
  position: relative; overflow: hidden;
  background: var(--w2);
}
.hero-dots { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,77,0,.1) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; }
.hero-orange { position:absolute; top:0; right:0; width:42%; height:100%; background:var(--o); clip-path:polygon(22% 0%,100% 0%,100% 100%,0% 100%); z-index:0; }
.hero-right-panel { position:absolute; top:50%; right:52px; transform:translateY(-50%); z-index:1; text-align:right; }
.hstat { margin-bottom: 32px; }
.hstat-n { font-family:'Syne',sans-serif; font-weight:800; font-size:52px; letter-spacing:-3px; color:#fff; line-height:1; }
.hstat-n sup { font-size:28px; color:rgba(255,255,255,.6); }
.hstat-l { font-family:'Syne',sans-serif; font-weight:700; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.75); margin-top:4px; }
.hero-slogan-panel { margin-top:44px; padding-top:28px; border-top:1px solid rgba(255,255,255,.25); }
.hero-slogan-panel-text { font-family:'Syne',sans-serif; font-weight:800; font-size:20px; color:#fff; line-height:1.3; }
.hero-left { position:relative; z-index:1; max-width:56%; }
.hero-eyebrow { font-family:'Space Mono',monospace; font-weight:700; font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--o); display:flex; align-items:center; gap:12px; margin-bottom:28px; opacity:0; animation:up .8s .2s forwards; }
.hero-eyebrow::before { content:''; width:22px; height:2px; background:var(--o); }
.hero-h1 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(44px,7.5vw,104px); letter-spacing:-4px; line-height:.9; color:var(--ink); opacity:0; animation:up .9s .4s forwards; }
.hero-h1 .hl { color: var(--o); }
.hero-slogan { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(22px,3.2vw,42px); letter-spacing:-1.5px; color:var(--ink); margin-top:36px; opacity:0; animation:up .9s .6s forwards; }
.hero-slogan .dot { color: var(--o); }
.hero-sub { font-size:16px; color:var(--muted); max-width:480px; line-height:1.85; font-weight:400; margin-top:24px; opacity:0; animation:up .9s .8s forwards; }
.hero-btns { margin-top:40px; display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:up .9s 1s forwards; }

@keyframes up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ── BUTTONS ── */
.btn-p { font-family:'Syne',sans-serif; font-weight:800; font-size:17px; letter-spacing:1.5px; text-transform:uppercase; background:var(--o); color:#fff; padding:22px 44px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:transform .2s,box-shadow .2s; }
.btn-p:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(255,77,0,.3); }
.btn-s { font-family:'Syne',sans-serif; font-weight:800; font-size:17px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); border:2.5px solid var(--ink); padding:22px 44px; text-decoration:none; display:inline-block; transition:border-color .2s,color .2s; }
.btn-s:hover { border-color:var(--o); color:var(--o); }
.btn-white { font-family:'Syne',sans-serif; font-weight:800; font-size:15px; letter-spacing:.5px; text-transform:uppercase; background:#fff; color:var(--o); padding:18px 30px; text-decoration:none; display:inline-block; margin-top:28px; transition:transform .2s,box-shadow .2s; }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.15); }
.btn-white-lg { font-family:'Syne',sans-serif; font-weight:800; font-size:16px; letter-spacing:1px; text-transform:uppercase; background:#fff; color:var(--o); padding:20px 44px; text-decoration:none; display:inline-block; transition:transform .2s,box-shadow .2s; }
.btn-white-lg:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }

/* ── RUSSIAN FONT OVERRIDE ── */
html[lang="ru"] h1, html[lang="ru"] h2, html[lang="ru"] h3,
html[lang="ru"] .hero-h1, html[lang="ru"] .hero-slogan,
html[lang="ru"] .hero-slogan-panel-text, html[lang="ru"] .svc-title,
html[lang="ru"] .svc-big, html[lang="ru"] .reason-title,
html[lang="ru"] .why-right h3, html[lang="ru"] .about-logo,
html[lang="ru"] .about-tagline, html[lang="ru"] .step-title,
html[lang="ru"] .how-bottom-text, html[lang="ru"] .bsl-text,
html[lang="ru"] .footer-slogan, html[lang="ru"] .pillar-text,
html[lang="ru"] .btn-p, html[lang="ru"] .btn-s,
html[lang="ru"] .btn-white, html[lang="ru"] .btn-white-lg,
html[lang="ru"] .btn-form, html[lang="ru"] .nav-cta { font-family:'Unbounded',sans-serif; }

/* ── DOT HELPERS ── */
.dot { color: var(--o); }
.svc-big .dot { color: rgba(255,255,255,.3); }
.bsl-text .dot { color: var(--o); }
.bsl-ru .bsl-text .dot { color: rgba(255,255,255,.35); }

/* ── MARQUEE ── */
.marquee-wrap { background:var(--ink); padding:15px 0; overflow:hidden; display:flex; }
.marquee-track { display:flex; animation:ticker 24s linear infinite; white-space:nowrap; }
.mitem { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--w); padding:0 28px; border-right:1px solid rgba(255,255,255,.15); }
.mitem.accent { color: var(--o); }
@keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ── SHARED SECTION ── */
section { padding: 96px 52px; }
.sec-tag { font-family:'Space Mono',monospace; font-weight:700; font-size:16px; letter-spacing:5px; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:14px; margin-bottom:56px; }
.sec-tag::after { content:''; flex:1; height:1.5px; background:var(--border); }
.sec-num { color: var(--o); }
.sec-dot { display:inline-block; width:9px; height:9px; background:var(--o); border-radius:50%; flex-shrink:0; }
h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(32px,5vw,66px); letter-spacing:-2.5px; line-height:.95; color:var(--ink); }
h2 .o { color: var(--o); }

/* ── REVEAL ── */
.reveal { opacity:1; transform:none; transition:opacity .6s ease,transform .6s ease; }
.reveal.will-animate { opacity:0; transform:translateY(24px); }
.reveal.animated { opacity:1; transform:none; }
.rd1 { transition-delay:.1s; } .rd2 { transition-delay:.2s; } .rd3 { transition-delay:.3s; } .rd4 { transition-delay:.4s; }

/* ── SERVICES ── */
#services { background: var(--w2); }
.svc-intro { display:flex; margin-bottom:64px; }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.svc { background:var(--card); padding:48px 40px; position:relative; overflow:hidden; border:1px solid var(--border); transition:box-shadow .3s,transform .3s; }
.svc:hover { box-shadow:0 16px 48px rgba(0,0,0,.08); transform:translateY(-3px); }
.svc::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--o); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
.svc:hover::before { transform: scaleX(1); }
.svc-num { font-family:'Space Mono',monospace; font-weight:700; font-size:11px; letter-spacing:3px; color:var(--o); opacity:.6; margin-bottom:28px; }
.svc-icon svg { width:44px; height:44px; stroke:var(--o); fill:none; stroke-width:1.5; }
.svc-title { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(18px,1.8vw,26px); letter-spacing:-.8px; color:var(--ink); margin:20px 0 14px; line-height:1.05; }
.svc-desc { font-size:15px; color:var(--muted); line-height:1.85; }
.svc-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.stag { font-family:'Syne',sans-serif; font-weight:700; font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:var(--o); border:2px solid rgba(255,77,0,.35); padding:7px 14px; background:rgba(255,77,0,.05); }
.svc-orange { background:var(--o)!important; border-color:var(--o)!important; display:flex; flex-direction:column; }
.svc-orange::before { display: none; }
.svc-orange:hover { box-shadow:0 20px 56px rgba(255,77,0,.3)!important; }
.svc-promise-lbl { font-family:'Space Mono',monospace; font-weight:700; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.65); }
.svc-big { font-family:'Syne',sans-serif; font-weight:800; font-size:38px; letter-spacing:-1.5px; line-height:.95; color:#fff; margin:28px 0 16px; }
.svc-orange .svc-desc { color: rgba(255,255,255,.8); }

/* ── WHY ── */
#why { background: var(--w); }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.why-left { display:flex; flex-direction:column; gap:3px; }
.why-reason { background:var(--card); padding:40px 36px; position:relative; border:1px solid var(--border); transition:box-shadow .3s; }
.why-reason:hover { box-shadow: 0 8px 28px rgba(0,0,0,.06); }
.reason-big { font-family:'Syne',sans-serif; font-weight:800; font-size:52px; letter-spacing:-2px; color:var(--o); opacity:.07; position:absolute; top:12px; right:18px; line-height:1; }
.reason-title { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(16px,1.8vw,24px); letter-spacing:-.6px; color:var(--ink); margin-bottom:10px; }
.reason-desc { font-size:14px; color:var(--muted); line-height:1.85; max-width:360px; }
.why-right { background:var(--o); padding:56px 48px; display:flex; flex-direction:column; justify-content:center; }
.why-right h3 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(28px,3.2vw,44px); letter-spacing:-1.5px; color:#fff; line-height:1.02; margin-bottom:18px; }
.why-right p { font-size:15px; color:rgba(255,255,255,.85); line-height:1.85; margin-bottom:32px; }

/* ── ABOUT ── */
#about { background: var(--w2); }
.about-wrap { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.about-card { background:var(--o); padding:52px 44px; position:relative; overflow:hidden; }
.about-card-deco { position:absolute; right:-10px; top:-10px; font-family:'Syne',sans-serif; font-weight:800; font-size:170px; color:rgba(255,255,255,.06); line-height:1; pointer-events:none; user-select:none; }
.about-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(32px,4vw,48px); letter-spacing:-2px; color:#fff; line-height:1; }
.about-logo span { color: rgba(255,255,255,.4); }
.about-agency { font-family:'Space Mono',monospace; font-weight:700; font-size:10px; letter-spacing:6px; color:rgba(255,255,255,.7); text-transform:uppercase; margin-top:6px; }
.about-divider { width:44px; height:3px; background:rgba(255,255,255,.4); margin:28px 0; }
.about-tagline { font-family:'Syne',sans-serif; font-weight:800; font-size:26px; letter-spacing:-.8px; color:#fff; line-height:1.1; }
.about-stats { display:flex; margin-top:32px; border-top:1px solid rgba(255,255,255,.2); }
.astat { flex:1; padding:20px 0; border-right:1px solid rgba(255,255,255,.2); text-align:center; }
.astat:last-child { border-right: none; }
.astat-n { font-family:'Syne',sans-serif; font-weight:800; font-size:30px; letter-spacing:-1px; color:#fff; line-height:1; }
.astat-n sup { font-size:16px; color:rgba(255,255,255,.6); }
.astat-l { font-family:'Space Mono',monospace; font-weight:700; font-size:8px; letter-spacing:2px; color:rgba(255,255,255,.6); text-transform:uppercase; margin-top:4px; }
.pillars { display:flex; flex-direction:column; gap:2px; margin-top:3px; }
.pillar { display:flex; align-items:center; gap:14px; background:var(--cream); padding:15px 20px; border:1px solid var(--border); }
.pillar-dot { width:8px; height:8px; background:var(--o); flex-shrink:0; }
.pillar-text { font-family:'Syne',sans-serif; font-weight:700; font-size:14px; letter-spacing:-.2px; color:var(--ink); }
.about-text h2 { margin-bottom: 24px; }
.about-text p { font-size:15px; color:var(--muted); line-height:1.9; margin-bottom:18px; }
.about-btns { display:flex; gap:3px; margin-top:36px; flex-wrap:wrap; }

/* ── HOW WE WORK ── */
#how { background: var(--o); }
#how .sec-tag { color: rgba(255,255,255,.8); }
#how .sec-tag::after { background: rgba(255,255,255,.25); }
#how .sec-num { color: rgba(255,255,255,.5); }
#how .sec-dot { background: rgba(255,255,255,.7); }
#how h2 { color:#fff; letter-spacing:-3px; }
.how-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.how-step { background:rgba(255,255,255,.12); padding:44px 28px; position:relative; border:1.5px solid rgba(255,255,255,.15); transition:background .3s; }
.how-step:hover { background: rgba(255,255,255,.19); }
.how-step::after { content:'→'; position:absolute; right:-14px; top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,.4); z-index:2; }
.how-step:last-child::after { display: none; }
.step-n { font-family:'Space Mono',monospace; font-weight:700; font-size:12px; letter-spacing:3px; color:rgba(255,255,255,.85); margin-bottom:22px; }
.step-icon { width:42px; height:42px; border:2px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.step-icon svg { width:19px; height:19px; stroke:#fff; fill:none; stroke-width:1.5; }
.step-title { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(16px,1.8vw,24px); letter-spacing:-.6px; color:#fff; margin-bottom:12px; }
.step-desc { font-size:14px; color:rgba(255,255,255,.9); line-height:1.8; }
.how-bottom { margin-top:3px; background:var(--ink); padding:44px 52px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.how-bottom-text { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(16px,2vw,28px); letter-spacing:-.8px; color:#fff; }
.how-bottom-text span { color: var(--o); }

/* ── BRAND STRIP ── */
#brand-strip { padding: 0; }
.brand-strip { display: block; }
.bsl { padding:72px 52px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.bsl-lang { display: none; }
.bsl-text { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(40px,7vw,96px); letter-spacing:-2.5px; line-height:.95; }
.bsl-tag { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:5px; text-transform:uppercase; margin-top:28px; opacity:.45; }
.bsl-single { width:100%; min-width:0; }
#brand-strip-panel { transition:background .35s,color .35s; }
.bsl-en { background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); color:var(--ink); }
.bsl-en .bsl-dot { color: var(--o); }
.bsl-uz { background:var(--cream); color:var(--ink); }
.bsl-uz .bsl-dot { color: var(--o); }
.bsl-ru { background:var(--o); }
.bsl-ru .bsl-text { color: #fff; }
.bsl-ru .bsl-tag { color: rgba(255,255,255,.55); }
.bsl-ru .bsl-text .dot { color: rgba(255,255,255,.35); }

/* ── CONTACT ── */
#contact { background: var(--w); }
.contact-wrap { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.contact-left { padding:72px 52px; background:var(--card); border:1px solid var(--border); }
.contact-left h2 { margin-bottom: 16px; }
.contact-sub { font-size:15px; color:var(--muted); line-height:1.85; max-width:400px; margin-bottom:44px; }
.ci-list { display:flex; flex-direction:column; gap:3px; }
.ci { background:var(--w2); padding:20px 24px; display:flex; align-items:center; gap:16px; text-decoration:none; border:1px solid var(--border); transition:background .2s,box-shadow .2s; }
.ci:hover { background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.06); }
.ci-icon { width:42px; height:42px; background:rgba(255,77,0,.07); border:1.5px solid rgba(255,77,0,.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ci-icon svg { width:17px; height:17px; stroke:var(--o); fill:none; stroke-width:1.5; }
.ci-label { font-family:'Space Mono',monospace; font-weight:700; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); display:block; }
.ci-value { font-family:'Syne',sans-serif; font-weight:700; font-size:18px; color:var(--ink); margin-top:3px; letter-spacing:-.3px; word-break:break-all; }
.contact-right { background:var(--o); padding:72px 52px; display:flex; flex-direction:column; justify-content:center; }
.contact-right h3 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(24px,3vw,40px); letter-spacing:-1.5px; color:#fff; line-height:1.05; margin-bottom:8px; }
.form-sub { font-size:15px; color:rgba(255,255,255,.8); margin-bottom:32px; line-height:1.7; }
.form-field { margin-bottom: 13px; }
.form-field label { font-family:'DM Sans',sans-serif; font-weight:700; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.85); display:block; margin-bottom:8px; }
.form-field input,
.form-field textarea,
.form-field select { width:100%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.3); color:#fff; font-family:'DM Sans',sans-serif; font-size:15px; padding:13px 16px; outline:none; transition:border-color .2s,background .2s; appearance:none; -webkit-appearance:none; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(255,255,255,.45); }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-color:rgba(255,255,255,.9); background:rgba(255,255,255,.2); }
.form-field textarea { resize:none; height:108px; }
.form-field select option { background:#e04400; color:#fff; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.btn-form { font-family:'Syne',sans-serif; font-weight:800; font-size:17px; letter-spacing:1.5px; text-transform:uppercase; background:#fff; color:var(--o); border:none; padding:22px 32px; cursor:pointer; width:100%; margin-top:8px; transition:transform .2s,box-shadow .2s; }
.btn-form:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.18); }
#formSuccess { display:none; text-align:center; padding:56px 0; }
#formSuccess .ok-icon { font-size:48px; color:#fff; margin-bottom:14px; }
#formSuccess .ok-title { font-family:'Syne',sans-serif; font-weight:800; font-size:28px; color:#fff; margin-bottom:8px; }
#formSuccess .ok-sub { font-size:15px; color:rgba(255,255,255,.75); }

/* ── FOOTER ── */
footer { background:var(--ink); padding:44px 52px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:22px; letter-spacing:-.5px; color:var(--w); }
.footer-logo span { color: var(--o); }
.footer-slogan { font-family:'Syne',sans-serif; font-weight:800; font-size:14px; letter-spacing:-.3px; color:rgba(255,255,255,.22); }
.footer-copy { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px; color:rgba(255,255,255,.35); text-transform:uppercase; }


/* ════════════════════════════════════════
   RESPONSIVE — Tablet  (≤1000px)
════════════════════════════════════════ */
@media (max-width: 1000px) {
  /* Nav */
  nav { padding: 14px 24px; }
  .nav-links {
    display: none;
    position: fixed; top: 66px; right: 0;
    background: var(--w2);
    flex-direction: column;
    padding: 20px 24px;
    border-left: 3px solid var(--o);
    z-index: 300;
    box-shadow: -6px 0 24px rgba(0,0,0,.1);
    width: 240px;
  }
  .nav-links.open { display: flex; }
  .nav-burger { display: flex; }
  .nav-cta { padding: 12px 18px; font-size: 13px; }

  /* Hero */
  #hero { padding: 88px 28px 72px; }
  .hero-orange { display: none; }
  .hero-right-panel { display: none; }
  .hero-left { max-width: 100%; }
  .hero-h1 { letter-spacing: -3px; }

  /* Sections */
  section { padding: 72px 28px; }
  .sec-tag { font-size: 13px; letter-spacing: 3px; gap: 10px; }

  /* Services */
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc { padding: 36px 28px; }
  .svc-intro { flex-direction: column; }

  /* Why */
  .why-grid { grid-template-columns: 1fr; }
  .why-right { padding: 48px 36px; }

  /* About */
  .about-wrap { grid-template-columns: 1fr; gap: 32px; }

  /* How */
  .how-steps { grid-template-columns: 1fr 1fr; }
  .how-step::after { display: none; }
  .how-bottom { padding: 36px 28px; }

  /* Brand strip */
  .bsl { padding: 56px 28px; }

  /* Contact */
  .contact-wrap { grid-template-columns: 1fr; }
  .contact-left { padding: 52px 28px; }
  .contact-right { padding: 52px 28px; }

  /* Footer */
  footer { flex-direction: column; align-items: flex-start; padding: 36px 28px; gap: 12px; }

  /* Buttons */
  .btn-p, .btn-s { padding: 18px 32px; font-size: 15px; }
}


/* ════════════════════════════════════════
   RESPONSIVE — Mobile  (≤640px)
════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Nav */
  nav { padding: 12px 18px; gap: 8px; }
  .nav-logo { font-size: 18px; }
  .nav-cta { display: none; }
  .lang-sw { gap: 1px; }
  .lbtn { padding: 6px 8px; font-size: 11px; }

  /* Hero */
  #hero { padding: 80px 18px 56px; min-height: auto; }
  .hero-eyebrow { font-size: 9px; letter-spacing: 2px; margin-bottom: 20px; }
  .hero-h1 { font-size: clamp(38px, 10vw, 56px); letter-spacing: -2px; line-height: .92; }
  .hero-slogan { font-size: clamp(20px, 6vw, 30px); letter-spacing: -1px; margin-top: 24px; }
  .hero-sub { font-size: 14px; margin-top: 16px; }
  .hero-btns { margin-top: 28px; gap: 10px; flex-direction: column; }
  .btn-p, .btn-s { width: 100%; text-align: center; justify-content: center; padding: 18px 24px; font-size: 14px; letter-spacing: 1px; }

  /* Sections */
  section { padding: 56px 18px; }
  .sec-tag { font-size: 11px; letter-spacing: 2px; gap: 8px; margin-bottom: 36px; flex-wrap: wrap; }
  h2 { letter-spacing: -1.5px; }

  /* Services */
  .svc-grid { grid-template-columns: 1fr; gap: 3px; }
  .svc { padding: 32px 24px; }
  .svc-title { font-size: 20px; }
  .svc-big { font-size: 28px; }
  .svc-intro { margin-bottom: 36px; }

  /* Why */
  .why-grid { grid-template-columns: 1fr; gap: 3px; }
  .why-reason { padding: 28px 22px; }
  .why-right { padding: 36px 24px; }
  .why-right h3 { font-size: clamp(24px, 6vw, 36px); }
  .reason-big { font-size: 36px; }

  /* About */
  .about-wrap { gap: 24px; }
  .about-card { padding: 36px 28px; }
  .about-logo { font-size: clamp(28px, 7vw, 40px); }
  .about-tagline { font-size: 20px; }
  .about-text p { font-size: 14px; }
  .about-btns { flex-direction: column; gap: 10px; }
  .about-btns .btn-p,
  .about-btns .btn-s { width: 100%; text-align: center; justify-content: center; }
  .pillar { padding: 12px 16px; }
  .pillar-text { font-size: 13px; }

  /* How */
  .how-steps { grid-template-columns: 1fr; gap: 3px; }
  .how-step { padding: 32px 24px; }
  .step-title { font-size: 18px; }
  .how-bottom { padding: 28px 18px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .how-bottom-text { font-size: 16px; }
  .btn-white-lg { width: 100%; text-align: center; padding: 18px 24px; }

  /* Brand strip */
  .bsl { padding: 48px 18px; }
  .bsl-text { font-size: clamp(36px, 10vw, 60px); letter-spacing: -1.5px; }
  .bsl-tag { font-size: 8px; letter-spacing: 3px; }

  /* Contact */
  .contact-left { padding: 40px 18px; }
  .contact-right { padding: 40px 18px; }
  .contact-left h2 { font-size: clamp(28px, 8vw, 44px); }
  .contact-right h3 { font-size: clamp(22px, 6vw, 32px); }
  .contact-sub { font-size: 14px; margin-bottom: 28px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .ci-value { font-size: 15px; }
  .ci { padding: 16px 18px; gap: 12px; }
  .ci-icon { width: 36px; height: 36px; flex-shrink: 0; }
  .btn-form { font-size: 15px; padding: 18px 24px; }

  /* Footer */
  footer { padding: 28px 18px; gap: 10px; }
  .footer-logo { font-size: 18px; }
  .footer-slogan { font-size: 12px; }
  .footer-copy { font-size: 8px; }
}


/* ════════════════════════════════════════
   RESPONSIVE — Small phone  (≤400px)
════════════════════════════════════════ */
@media (max-width: 400px) {
  nav { padding: 10px 14px; }
  .nav-logo { font-size: 16px; }
  .lbtn { padding: 5px 7px; font-size: 10px; }

  #hero { padding: 72px 14px 48px; }
  .hero-h1 { font-size: clamp(32px, 11vw, 46px); letter-spacing: -1.5px; }
  .hero-slogan { font-size: clamp(18px, 6vw, 26px); }

  section { padding: 48px 14px; }
  .bsl { padding: 40px 14px; }
  .contact-left, .contact-right { padding: 32px 14px; }
  footer { padding: 24px 14px; }
}