/* Dizayn Copy — Design System */
:root{
  /* Brand palette — navy + electric blue */
  --navy-950:#050B1E;
  --navy-900:#0A1433;
  --navy-800:#0F1D47;
  --navy-700:#152A66;
  --navy-600:#1B3885;
  --blue-500:#1E5BFF;
  --blue-400:#3D7BFF;
  --blue-300:#6B9BFF;
  --cyan-400:#00D4FF;
  --cyan-300:#5CE5FF;
  --ink-900:#0B1020;
  --ink-700:#2A3248;
  --ink-500:#5B6480;
  --ink-300:#A8AFC4;
  --ink-200:#D4D8E3;
  --ink-100:#EEF1F7;
  --ink-50:#F7F9FC;
  --white:#FFFFFF;
  --accent-amber:#FFB020;

  /* Type */
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Radii */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-2xl:36px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10,20,51,.06), 0 1px 1px rgba(10,20,51,.04);
  --shadow-md: 0 8px 24px rgba(10,20,51,.08), 0 2px 6px rgba(10,20,51,.05);
  --shadow-lg: 0 24px 60px rgba(10,20,51,.14), 0 8px 20px rgba(10,20,51,.08);
  --shadow-glow: 0 20px 60px rgba(30,91,255,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink-50);color:var(--ink-900);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--navy-900)}
h1{font-size:clamp(40px,5.4vw,76px)}
h2{font-size:clamp(30px,3.6vw,52px)}
h3{font-size:clamp(20px,1.8vw,26px)}
p{color:var(--ink-700)}

.container{max-width:1280px;margin:0 auto;padding:0 28px}
.small{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--blue-500)}

/* ---------- Top bar ---------- */
.topbar{background:var(--navy-950);color:var(--ink-200);font-size:13px}
.topbar .inner{display:flex;justify-content:space-between;align-items:center;padding:10px 28px;max-width:1280px;margin:0 auto;gap:18px}
.topbar a{color:var(--ink-200);opacity:.85}
.topbar a:hover{opacity:1;color:var(--white)}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:#22c55e;display:inline-block;margin-right:8px;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.topbar .right{display:flex;gap:22px;align-items:center}
.topbar .right span{display:inline-flex;align-items:center;gap:8px}

/* ---------- Header / nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(10,20,51,.06)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:1280px;margin:0 auto}
.nav ul{display:flex;gap:6px;list-style:none}
.nav ul a{display:inline-block;padding:10px 14px;border-radius:10px;font-weight:600;font-size:15px;color:var(--ink-700);transition:all .2s}
.nav ul a:hover{background:var(--ink-100);color:var(--navy-900)}
.nav ul a.active{color:var(--navy-900);background:var(--ink-100)}
.nav .cta{display:flex;gap:10px;align-items:center}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:12px}
.logo .mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--navy-900),var(--blue-500));display:grid;place-items:center;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.logo .mark::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 10% 10%,rgba(255,255,255,.25),transparent 50%)}
.logo .mark svg{position:relative;z-index:1}
.logo .name{display:flex;flex-direction:column;line-height:1}
.logo .name .t1{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--navy-900);letter-spacing:-.01em}
.logo .name .t2{font-size:10.5px;letter-spacing:.22em;font-weight:700;color:var(--blue-500);text-transform:uppercase;margin-top:4px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:700;font-size:15px;transition:all .2s;white-space:nowrap}
.btn-primary{background:var(--blue-500);color:var(--white);box-shadow:0 8px 20px rgba(30,91,255,.35)}
.btn-primary:hover{background:var(--navy-900);transform:translateY(-1px);box-shadow:0 12px 28px rgba(30,91,255,.45)}
.btn-ghost{background:var(--ink-100);color:var(--navy-900)}
.btn-ghost:hover{background:var(--ink-200)}
.btn-dark{background:var(--navy-900);color:var(--white)}
.btn-dark:hover{background:var(--navy-700)}
.btn-outline{background:transparent;color:var(--navy-900);border:1.5px solid var(--ink-200)}
.btn-outline:hover{border-color:var(--navy-900);background:var(--white)}
.btn-whats{background:#25D366;color:var(--white)}
.btn-whats:hover{background:#1fb855}

/* ---------- Footer ---------- */
.footer{background:var(--navy-950);color:var(--ink-200);padding:80px 0 30px;margin-top:120px}
.footer h4{color:var(--white);font-size:16px;margin-bottom:18px;font-family:var(--font-display)}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:60px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
.footer ul a{opacity:.75;transition:opacity .15s}
.footer ul a:hover{opacity:1;color:var(--cyan-300)}
.footer .bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:13px;color:var(--ink-300)}
.footer .socials{display:flex;gap:10px}
.footer .socials a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;transition:all .2s}
.footer .socials a:hover{background:var(--blue-500);transform:translateY(-2px)}

/* ---------- Sections ---------- */
.section{padding:110px 0}
.section.tight{padding:80px 0}
.section-head{max-width:780px;margin:0 auto 60px;text-align:center}
.section-head .small{display:block;margin-bottom:16px}
.section-head p{font-size:18px;margin-top:18px;color:var(--ink-500)}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .nav ul{display:none}
  .footer .cols{grid-template-columns:1fr 1fr;gap:40px}
  .section{padding:70px 0}
  .topbar .right span:nth-child(2){display:none}
}