/* CreativeCroon — stylesheet
   Fonts: Space Grotesk (display) + Manrope (body)
   Brand gradient: #FF3B30 → #FF9500 → #FFCC00 → #34C7B5 → #2D6CF6 → #7A4DF0
   Every rule targets a class — no element-level styling beyond the base reset. */

:root{
  --ink:#14141C;
  --ink-2:#3A3A46;
  --muted:#5B5B68;
  --muted-2:#6E6E7C;
  --faint:#9494A2;
  --faint-2:#A8A8B4;
  --white:#FFFFFF;
  --surface:#F6F6F9;
  --surface-2:#F4F4F7;
  --tint:#FBFBFE;
  --line:rgba(15,15,25,0.08);
  --line-soft:rgba(15,15,25,0.06);
  --line-strong:rgba(15,15,25,0.14);
  --brand:linear-gradient(120deg,#FF9500,#FFCC00,#34C7B5,#2D6CF6,#7A4DF0);
  --brand-full:linear-gradient(120deg,#FF3B30,#FF9500,#FFCC00,#34C7B5,#2D6CF6,#7A4DF0);
  --brand-text:linear-gradient(110deg,#FF3B30,#FFCC00,#34C7B5,#2D6CF6,#7A4DF0);
  --brand-eyebrow:linear-gradient(110deg,#FF9500,#34C7B5,#7A4DF0);
  --brand-chip:linear-gradient(120deg,#FFCC00,#34C7B5,#2D6CF6);
  --display:'Space Grotesk',sans-serif;
  --body:'Manrope',sans-serif;
  --shadow-card:0 1px 3px rgba(15,15,25,0.04);
  --shadow-hover:0 22px 50px -26px rgba(15,15,25,0.3);
  --shadow-btn:0 14px 40px -12px rgba(45,108,246,0.5);
}

/* ---------- Base reset ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(45,108,246,0.18);color:var(--ink);}
img{display:block;max-width:100%;}
a{color:#2D6CF6;text-decoration:none;}
a:hover{color:#1B4FC0;}

/* ---------- Containers ---------- */
.wrap{max-width:1200px;margin:0 auto;}
.wrap-sm{max-width:1100px;margin:0 auto;}
.wrap-md{max-width:980px;margin:0 auto;}
.stack{display:flex;flex-direction:column;gap:14px;}
.stack-lg{display:flex;flex-direction:column;gap:20px;}

/* ---------- Text accents ---------- */
.grad-text{
  background:var(--brand-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.eyebrow{
  margin:0 0 14px;font-size:13px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  background:var(--brand-eyebrow);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 30px;border-radius:100px;
  font-family:var(--display);font-weight:600;font-size:16px;
  text-decoration:none;cursor:pointer;border:none;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn-primary{color:#0B0B10;background:var(--brand);box-shadow:var(--shadow-btn);}
.btn-primary:hover{transform:translateY(-2px);color:#0B0B10;}
.btn-ghost{
  color:var(--ink);background:var(--white);
  border:1px solid var(--line-strong);
  box-shadow:0 4px 14px -8px rgba(15,15,25,0.2);
}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);}
.btn-dark{
  color:var(--white);background:#0B0B10;font-weight:700;font-size:16.5px;
  padding:16px 34px;box-shadow:0 16px 40px -12px rgba(0,0,0,0.4);
}
.btn-dark:hover{transform:translateY(-2px);color:var(--white);}
.btn-sm{
  padding:13px 24px;font-family:var(--body);font-weight:600;font-size:15px;
  box-shadow:0 4px 14px -8px rgba(15,15,25,0.15);
}
.btn.is-spaced{margin-top:14px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:18px 40px;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.logo{flex:none;display:flex;align-items:center;}
.logo-img{height:34px;width:auto;}
.nav{display:flex;align-items:center;gap:30px;}
.site-header .nav li{
  position:relative;color:var(--muted)!important;text-decoration:none;
  font-weight:600;font-size:15px;letter-spacing:0.01em;
  white-space:nowrap;transition:color .2s;
  list-style-type: none;
}
.site-header .nav li a{color:#5B5B68;!important}
.site-header .nav li:hover{color:var(--ink);}
.site-header .nav li.current-menu-item{color:var(--ink);}
.site-header .nav li.current-menu-item::after{
  content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,#FF3B30,#FFCC00,#34C7B5,#2D6CF6,#7A4DF0);
}
.header-cta{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:100px;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:14.5px;
  color:#0B0B10;background:var(--brand);
  box-shadow:0 8px 24px -8px rgba(45,108,246,0.4);
  transition:transform .2s,box-shadow .2s;
}
.header-cta:hover{
  transform:translateY(-1px);color:#0B0B10;
  box-shadow:0 12px 30px -8px rgba(122,77,240,0.5);
}
.nav-toggle{
  display:none;flex:none;width:42px;height:42px;border-radius:11px;
  align-items:center;justify-content:center;cursor:pointer;
  background:var(--white);border:1px solid var(--line-strong);
}
.nav-toggle-bar{
  display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
  position:relative;
}
.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:'';position:absolute;left:0;width:18px;height:2px;
  border-radius:2px;background:var(--ink);
}
.nav-toggle-bar::before{top:-6px;}
.nav-toggle-bar::after{top:6px;}

/* ---------- Section shells ---------- */
.section{padding:96px 40px;}
.section-surface{
  background:var(--surface);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.section-stats{padding-top:18px;}
.section-work{padding-top:0;}
.section-cta{padding-top:0;padding-bottom:110px;}
.section-strip{padding-top:24px;padding-bottom:60px;}
.section-values{padding-top:80px;}
.section-stats-b{padding-top:0;padding-bottom:90px;}
.section-surface-tight{padding-top:80px;padding-bottom:80px;}
.section-svc{padding-top:20px;padding-bottom:90px;}
.section-plans{padding-top:90px;padding-bottom:90px;}
.section-filters{padding-top:0;padding-bottom:36px;}
.section-grid{padding-top:0;padding-bottom:90px;}
.section-feature{padding-top:20px;padding-bottom:28px;}
.section-posts{padding-top:24px;padding-bottom:90px;}
.section-newsletter{padding-top:0;padding-bottom:100px;}
.section-perks{padding-top:30px;padding-bottom:70px;}
.section-roles{padding-top:60px;padding-bottom:90px;}

/* ---------- Section headings ---------- */
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:30px;flex-wrap:wrap;margin-bottom:54px;
}
.section-head-copy{max-width:620px;}
.section-head-center{text-align:center;max-width:640px;margin:0 auto 56px;}
.section-title{
  margin:0;font-family:var(--display);font-weight:700;font-size:46px;
  line-height:1.08;letter-spacing:-0.02em;color:var(--ink);
}
.section-head-center.is-narrow{max-width:600px;margin-bottom:50px;}
.section-head-center.is-narrow .section-title{font-size:42px;}
.section-sub{margin:14px 0 0;font-size:17px;color:var(--muted);line-height:1.6;}
.h2-md{
  margin:0 0 14px;font-family:var(--display);font-weight:700;font-size:42px;
  letter-spacing:-0.02em;color:var(--ink); line-height:42px;
}
.block-head{margin-bottom:50px;}
.lead{margin:0;font-size:17px;color:var(--muted);line-height:1.6;}

/* ---------- Hero ---------- */
.hero{
  position:relative;padding:118px 40px 120px;overflow:hidden;
  background:linear-gradient(180deg,var(--tint),var(--white));
}
.hero-inner{position:relative;max-width:980px;margin:0 auto;text-align:center;}
.hero-title{
  margin:0 0 26px;font-family:var(--display);font-weight:700;
  font-size:74px;line-height:1.04;letter-spacing:-0.025em;
  color:var(--ink);text-wrap:balance;
}
.hero-sub{
  margin:0 auto 38px;max-width:600px;font-size:19px;line-height:1.65;
  color:var(--muted);text-wrap:pretty;
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.pill-badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 16px;
  border-radius:100px;background:var(--white);border:1px solid rgba(15,15,25,0.1);
  box-shadow:0 4px 14px -8px rgba(15,15,25,0.2);
  font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:30px;
}
.pill-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--brand-chip);box-shadow:0 0 10px rgba(52,199,181,0.7);
}

/* ---------- Page heads ---------- */
.page-head{
  position:relative;padding:96px 40px 70px;overflow:hidden;
  background:linear-gradient(180deg,var(--tint),var(--white));
}
.page-head-center{text-align:center;}
.page-head-inner{position:relative;max-width:820px;margin:0 auto;}
.page-head-inner-left{position:relative;max-width:920px;}
.page-title{
  margin:0 0 22px;font-family:var(--display);font-weight:700;
  font-size:60px;line-height:1.05;letter-spacing:-0.025em;
  color:var(--ink);text-wrap:balance;
}
.page-head-lead{margin:0 auto;max-width:560px;font-size:18px;line-height:1.65;color:var(--muted);}
.page-head-lead-left{margin:0;max-width:640px;font-size:19px;line-height:1.65;color:var(--muted);}
.page-head--tight{padding-bottom:56px;}
.page-head--tight-b{padding-bottom:60px;}
.page-head--contact{padding-top:90px;padding-bottom:80px;}

/* ---------- Ambient glows ---------- */
.glow{position:absolute;pointer-events:none;}
.glow-a{top:-180px;left:50%;transform:translateX(-50%);width:900px;height:560px;
  background:radial-gradient(closest-side,rgba(45,108,246,0.16),transparent 70%);}
.glow-b{top:60px;right:-120px;width:520px;height:520px;
  background:radial-gradient(closest-side,rgba(255,149,0,0.12),transparent 70%);}
.glow-c{bottom:-160px;left:-120px;width:520px;height:520px;
  background:radial-gradient(closest-side,rgba(122,77,240,0.12),transparent 70%);}
.glow-purple{top:-160px;left:50%;transform:translateX(-50%);width:760px;height:460px;
  background:radial-gradient(closest-side,rgba(122,77,240,0.13),transparent 70%);}
.glow-blue{top:-160px;left:50%;transform:translateX(-50%);width:760px;height:440px;
  background:radial-gradient(closest-side,rgba(45,108,246,0.13),transparent 70%);}
.glow-teal{top:-160px;left:50%;transform:translateX(-50%);width:760px;height:440px;
  background:radial-gradient(closest-side,rgba(52,199,181,0.13),transparent 70%);}
.glow-orange{top:-160px;right:-80px;width:620px;height:480px;
  background:radial-gradient(closest-side,rgba(255,149,0,0.12),transparent 70%);}
.glow-orange-c{top:-160px;left:50%;transform:translateX(-50%);width:760px;height:440px;
  background:radial-gradient(closest-side,rgba(255,149,0,0.12),transparent 70%);}
.glow-violet-l{top:-160px;left:-80px;width:620px;height:480px;
  background:radial-gradient(closest-side,rgba(122,77,240,0.13),transparent 70%);}
.glow-orange-r{top:40px;right:-100px;width:560px;height:480px;
  background:radial-gradient(closest-side,rgba(255,149,0,0.10),transparent 70%);}

/* ---------- Browser mock ---------- */
.mock{position:relative;max-width:1080px;margin:74px auto 0;}
.mock-frame{
  border-radius:18px;padding:1px;
  background:linear-gradient(120deg,rgba(255,59,48,0.4),rgba(255,204,0,0.4),rgba(52,199,181,0.4),rgba(45,108,246,0.4),rgba(122,77,240,0.4));
  box-shadow:0 40px 100px -40px rgba(45,108,246,0.4);
}
.mock-body{border-radius:17px;overflow:hidden;background:var(--white);}
.mock-bar{
  display:flex;align-items:center;gap:8px;padding:14px 18px;
  border-bottom:1px solid rgba(15,15,25,0.07);background:#F8F8FB;
}
.dot{width:11px;height:11px;border-radius:50%;}
.dot-r{background:#FF5F57;}
.dot-y{background:#FFBD2E;}
.dot-g{background:#28C840;}
.mock-url{
  margin-left:14px;padding:4px 14px;border-radius:7px;
  background:rgba(15,15,25,0.05);font-size:12.5px;color:#8A8A98;
  font-family:monospace;
}
.mock-canvas{
  height:430px;display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(135deg,rgba(15,15,25,0.022) 0 18px,transparent 18px 36px),
    radial-gradient(circle at 30% 30%,rgba(45,108,246,0.07),transparent 60%);
}
.mock-label{font-family:monospace;font-size:13px;color:var(--faint-2);letter-spacing:0.05em;}

/* ---------- Client logos ---------- */
.logos{padding:26px 40px 56px;border-top:1px solid var(--line-soft);}
.logos-label{
  text-align:center;margin:0 0 28px;font-size:13px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--faint-2);
}
.logos-row{
  max-width:980px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:30px;flex-wrap:wrap;opacity:.62;
}
.logo-item{font-family:var(--display);font-weight:700;font-size:24px;color:var(--muted);}

/* ---------- Grids ---------- */
.grid{display:grid;gap:18px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid-posts{gap:22px;}
.grid-perks{gap:16px;}

/* ---------- Icon tiles ---------- */
.icon-tile{
  width:54px;height:54px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;font-size:25px;margin-bottom:22px;
}
.icon-tile-sm{
  width:46px;height:46px;border-radius:12px;font-size:21px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
}
.icon-tile-md{
  width:50px;height:50px;border-radius:13px;font-size:23px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
}
.icon-tile-lg{
  width:58px;height:58px;border-radius:15px;font-size:26px;margin-bottom:22px;
  display:inline-flex;align-items:center;justify-content:center;
}
.tint-red{background:linear-gradient(135deg,rgba(255,59,48,.14),rgba(255,149,0,.16));}
.tint-amber{background:linear-gradient(135deg,rgba(255,149,0,.14),rgba(255,204,0,.16));}
.tint-teal{background:linear-gradient(135deg,rgba(52,199,181,.14),rgba(45,108,246,.16));}
.tint-blue{background:linear-gradient(135deg,rgba(45,108,246,.14),rgba(122,77,240,.16));}
.tint-violet{background:linear-gradient(135deg,rgba(122,77,240,.14),rgba(255,59,48,.16));}
.tint-lime{background:linear-gradient(135deg,rgba(255,204,0,.14),rgba(52,199,181,.16));}

/* ---------- Service cards ---------- */
.card{
  border-radius:18px;padding:30px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
  text-decoration:none;color:inherit;display:block;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.card:hover{
  transform:translateY(-5px);border-color:var(--line-strong);
  box-shadow:0 18px 40px -22px rgba(15,15,25,0.25);color:inherit;
}
.card-title{margin:0 0 10px;font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink);}
.card-text{margin:0;font-size:15px;line-height:1.6;color:var(--muted-2);}

/* ---------- Value cards ---------- */
.card-static{
  border-radius:18px;padding:32px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
}
.value-title{margin:0 0 10px;font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink);}
.value-text{margin:0;font-size:15px;line-height:1.65;color:var(--muted-2);}

/* ---------- Stats ---------- */
.stats{
  border-radius:22px;padding:48px 40px;
  background:linear-gradient(120deg,rgba(255,59,48,.06),rgba(255,204,0,.05),rgba(52,199,181,.05),rgba(45,108,246,.06),rgba(122,77,240,.07));
  border:1px solid rgba(15,15,25,0.07);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center;
}
.stat-num{
  font-family:var(--display);font-weight:700;font-size:48px;line-height:1;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat-a{background-image:linear-gradient(120deg,#FF9500,#F5A800);}
.stat-b{background-image:linear-gradient(120deg,#1FA899,#2D6CF6);}
.stat-c{background-image:linear-gradient(120deg,#2D6CF6,#7A4DF0);}
.stat-d{background-image:linear-gradient(120deg,#FF3B30,#FF9500);}
.stat-label{margin-top:8px;color:var(--muted);font-size:15px;}

/* ---------- Media cards (work / posts / team) ---------- */
.media-card{
  border-radius:18px;overflow:hidden;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
  text-decoration:none;color:inherit;display:block;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.media-card:hover{
  transform:translateY(-5px);border-color:var(--line-strong);
  box-shadow:var(--shadow-hover);color:inherit;
}
.media-card.is-static{cursor:default;}
.media-shot{position:relative;display:flex;align-items:center;justify-content:center;}
/*.media-shot::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.32) 0 16px,transparent 16px 32px);
}*/
.shot-label{
  position:relative;font-family:monospace;font-size:12.5px;
  color:rgba(255,255,255,.9);letter-spacing:.05em;
}
.media-shot img {
    height: 300px;
}
.shot-label-sm{
  position:relative;font-family:monospace;font-size:11.5px;
  color:rgba(255,255,255,.9);
}
.h280{height:280px;}
.h300{height:300px;}
.h230{height:230px;}
.h190{height:190px;}
.bg-blue{background:linear-gradient(135deg,#5B7BF0,#2D6CF6);}
.bg-orange{background:linear-gradient(135deg,#FFB454,#FF9500);}
.bg-teal{background:linear-gradient(135deg,#4FD6C6,#1FA899);}
.bg-violet{background:linear-gradient(135deg,#9B72F0,#7A4DF0);}
.bg-red{background:linear-gradient(135deg,#FF6F61,#FF3B30);}
.bg-green{background:linear-gradient(135deg,#3FC8A0,#1FA877);}
.media-meta{
  padding:24px 26px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;
}
.media-title{margin:0 0 5px;font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink);}
.media-sub{margin:0;font-size:14.5px;color:var(--muted-2);}
.media-meta.is-top{align-items:flex-start;padding:26px 28px;}
.media-meta.is-top .media-title{font-size:23px;margin-bottom:7px;}
.media-meta.is-top .media-sub{font-size:15px;line-height:1.55;}
.arrow-btn{
  flex:none;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid rgba(15,15,25,.1);
  color:var(--ink);font-size:17px;
}
.arrow-btn.is-lg{width:44px;height:44px;font-size:18px;}
.cat-tag{
  position:absolute;top:18px;left:18px;padding:5px 13px;border-radius:100px;
  font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:normal;
  color:var(--ink);background:rgba(255,255,255,.95);z-index:1;
}

/* ---------- Team ---------- */
.person-meta{padding:20px 22px;}
.person-name{margin:0 0 4px;font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink);}
.person-role{margin:0;font-size:14px;color:var(--muted-2);}

/* ---------- Process steps ---------- */
.step{
  border-radius:16px;padding:28px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
}
.step-n{
  font-family:var(--display);font-weight:700;font-size:15px;color:#0B0B10;
  width:34px;height:34px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;
  background:var(--brand-chip);margin-bottom:20px;
}
.step-title{margin:0 0 9px;font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink);}
.step-text{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted-2);}
.perk{padding:26px;}
.perk .step-title{font-size:17.5px;margin-bottom:8px;}
.perk .step-text{font-size:14px;line-height:1.55;}

/* ---------- Testimonial ---------- */
.testimonial{max-width:900px;margin:0 auto;text-align:center;}
.quote-mark{
  font-family:var(--display);font-size:54px;line-height:0;
  background:linear-gradient(120deg,#FF9500,#34C7B5,#7A4DF0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.quote{
  margin:18px 0 30px;font-family:var(--display);font-weight:500;font-size:30px;
  line-height:1.4;letter-spacing:-0.015em;color:var(--ink);text-wrap:balance;
}
.quote-by{display:flex;align-items:center;justify-content:center;gap:14px;}
.quote-person{text-align:left;}
.quote-name{display:block;font-weight:700;font-size:15.5px;color:var(--ink);}
.quote-role{font-size:14px;color:var(--muted-2);}
.avatar{width:34px;height:34px;border-radius:50%;
  background:linear-gradient(120deg,#FF3B30,#FFCC00,#2D6CF6);}
.avatar-sm{width:34px;height:34px;border-radius:50%;
  background:linear-gradient(120deg,#FF3B30,#FFCC00,#2D6CF6);}

/* ---------- CTA blocks ---------- */
.cta-banner{
  position:relative;max-width:1100px;margin:0 auto;border-radius:26px;
  overflow:hidden;padding:74px 50px;text-align:center;
  background:var(--brand-full);
}
.cta-banner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 120%,rgba(0,0,0,.28),transparent 60%);
}
.cta-inner{position:relative;}
.cta-title{
  margin:0 0 16px;font-family:var(--display);font-weight:700;font-size:50px;
  line-height:1.06;letter-spacing:-0.02em;color:#0B0B10;text-wrap:balance;
}
.cta-text{
  margin:0 auto 34px;max-width:520px;font-size:18px;line-height:1.6;
  color:rgba(11,11,16,.78);font-weight:500;
}
.cta-banner.is-compact{padding-top:70px;padding-bottom:70px;}
.cta-banner.is-compact .cta-title{font-size:46px;margin-bottom:14px;}
.cta-simple{max-width:880px;margin:0 auto;text-align:center;}
.cta-simple-title{
  margin:0 0 16px;font-family:var(--display);font-weight:700;font-size:46px;
  letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;
  line-height: 56px;
}
.cta-simple-text{margin:0 auto 32px;max-width:480px;font-size:17px;color:var(--muted);line-height:1.6;}
.cta-simple.is-wide{max-width:840px;}
.cta-simple.is-wide .cta-simple-title{font-size:44px;}
.cta-simple.is-wide .cta-simple-text{max-width:460px;}

/* ---------- Service detail rows ---------- */
.svc-row{
  border-radius:20px;padding:40px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:40px;align-items:center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.svc-row:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.14);
}
.svc-title{margin:0 0 14px;font-family:var(--display);font-weight:700;font-size:32px;
  letter-spacing:-0.015em;color:var(--ink);}
.svc-text{margin:0;font-size:16px;line-height:1.7;color:var(--muted);}
.svc-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.svc-point{
  display:flex;align-items:center;gap:11px;padding:15px 16px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line-soft);
}
.tick{
  flex:none;width:22px;height:22px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:12px;color:#0B0B10;
  background:var(--brand-chip);
}
.svc-point-label{font-size:14.5px;color:var(--ink-2);font-weight:500;}

/* ---------- Pricing ---------- */
.plan{
  position:relative;border-radius:20px;padding:34px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
}
.plan-featured{
  background:linear-gradient(150deg,rgba(45,108,246,.08),rgba(122,77,240,.1));
  border-color:rgba(122,77,240,.35);
  box-shadow:0 18px 44px -24px rgba(122,77,240,.4);
}
.plan-name{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink);}
.plan-for{margin:0 0 22px;font-size:14.5px;color:var(--muted-2);}
.plan-price{font-family:var(--display);font-weight:700;font-size:38px;color:var(--ink);}
.plan-note{margin:4px 0 26px;font-size:13.5px;color:var(--muted-2);}
.plan-btn{
  display:flex;align-items:center;justify-content:center;padding:13px;
  border-radius:100px;text-decoration:none;font-family:var(--display);
  font-weight:600;font-size:15px;color:var(--ink);background:var(--surface-2);
  border:1px solid rgba(15,15,25,.12);transition:background .2s;
}
.plan-btn:hover{background:#EAEAF0;color:var(--ink);}
.plan-btn-primary{color:#0B0B10;background:var(--brand-chip);border:none;}
.plan-btn-primary:hover{color:#0B0B10;opacity:.92;background:var(--brand-chip);}
.badge-popular{
  position:absolute;top:20px;right:20px;padding:5px 13px;border-radius:100px;
  font-size:12px;font-weight:700;color:#0B0B10;background:var(--brand-chip);
}

/* ---------- Filters ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.filter{
  padding:9px 18px;border-radius:100px;font-size:14px;font-weight:600;
  color:var(--muted);background:var(--white);border:1px solid rgba(15,15,25,.1);
  cursor:pointer;transition:all .2s;font-family:var(--body);
}
.filter:hover{color:var(--ink);background:var(--surface-2);}
.filter.is-active{color:#0B0B10;background:var(--brand-chip);border-color:transparent;}

/* ---------- Blog ---------- */
.feature-post{
  border-radius:20px;overflow:hidden;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
  display:grid;grid-template-columns:1.1fr 1fr;text-decoration:none;color:inherit;
  transition:border-color .25s,box-shadow .25s;
}
.feature-post:hover{border-color:var(--line-strong);box-shadow:var(--shadow-hover);color:inherit;}
.feature-shot{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center;}
/*.feature-shot::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.32) 0 16px,transparent 16px 32px);
}*/
.feature-body{padding:46px;display:flex;flex-direction:column;justify-content:center;}
.chip-featured{
  display:inline-flex;width:fit-content;padding:5px 13px;border-radius:100px;
  font-size:12px;font-weight:700;color:#0B0B10;background:var(--brand-chip);margin-bottom:18px;
}
.blog .media-shot img, .single-post .realted-article .media-shot img {
    height: 220px;
}
.feature-title{
  margin:0 0 14px;font-family:var(--display);font-weight:700;font-size:32px;
  line-height:1.15;letter-spacing:-0.015em;color:var(--ink);
}
.feature-excerpt{margin:0 0 22px;font-size:16px;line-height:1.65;color:var(--muted);}
.byline{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted-2);}
.byline-name{color:var(--ink-2);font-weight:600;}
.post-body{padding:24px 24px 26px;}
.post-cat{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2D6CF6;}
.post-title{margin:10px 0;font-family:var(--display);font-weight:600;font-size:20px;
  line-height:1.25;color:var(--ink);}
.post-excerpt{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--muted-2);}
.post-meta{font-size:13.5px;color:var(--faint);}

/* ---------- Newsletter ---------- */
.newsletter{
  max-width:760px;margin:0 auto;text-align:center;border-radius:22px;
  padding:50px 40px;background:var(--surface);border:1px solid rgba(15,15,25,.07);
}
.newsletter-title{margin:0 0 12px;font-family:var(--display);font-weight:700;font-size:32px;
  letter-spacing:-0.015em;color:var(--ink);}
.newsletter-text{margin:0 auto 26px;max-width:440px;font-size:16px;color:var(--muted);line-height:1.6;}
.newsletter-form{display:flex;gap:10px;max-width:440px;margin:0 auto;}
.newsletter-input{
  flex:1;padding:14px 18px;border-radius:100px;border:1px solid var(--line-strong);
  background:var(--white);color:var(--ink);font-family:var(--body);font-size:15px;outline:none;
}
.newsletter-input::placeholder{color:var(--faint-2);}
.newsletter-input:focus{border-color:#2D6CF6;}
.newsletter-btn{
  flex:none;padding:14px 26px;border-radius:100px;border:none;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:15px;color:#0B0B10;
  background:var(--brand-chip);
}

/* ---------- Contact ---------- */
.contact-grid{
  position:relative;max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:0.95fr 1.05fr;gap:56px;align-items:start;
}
.contact-title{
  margin:0 0 20px;font-family:var(--display);font-weight:700;font-size:52px;
  line-height:1.05;letter-spacing:-0.025em;color:var(--ink);text-wrap:balance;
}
.contact-lead{margin:0 0 38px;max-width:420px;font-size:17px;line-height:1.65;color:var(--muted);}
.contact-list{display:flex;flex-direction:column;gap:18px;}
.contact-item{display:flex;align-items:center;gap:16px;}
.contact-icon{
  flex:none;width:48px;height:48px;border-radius:13px;display:flex;
  align-items:center;justify-content:center;font-size:20px;
}
.contact-label{font-size:13px;color:var(--faint);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;}
.contact-value{font-size:16.5px;color:var(--ink);font-weight:600;font-family:var(--display);}
.form-card{
  border-radius:22px;padding:38px;background:var(--white);
  border:1px solid var(--line);box-shadow:0 18px 50px -30px rgba(15,15,25,.3);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.field{margin-bottom:16px;}
.field-label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:8px;}
.field-input, .field-textarea {
    width: 100%;
    padding: 14px 16px !important;
    border-radius: 12px;
    border: 1px solid rgba(15,15,25,.12) !important;
    background: #FBFBFD !important;
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    outline: none;
}
.form-row div p {
    margin-bottom: 0px;
}
.form-row div p br {
    display: none;
}
.field-textarea{resize:vertical;}
.field-input::placeholder,.field-textarea::placeholder{color:var(--faint-2);}
.field-input:focus,.field-textarea:focus{border-color:#2D6CF6;}
.need-chips{display:flex;gap:8px;flex-wrap:wrap;}
.need-chip{
  padding:8px 15px;border-radius:100px;font-size:13.5px;font-weight:600;
  color:var(--muted);background:var(--surface-2);border:1px solid rgba(15,15,25,.1);
  cursor:pointer;transition:all .2s;font-family:var(--body);
}
.need-chip:hover{color:var(--ink);background:#EAEAF0;}
.need-chip.is-active{color:#0B0B10;background:var(--brand-chip);border-color:transparent;}
.form-submit{
  width:100%;padding:15px;border-radius:100px;border:none;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:16px;color:#0B0B10;
  background:var(--brand);box-shadow:0 14px 40px -12px rgba(45,108,246,.45);
  transition:transform .2s;
}
.form-submit:hover{transform:translateY(-2px);}
.form-note{margin:16px 0 0;text-align:center;font-size:13px;color:var(--faint);}
.form-status{
  margin:14px 0 0;text-align:center;font-size:14px;font-weight:600;
  color:#1FA899;display:none;
}
.form-status.is-visible{display:block;}

/* ---------- Careers ---------- */
.roles-head{margin-bottom:40px;}
.roles-head .h2-md{margin:0 0 25px;}
.roles-note{margin:0;font-size:17px;color:var(--muted);}
.role{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  text-decoration:none;color:inherit;border-radius:16px;padding:26px 30px;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-card);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.role:hover{
  transform:translateX(4px);border-color:rgba(15,15,25,.16);
  box-shadow:0 14px 34px -22px rgba(15,15,25,.3);color:inherit;
}
.role-title{margin:0 0 8px;font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink);}
.role-tags{display:flex;gap:10px;flex-wrap:wrap;}
.role-tag{
  font-size:13px;color:var(--muted-2);padding:4px 12px;border-radius:100px;
  background:var(--surface-2);border:1px solid rgba(15,15,25,.08);
}
.role-apply{
  flex:none;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;
  border-radius:100px;font-family:var(--display);font-weight:600;font-size:14.5px;
  color:#0B0B10;background:var(--brand-chip);
}

/* ---------- About image strip ---------- */
.strip{display:grid;grid-template-columns:2fr 1fr;gap:18px;height:360px;}
.strip-cell{
  border-radius:18px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.strip-cell::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.3) 0 16px,transparent 16px 32px);
}
.strip-label{position:relative;font-family:monospace;font-size:12.5px;color:rgba(255,255,255,.92);}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--surface);border-top:1px solid var(--line);
  padding:72px 40px 36px;
}
.footer-grid{
  max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;
}
.footer-about{max-width:320px;}
.footer-logo{height:36px;width:auto;margin-bottom:20px;}
.footer-blurb{margin:0 0 22px;color:var(--muted-2);font-size:15px;line-height:1.7;}
.socials{display:flex;gap:12px;}
.social-link{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:11px;background:var(--white);border:1px solid rgba(15,15,25,.1);
  color:var(--muted);text-decoration:none;font-size:15px;transition:all .2s;
}
.social-link:hover{color:var(--ink);border-color:rgba(15,15,25,.2);}
.footer-title{
  margin:0 0 18px;color:var(--ink);font-family:var(--display);font-weight:600;
  font-size:14px;letter-spacing:.04em;text-transform:uppercase;
}
.footer-links{display:flex;flex-direction:column;gap:12px;}
.footer-links li a,footer.site-footer a{color:var(--muted-2);text-decoration:none;font-size:15px;
  transition:color .2s;line-height:1.6;}
.footer-links li a:hover{color:var(--ink);}
.footer-note{color:var(--muted-2);font-size:15px;line-height:1.6;}
.footer-base{
  max-width:1200px;margin:56px auto 0;padding-top:24px;
  border-top:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.footer-copy{color:var(--faint);font-size:13.5px;}
.footer-legal{display:flex;gap:24px;}
.footer-legal-link{color:var(--faint);text-decoration:none;font-size:13.5px;transition:color .2s;}
.footer-legal-link:hover{color:var(--muted);}
.footer-links li {
    list-style-type: none;
}
/* =====================================================
   Detail pages — blog-single, project-single, service-single
   ===================================================== */

/* ---------- Detail shared ---------- */
.wrap-xs{max-width:820px;margin:0 auto;}
.breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 22px;
  font-size:14px;font-weight:600;color:var(--faint);
}
.page-head-center .breadcrumb{justify-content:center;}
.breadcrumb-link{color:var(--muted-2);transition:color .2s;}
.breadcrumb-link:hover{color:var(--ink);}
.breadcrumb-sep{color:var(--faint-2);}
.breadcrumb-current{color:var(--ink-2);}
.page-head-actions{margin-top:34px;}
.byline.is-center{justify-content:center;flex-wrap:wrap;margin-top:28px;}
.btn-block{width:100%;justify-content:center;}
.cover-lg{height:460px;border-radius:24px;overflow:hidden;}
.single-post .section-cover .cover-lg{height:auto;}
.h420{height:420px;}
.overview{display:grid;grid-template-columns:0.8fr 1.2fr;gap:56px;align-items:start;}
.label-sm{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);
}
.tags{display:flex;gap:8px;flex-wrap:wrap;}
.tag{
  padding:6px 14px;border-radius:100px;font-size:13px;font-weight:600;
  color:var(--muted);background:var(--surface-2);border:1px solid rgba(15,15,25,.08);
  transition:background .2s,color .2s;
}
.previous-project {
    flex-direction: row-reverse;
}

.previous-project .next-project-copy {
    text-align: right;
}

.previous-project .arrow-btn.is-lg {
    order: 2;
}
.tag:hover{color:var(--ink);background:#EAEAF0;}
.section-cover{padding-top:0;padding-bottom:0;}
.section-article{padding-top:72px;padding-bottom:90px;}
.section-facts{padding-top:0;padding-bottom:28px;}
.section-next{padding-top:0;padding-bottom:90px;}

/* ---------- Article layout ---------- */
.article-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start;
}
.article-aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:18px;}
.aside-card{
  padding:26px;border-radius:18px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
}
.aside-title{
  margin:0 0 14px;font-family:var(--display);font-weight:600;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
}
.toc{display:flex;flex-direction:column;gap:2px;}
.toc-link{
  display:block;padding:8px 12px;border-radius:10px;font-size:14.5px;
  line-height:1.45;color:var(--muted-2) !important;transition:background .2s,color .2s;
}
a.toc-link.is-active {
    font-weight: 600;
    color: #000 !important;
}
ol.toc-list li {
    list-style-type: none;
}

ol.toc-list {
    margin: 0px;
}
.toc-link:hover{background:var(--surface-2);color:var(--ink);}
.aside-cta{
  padding:28px;border-radius:18px;
  background:linear-gradient(150deg,rgba(45,108,246,.08),rgba(122,77,240,.1));
  border:1px solid rgba(122,77,240,.25);
}
.aside-cta-title{
  margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:20px;
  line-height:1.25;color:var(--ink);
}
.aside-cta-text{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--muted);}

/* ---------- Prose ---------- */
.prose{max-width:720px;}
.prose-lead{margin:0 0 28px;font-size:21px;line-height:1.65;font-weight:500;color:var(--ink-2);}
.prose-h2, .single-post .article-content h2{
  margin:48px 0 16px;font-family:var(--display);font-weight:700;font-size:30px;
  line-height:1.2;letter-spacing:-0.015em;color:var(--ink);scroll-margin-top:100px;
}
.prose-h3, .single-post .article-content h3{margin:32px 0 12px;font-family:var(--display);font-weight:600;font-size:22px;color:var(--ink);}
.prose-p, .single-post .article-content p{margin:0 0 20px;font-size:17px;line-height:1.8;color:var(--muted);}
.prose-strong{font-weight:700;color:var(--ink);}
.prose-link, .single-post .article-content a{font-weight:600;border-bottom:1px solid rgba(45,108,246,.3);}
.prose-list, .single-post .article-content ul, .single-post .article-content ol{
  margin:0 0 24px;padding-left:22px;display:flex;flex-direction:column;gap:10px;
  font-size:17px;line-height:1.7;color:var(--muted);
}
.prose-li::marker, .single-post .article-content ul li::marker{color:#2D6CF6;font-weight:700;}
.prose-quote, .single-post .article-content blockquote{
  position:relative;margin:36px 0;padding:4px 0 4px 28px;
  font-family:var(--display);font-weight:500;font-size:24px;line-height:1.45;color:var(--ink);
}
.prose-quote::before, .single-post .article-content blockquote:before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px;
  background:linear-gradient(180deg,#FF9500,#34C7B5,#7A4DF0);
}
.single-post .article-content blockquote p{
position: relative;
    margin: 36px 0;
    padding: 4px 0 4px 28px;
    font-family: var(--display);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.45;
    color: var(--ink);
}
.prose-quote-text{margin:0;}
.prose-cite{
  display:block;margin-top:12px;font-family:var(--body);font-size:14px;
  font-weight:600;font-style:normal;color:var(--muted-2);
}
.prose-figure{margin:36px 0;}
.prose-shot{height:340px;border-radius:18px;overflow:hidden;}
.prose-caption{margin-top:12px;font-size:14px;text-align:center;color:var(--faint);}
.callout{
  display:flex;gap:16px;align-items:flex-start;margin:32px 0;padding:24px 26px;
  border-radius:16px;background:var(--surface);border:1px solid var(--line-soft);
}
.callout-title{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);}
.callout-text{margin:0;font-size:15.5px;line-height:1.65;color:var(--muted);}

/* ---------- Article footer ---------- */
.article-foot{
  margin-top:48px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.share{display:flex;align-items:center;gap:10px;}
.author-box{
  display:flex;gap:20px;align-items:flex-start;margin-top:40px;padding:30px;
  border-radius:20px;background:var(--surface);border:1px solid var(--line-soft);
}
.avatar-lg{
  flex:none;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(120deg,#FF3B30,#FFCC00,#2D6CF6);
}
.author-name{margin:4px 0 8px;font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink);}
.author-bio{margin:0;font-size:15px;line-height:1.65;color:var(--muted);}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px;}
.post-nav-link{
  display:block;padding:24px 26px;border-radius:16px;color:inherit;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-card);
  transition:border-color .25s,box-shadow .25s;
}
.post-nav-link:hover{border-color:var(--line-strong);box-shadow:var(--shadow-hover);color:inherit;}
.post-nav-link.is-next{text-align:right;}
.post-nav-title{
  display:block;margin-top:8px;font-family:var(--display);font-weight:600;
  font-size:18px;line-height:1.35;color:var(--ink);
}

/* ---------- Project facts ---------- */
.project-facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;
  border-radius:18px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
}
.fact{padding:22px 26px;border-right:1px solid var(--line-soft);}
.fact:last-child{border-right:none;}
.fact-value{display:block;margin-top:6px;font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--ink);}
.fact-link{color:#2D6CF6;}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.gallery-item{border-radius:18px;overflow:hidden;}
.gallery-item.is-wide{grid-column:1 / -1;}

/* ---------- Next project ---------- */
.next-project{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:40px 44px;border-radius:22px;color:inherit;
  background:var(--surface);border:1px solid var(--line-soft);
  transition:border-color .25s,box-shadow .25s;
}
.next-sub{margin-top:8px;}
.next-project:hover{border-color:var(--line-strong);box-shadow:var(--shadow-hover);color:inherit;}
.next-title{
  margin:8px 0 0;font-family:var(--display);font-weight:700;font-size:36px;
  letter-spacing:-0.02em;color:var(--ink); line-height:46px;
}

/* ---------- Service link (services listing) ---------- */
.svc-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:20px;
  font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);
  border-bottom:2px solid rgba(45,108,246,.35);padding-bottom:2px;transition:border-color .2s;
}
.svc-link:hover{color:var(--ink);border-color:#2D6CF6;}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px;}
.faq-item{
  border-radius:16px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-card);transition:border-color .2s;
}
.faq-item[open]{border-color:var(--line-strong);}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink);
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q::after{
  content:'+';flex:none;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid rgba(15,15,25,.1);
  font-size:18px;font-weight:500;transition:transform .2s;
}
.faq-item[open] .faq-q::after{transform:rotate(45deg);}
.faq-a{margin:0;padding:0 26px 24px;font-size:15.5px;line-height:1.7;color:var(--muted);}
.faq-a p {
    margin: 0px;
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-title{font-size:58px;}
  .page-title{font-size:48px;}
  .section-title{font-size:38px;}
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .svc-row{grid-template-columns:1fr;gap:28px;}
  .feature-post{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;gap:36px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .cta-title{font-size:38px;}
  .quote{font-size:24px;}
  .article-layout,.overview{grid-template-columns:1fr;gap:40px;}
  .article-aside{position:static;}
  .cover-lg{height:380px;}
  .h420{height:340px;}
  .project-facts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fact:nth-child(2n){border-right:none;}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line-soft);}
}
@media (max-width:760px){
  .site-header{padding:14px 20px;gap:12px;}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--white);border-bottom:1px solid var(--line);
    padding:8px 20px 16px;
  }
  .nav.is-open{display:flex;}
  .nav-link{padding:12px 0;width:100%;}
  .nav-link.is-active::after{display:none;}
  .nav-toggle{display:flex;}
  .header-cta{padding:10px 16px;font-size:13.5px;}
  .section,.hero,.page-head{padding-left:20px;padding-right:20px;}
  .hero{padding-top:72px;padding-bottom:80px;}
  .hero-title{font-size:40px;}
  .hero-sub{font-size:17px;}
  .page-title{font-size:36px;}
  .section-title{font-size:30px;}
  .section-head-center.is-narrow .section-title{font-size:30px;}
  .h2-md{font-size:30px;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;padding:32px 24px;}
  .stat-num{font-size:36px;}
  .svc-points,.form-row{grid-template-columns:1fr;}
  .svc-row,.form-card,.feature-body{padding:26px;}
  .svc-title{font-size:26px;}
  .strip{grid-template-columns:1fr;height:auto;}
  .strip-cell{height:220px;}
  .mock-canvas{height:240px;}
  .mock{margin-top:48px;}
  .cta-banner{padding:48px 24px;}
  .cta-banner.is-compact{padding-top:48px;padding-bottom:48px;}
  .cta-title,.cta-simple-title{font-size:30px;}
  .cta-banner.is-compact .cta-title{font-size:30px;}
  .cta-simple.is-wide .cta-simple-title{font-size:30px;}
  .feature-title{font-size:26px;}
  .quote{font-size:21px;}
  .footer-grid{grid-template-columns:1fr;}
  .site-footer{padding:52px 20px 28px;}
  .role{flex-direction:column;align-items:flex-start;gap:18px;}
  .newsletter{padding:36px 24px;}
  .newsletter-form{flex-direction:column;}
  .newsletter-input,.newsletter-btn{width:100%;}
  .logos-row{justify-content:center;gap:20px;}
  .logo-item{font-size:19px;}
  .cover-lg{height:240px;border-radius:18px;}
  .h420,.prose-shot{height:220px;}
  .prose-lead{font-size:18.5px;}
  .prose-h2{font-size:24px;}
  .prose-p,.prose-list{font-size:16px;}
  .prose-quote{font-size:20px;}
  .article-foot{flex-direction:column;align-items:flex-start;}
  .author-box{flex-direction:column;padding:24px;}
  .post-nav,.gallery,.project-facts{grid-template-columns:1fr;}
  .post-nav-link.is-next{text-align:left;}
  .fact{border-right:none;border-bottom:1px solid var(--line-soft);}
  .fact:last-child{border-bottom:none;}
  .next-project{padding:28px 24px;}
  .next-title{font-size:26px;}
  .faq-q{padding:18px 20px;font-size:16.5px;}
  .faq-a{padding:0 20px 20px;}
}