/* ===========================================================
   Build With Karianyu — Core Stylesheet
   Cloud-based IT solutions, Kenya
   =========================================================== */

:root {
  /* Brand palette */
  --bw-navy: #0a1733;
  --bw-navy-2: #11224d;
  --bw-blue: #1e6cff;
  --bw-blue-d: #0f4fd6;
  --bw-cyan: #20d0c2;
  --bw-amber: #ffb020;

  --ink: #0c1322;
  --body: #475069;
  --muted: #79839c;
  --line: #e6e9f2;
  --bg: #ffffff;
  --bg-soft: #f5f7fc;
  --bg-dark: #081027;

  --white: #ffffff;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 8px rgba(16, 32, 77, 0.06);
  --shadow: 0 18px 50px rgba(16, 32, 77, 0.12);
  --shadow-lg: 0 30px 80px rgba(10, 23, 51, 0.22);

  --container: 1160px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --ff-head: 'Sora', system-ui, -apple-system, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ff-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--bw-blue); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--bw-blue-d); }

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--bg-dark); color: #c4ccde; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bw-blue);
  margin-bottom: 16px;
}
.section--dark .eyebrow { color: var(--bw-cyan); }
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.08rem; color: var(--body); }

.lead { font-size: 1.18rem; color: var(--body); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: .98rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background: linear-gradient(135deg, var(--bw-blue), var(--bw-blue-d));
  color: #fff;
  box-shadow: 0 12px 28px rgba(30, 108, 255, .35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(30, 108, 255, .45); color:#fff; }
.btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); color:#fff; transform: translateY(-2px); }
.btn-light {
  background: #fff;
  color: var(--bw-navy);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--bw-navy); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
  padding: 18px 0;
}
.site-header.scrolled {
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding: 10px 0;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.12rem;
  color: #fff;
  letter-spacing: -.02em;
}
.scrolled .brand { color: var(--ink); }
.brand .logo-mark { width: 40px; height: 40px; flex: none; }
.brand small {
  display: block;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bw-cyan);
  margin-top: 2px;
}
.scrolled .brand small { color: var(--bw-blue); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: .96rem;
  color: rgba(255,255,255,.85);
}
.scrolled .nav-links a { color: var(--body); }
.nav-links a:hover { color: #fff; }
.scrolled .nav-links a:hover { color: var(--bw-blue); }

.nav-cta { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none;
  background: none; border: 0;
  width: 44px; height: 44px;
  cursor: pointer;
  color: #fff;
}
.scrolled .nav-toggle { color: var(--ink); }
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 170px 0 110px;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(32,208,194,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(30,108,255,.25), transparent 55%),
    linear-gradient(160deg, #081027 0%, #0a1733 55%, #11224d 100%);
  color: #c9d2e6;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 70% 30%, #000, transparent 75%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #dfe6f5;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  font-size: .82rem;
  margin-bottom: 26px;
}
.hero-pill b {
  background: var(--bw-cyan);
  color: var(--bw-navy);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.hero h1 { color: #fff; margin-bottom: 22px; }
.hero h1 .grad {
  background: linear-gradient(100deg, var(--bw-cyan), #7ab0ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { font-size: 1.16rem; max-width: 540px; color: #b6c0d8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 34px 0 36px; }
.hero-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hero-stats .num {
  font-family: var(--ff-head);
  font-size: 1.9rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.hero-stats .lbl { font-size: .85rem; color: #93a0bd; margin-top: 6px; }

/* Hero visual card */
.hero-visual { position: relative; }
.cloud-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 22px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lg);
}
.cloud-card .cc-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.cc-dot { display:flex; gap:6px; }
.cc-dot span { width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.25); }
.cc-dot span:first-child { background:#ff6058; }
.cc-dot span:nth-child(2){ background:#ffbe2f; }
.cc-dot span:nth-child(3){ background:#28c93f; }
.cc-tag { font-size:.72rem; letter-spacing:.1em; color:#8fd9d0; text-transform:uppercase; }
.cc-node {
  display:flex; align-items:center; gap:14px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.cc-node:last-child { margin-bottom:0; }
.cc-ico {
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  border-radius:10px;
  background: linear-gradient(135deg, rgba(30,108,255,.35), rgba(32,208,194,.3));
  color:#fff;
}
.cc-ico svg { width:22px; height:22px; }
.cc-node h4 { color:#fff; font-size:.95rem; margin:0; }
.cc-node p { color:#9aa6c2; font-size:.8rem; margin:2px 0 0; }
.cc-node .pulse {
  margin-left:auto;
  font-size:.7rem; color:#28c93f;
  display:flex; align-items:center; gap:6px;
}
.cc-node .pulse i {
  width:8px; height:8px; border-radius:50%; background:#28c93f;
  box-shadow:0 0 0 0 rgba(40,201,63,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow:0 0 0 0 rgba(40,201,63,.5); }
  70% { box-shadow:0 0 0 9px rgba(40,201,63,0); }
  100% { box-shadow:0 0 0 0 rgba(40,201,63,0); }
}
.float-badge {
  position:absolute;
  background:#fff;
  color:var(--ink);
  border-radius:14px;
  padding:12px 16px;
  box-shadow: var(--shadow-lg);
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; font-weight:600;
  animation: floaty 5s ease-in-out infinite;
}
.float-badge svg { width:22px; height:22px; color:var(--bw-blue); }
.float-badge.fb-1 { top:-22px; right:-12px; }
.float-badge.fb-2 { bottom:-20px; left:-22px; animation-delay:1.5s; }
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ---------- Logos / trust ---------- */
.trust { padding: 40px 0; border-bottom: 1px solid var(--line); }
.trust p {
  text-align:center; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:22px;
}
.trust-row {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: 14px 18px;
}
.trust-row span {
  font-family:var(--ff-head); font-weight:600; color:#9aa3bd;
  font-size:1rem; padding:8px 18px; border:1px solid var(--line);
  border-radius:999px; background:#fff;
}

/* ---------- Cards / services ---------- */
.grid { display:grid; gap:26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  height:100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card .ico {
  width:54px; height:54px;
  display:grid; place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(30,108,255,.12), rgba(32,208,194,.14));
  color:var(--bw-blue);
  margin-bottom:20px;
}
.card .ico svg { width:26px; height:26px; }
.card h3 { margin-bottom:10px; }
.card p { font-size:.96rem; margin-bottom:0; }
.card ul { margin:14px 0 0; padding:0; list-style:none; }
.card ul li {
  font-size:.9rem; padding-left:24px; position:relative; margin-bottom:8px; color:var(--body);
}
.card ul li::before {
  content:""; position:absolute; left:0; top:8px;
  width:14px; height:14px;
  background: var(--bw-cyan);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* feature card variant - dark accent */
.card.feature {
  background: linear-gradient(160deg, var(--bw-navy), var(--bw-navy-2));
  border-color: transparent;
  color:#c2cce0;
}
.card.feature h3 { color:#fff; }
.card.feature .ico { background: rgba(255,255,255,.1); color: var(--bw-cyan); }
.card.feature ul li { color:#c2cce0; }

/* ---------- About / split ---------- */
.split {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}
.about-visual {
  position:relative;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #0a1733, #11224d);
  padding: 40px;
  color:#fff;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.about-visual::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(400px 300px at 100% 0, rgba(32,208,194,.25), transparent 60%);
}
.about-visual .kpi {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
.about-visual .kpi > div {
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:22px;
}
.about-visual .kpi .num {
  font-family:var(--ff-head); font-size:2rem; font-weight:700; color:#fff; line-height:1;
}
.about-visual .kpi .lbl { font-size:.84rem; color:#9aa6c2; margin-top:8px; }

.check-list { list-style:none; margin:22px 0 0; padding:0; }
.check-list li {
  position:relative; padding-left:38px; margin-bottom:18px; color:var(--body);
}
.check-list li strong { color: var(--ink); display:block; font-family:var(--ff-head); }
.check-list li::before {
  content:""; position:absolute; left:0; top:2px;
  width:24px; height:24px; border-radius:8px;
  background: linear-gradient(135deg, var(--bw-blue), var(--bw-cyan));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000,#000);
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ---------- Process / steps ---------- */
.steps { counter-reset: step; display:grid; gap:24px; grid-template-columns: repeat(4,1fr); }
.step { position:relative; }
.step .n {
  font-family:var(--ff-head); font-weight:700; font-size:1.1rem;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--bw-blue);
  border:2px solid var(--bw-blue);
  margin-bottom:18px;
}
.step h3 { font-size:1.1rem; }
.step p { font-size:.92rem; margin-bottom:0; }
.section--dark .step .n { background:transparent; color:var(--bw-cyan); border-color:var(--bw-cyan); }

/* ---------- Case study ---------- */
.case {
  display:grid; grid-template-columns: 1fr 1fr; gap:0;
  border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow); border:1px solid var(--line);
  background:#fff;
}
.case-body { padding: clamp(32px,5vw,56px); }
.case-tag {
  display:inline-block; background:rgba(255,176,32,.15); color:#b97b00;
  font-weight:600; font-size:.78rem; padding:5px 14px; border-radius:999px;
  margin-bottom:18px; font-family:var(--ff-head);
}
.case-side {
  background: linear-gradient(160deg, var(--bw-navy), var(--bw-navy-2));
  color:#fff; padding: clamp(32px,5vw,56px);
  display:flex; flex-direction:column; justify-content:center;
}
.case-side .res { margin-bottom:26px; }
.case-side .res:last-child { margin-bottom:0; }
.case-side .res .num {
  font-family:var(--ff-head); font-size:2.2rem; font-weight:700;
  color:var(--bw-cyan); line-height:1;
}
.case-side .res .lbl { color:#aeb9d2; font-size:.9rem; margin-top:6px; }

/* ---------- Testimonial ---------- */
.quote {
  max-width:820px; margin-inline:auto; text-align:center;
}
.quote blockquote {
  font-family:var(--ff-head); font-weight:600;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height:1.4; color:#fff; margin:0 0 28px;
}
.quote .stars { color:var(--bw-amber); margin-bottom:20px; font-size:1.1rem; letter-spacing:3px; }
.quote .who { display:flex; align-items:center; justify-content:center; gap:14px; }
.quote .who .av {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--bw-blue),var(--bw-cyan));
  display:grid; place-items:center; color:#fff; font-family:var(--ff-head); font-weight:700;
}
.quote .who b { color:#fff; display:block; }
.quote .who span { color:#93a0bd; font-size:.9rem; }

/* ---------- Pricing ---------- */
.price-card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:34px; height:100%; display:flex; flex-direction:column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.price-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.price-card.popular { border-color:var(--bw-blue); box-shadow:var(--shadow); position:relative; }
.price-card.popular::before {
  content:"Most popular"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--bw-blue),var(--bw-blue-d)); color:#fff;
  font-size:.72rem; font-weight:600; font-family:var(--ff-head);
  padding:5px 16px; border-radius:999px; letter-spacing:.04em;
}
.price-card h3 { margin-bottom:6px; }
.price-card .price { font-family:var(--ff-head); font-weight:700; color:var(--ink); font-size:2.1rem; margin:10px 0 4px; }
.price-card .price small { font-size:.9rem; color:var(--muted); font-weight:500; }
.price-card .desc { font-size:.92rem; color:var(--muted); margin-bottom:22px; }
.price-card ul { list-style:none; margin:0 0 26px; padding:0; flex:1; }
.price-card ul li { font-size:.93rem; padding-left:26px; position:relative; margin-bottom:12px; }
.price-card ul li::before {
  content:""; position:absolute; left:0; top:6px; width:15px; height:15px;
  background:var(--bw-cyan);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- FAQ ---------- */
.faq-item {
  border:1px solid var(--line); border-radius:var(--radius-sm);
  margin-bottom:14px; background:#fff; overflow:hidden;
}
.faq-q {
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:20px 24px; font-family:var(--ff-head); font-weight:600; font-size:1.02rem;
  color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-q .ic { flex:none; transition:transform .3s var(--ease); color:var(--bw-blue); font-size:1.4rem; line-height:1; }
.faq-item.open .faq-q .ic { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a p { padding:0 24px 22px; margin:0; font-size:.96rem; }

/* ---------- CTA band ---------- */
.cta-band {
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--bw-blue), #1746c9 60%, var(--bw-navy));
  border-radius: clamp(20px,3vw,30px);
  padding: clamp(40px,6vw,72px);
  color:#fff; text-align:center;
}
.cta-band::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(500px 300px at 90% 10%, rgba(32,208,194,.4), transparent 60%);
}
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; }
.cta-band p { color:#d7e0f7; max-width:560px; margin-inline:auto; }
.cta-band .hero-actions { justify-content:center; }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap:56px; align-items:start; }
.contact-info .ci-item { display:flex; gap:16px; margin-bottom:26px; }
.contact-info .ci-item .ico {
  width:48px; height:48px; flex:none; border-radius:12px;
  background: linear-gradient(135deg, rgba(30,108,255,.12), rgba(32,208,194,.14));
  color:var(--bw-blue); display:grid; place-items:center;
}
.contact-info .ci-item .ico svg { width:22px; height:22px; }
.contact-info .ci-item h4 { margin:0 0 2px; font-size:1rem; }
.contact-info .ci-item p { margin:0; font-size:.95rem; }

form .row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
form label { display:block; font-family:var(--ff-head); font-weight:500; font-size:.88rem; color:var(--ink); margin-bottom:7px; }
form .field { margin-bottom:18px; }
form input, form select, form textarea {
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:10px;
  font-family:var(--ff-body); font-size:.96rem; color:var(--ink); background:#fff;
  transition: border-color .2s, box-shadow .2s;
}
form input:focus, form select:focus, form textarea:focus {
  outline:none; border-color:var(--bw-blue); box-shadow:0 0 0 3px rgba(30,108,255,.15);
}
form textarea { resize:vertical; min-height:120px; }
.form-note { font-size:.84rem; color:var(--muted); margin-top:10px; }
.form-success {
  display:none; background:rgba(32,208,194,.12); border:1px solid var(--bw-cyan);
  color:#0c7a70; padding:14px 18px; border-radius:10px; font-size:.95rem; margin-bottom:18px;
}
.form-success.show { display:block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-dark); color:#9aa6c2; padding: 72px 0 32px; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.site-footer .brand { color:#fff; margin-bottom:18px; }
.site-footer .brand small { color:var(--bw-cyan); }
.footer-about p { font-size:.95rem; max-width:320px; }
.footer-col h4 { color:#fff; font-size:.95rem; letter-spacing:.04em; margin-bottom:18px; }
.footer-col ul { list-style:none; margin:0; padding:0; }
.footer-col ul li { margin-bottom:12px; }
.footer-col a { color:#9aa6c2; font-size:.93rem; }
.footer-col a:hover { color:#fff; }
.social { display:flex; gap:12px; margin-top:22px; }
.social a {
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); color:#cfd7e8;
}
.social a:hover { background:var(--bw-blue); color:#fff; transform:translateY(-2px); }
.social svg { width:18px; height:18px; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08); padding-top:26px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.86rem; color:#79839c;
}

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform:translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .split, .case, .contact-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-4, .steps { grid-template-columns: repeat(2,1fr); }
  .hero-visual { order:-1; max-width:460px; }
  .case-side { order:2; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap:32px; }
  .footer-about { grid-column:1/-1; }
}
@media (max-width: 720px) {
  .nav-links, .nav-cta .btn { display:none; }
  .nav-toggle { display:grid; place-items:center; }
  .site-header.menu-open { background:#fff; box-shadow:var(--shadow-sm); }
  .site-header.menu-open .brand, .site-header.menu-open .nav-toggle { color:var(--ink); }
  .nav-links.open {
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; padding:14px 24px 22px; box-shadow:var(--shadow);
  }
  .nav-links.open a { color:var(--body); width:100%; padding:10px 0; border-bottom:1px solid var(--line); }
  .grid-3, .grid-4, .steps, .grid-2, .price-grid { grid-template-columns: 1fr; }
  form .row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  body { font-size:16px; }
}