/* =========================================================
   WELSCON — stylesheet
   Fonts are local files in /fonts (no external font API).
   Imagery lives in /images (generated placeholder artwork —
   swap for real photography/brand assets whenever you have them).
   ========================================================= */

/* ---------- Local fonts (no Google Fonts API) ---------- */
@font-face{
  font-family:'Lora';
  src:url('../fonts/Lora-Variable.ttf') format('truetype');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Lora';
  src:url('../fonts/Lora-Italic-Variable.ttf') format('truetype');
  font-weight:400 700;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('../fonts/Poppins-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('../fonts/Poppins-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('../fonts/Poppins-Italic.ttf') format('truetype');
  font-weight:400; font-style:italic; font-display:swap;
}

/* ============ RESET ============ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }

/* ============ TOKENS ============ */
:root{
  --bg:#FAF6EF;
  --surface:#F1EAD9;
  --surface-2:#EFE1C7;
  --white:#FFFDF8;
  --ink:#241B24;
  --ink-70:rgba(36,27,36,.72);
  --ink-55:rgba(36,27,36,.55);
  --ink-38:rgba(36,27,36,.38);
  --line:rgba(36,27,36,.14);
  --line-soft:rgba(36,27,36,.08);
  --amber:#E4622D;
  --amber-dark:#C24E20;
  --amber-ink:#7A2C10;
  --amber-soft:rgba(228,98,45,.13);
  --amber-soft-2:rgba(228,98,45,.22);
  --violet:#3C3162;
  --violet-dark:#2C2449;
  --violet-soft:rgba(60,49,98,.10);
  --violet-ink:#EDE9F7;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --radius-pill:999px;
  --font-display:'Lora','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --font-body:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
  --container:1220px;
}

html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--font-display); text-wrap:balance; font-weight:700; }
em{ font-style:italic; color:var(--amber); }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber-ink);
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--amber); flex:none; }
.eyebrow.on-dark{ color:#F6C9AE; }
.eyebrow.on-dark::before{ background:#F6C9AE; }

.section{ padding:104px 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(2rem,1.4vw + 1.7rem,2.9rem); line-height:1.1; margin-top:14px; }
.section-head p{ margin-top:16px; font-size:1.06rem; color:var(--ink-70); max-width:52ch; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--radius-pill);
  font-weight:700; font-size:.95rem; white-space:nowrap;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  border:1.5px solid transparent;
  overflow:hidden; background-clip:padding-box;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:linear-gradient(120deg, var(--amber) 0%, var(--violet) 100%); background-clip:padding-box; color:var(--white); }
.btn-primary:hover{ background:linear-gradient(120deg, var(--amber-dark) 0%, var(--violet-dark) 100%); background-clip:padding-box; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost.on-dark{ color:var(--violet-ink); border-color:rgba(255,255,255,.28); }
.btn-ghost.on-dark:hover{ border-color:rgba(255,255,255,.6); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:.85rem; }

/* ============ HEADER ============ */
header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(250,246,239,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; gap:20px; }
.logo{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:900; font-size:1.4rem; letter-spacing:-.01em; }
.logo-img{ display:block; height:58px; width:auto; }
@media (max-width:640px){
  .logo-img{ height:46px; }
}
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:.94rem; font-weight:500; color:#272430; transition:color .15s; position:relative; }
.nav-links a:hover{ color:var(--amber-dark); }
.nav-actions{ display:flex; align-items:center; gap:18px; }
.nav-toggle{ display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; }
.nav-toggle:hover{ background:var(--surface); }

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:70px 16px auto 16px; background:var(--white);
    border:1px solid var(--line); border-radius:var(--radius-md);
    flex-direction:column; align-items:flex-start; gap:2px; padding:12px;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .2s ease;
  }
  .nav-links a{ padding:12px 10px; width:100%; border-radius:8px; }
  .nav-links a:hover{ background:var(--surface); }
  .nav-links.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:inline-flex; }
  .nav-actions .btn-sm-hide{ display:none; }
}

/* ============ HERO ============ */
.hero{ padding:88px 0 60px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero-copy h1{ font-size:clamp(2.5rem,3.1vw + 1.6rem,4.3rem); line-height:1.04; margin-top:18px; letter-spacing:-.01em; }
.hero-copy p.lede{ margin-top:24px; font-size:1.15rem; color:var(--ink-70); max-width:46ch; }
.hero-ctas{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-note{ margin-top:26px; display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--ink-55); }
.hero-note svg{ flex:none; }

.hero-visual{ position:relative; height:460px; }
.h-card{
  position:absolute; border-radius:var(--radius-lg); border:1.5px solid var(--line);
  background:var(--white); overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.3,1.3);
}
.h-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.h-tag{ position:absolute; bottom:10px; left:12px; z-index:2; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-55); background:rgba(255,253,248,.85); padding:4px 9px; border-radius:var(--radius-pill); border:1px solid var(--line-soft); }

.h-card--logo{ width:190px; height:190px; top:0; left:6%; transform:rotate(-7deg); z-index:2; }
.h-card--social{ width:172px; height:212px; top:8%; right:2%; transform:rotate(6deg); z-index:3; }
.h-card--web{ width:250px; height:170px; bottom:6%; left:0; transform:rotate(-4deg); z-index:4; }
.h-card--app{ width:150px; height:250px; bottom:0; right:8%; transform:rotate(5deg); z-index:1; background:var(--ink); }
.h-card--logo:hover{ transform:rotate(-11deg) scale(1.06); z-index:5; }
.h-card--social:hover{ transform:rotate(10deg) scale(1.06); z-index:5; }
.h-card--web:hover{ transform:rotate(-7deg) scale(1.06); z-index:5; }
.h-card--app:hover{ transform:rotate(9deg) scale(1.06); z-index:5; }

.hero-blob{ position:absolute; width:640px; opacity:.35; z-index:-1; }
.hero-blob--1{ top:-180px; right:-220px; fill:var(--amber-soft-2); }

/* ============ TRUST MARQUEE ============ */
.trust{ padding:44px 0 96px; }
.trust-label{ text-align:center; font-size:.82rem; color:var(--ink-55); font-weight:600; margin-bottom:26px; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:64px; width:max-content; animation:scrollx 28s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--ink-38); white-space:nowrap; }
@keyframes scrollx{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============ ABOUT + STATS ============ */
.about-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start; }
.about-copy p{ margin-top:16px; font-size:1.06rem; color:var(--ink-70); max-width:44ch; }
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.stat{ background:var(--white); padding:34px 28px; }
.stat .num{ font-family:var(--font-display); font-weight:900; font-size:2.6rem; color:var(--violet); line-height:1; font-variant-numeric:tabular-nums; }
.stat .label{ margin-top:10px; font-size:.92rem; color:var(--ink-55); font-weight:600; }

/* ============ SERVICES ============ */
.services-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--white); }
.tab-list{ display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--surface); }
.tab-btn{ text-align:left; padding:26px 26px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; }
.tab-btn:last-child{ border-bottom:0; }
.tab-btn .idx{ font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--ink-38); }
.tab-btn .ttl{ display:block; font-weight:700; font-size:1.04rem; }
.tab-btn .sub{ display:block; font-size:.85rem; color:var(--ink-55); margin-top:3px; }
.tab-btn.is-active{ background:var(--white); }
.tab-btn.is-active .idx{ color:var(--amber); }
.tab-btn.is-active .ttl{ color:var(--violet); }

.tab-panels{ padding:44px; }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }
.tab-panel h3{ font-size:1.7rem; }
.tab-panel p.desc{ margin-top:14px; color:var(--ink-70); max-width:50ch; }
.tab-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; }
.thumb-card{ aspect-ratio:1/1; border-radius:var(--radius-md); border:1px solid var(--line); position:relative; overflow:hidden; }
.thumb-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumb-label{ position:absolute; left:10px; bottom:10px; z-index:2; font-size:.7rem; font-weight:700; color:var(--white); background:rgba(36,27,36,.55); padding:3px 8px; border-radius:var(--radius-pill); }

/* ============ WORK PORTFOLIO TILES (used on the Work page) ============ */
.tile{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); transition:transform .3s ease; }
.tile:hover{ transform:scale(1.02); }
.tile .art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile .overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:18px;
  background:linear-gradient(0deg,rgba(36,27,36,.72) 0%,rgba(36,27,36,0) 55%);
  opacity:0; transition:opacity .22s ease;
}
.tile:hover .overlay, .tile:focus-within .overlay{ opacity:1; }
.tile .p-name{ color:var(--white); font-family:var(--font-display); font-weight:700; font-size:1.08rem; }
.tile .p-cat{ color:rgba(250,246,239,.75); font-size:.78rem; margin-top:2px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.tile .p-badge{ position:absolute; top:14px; left:14px; z-index:2; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:5px 10px; border-radius:var(--radius-pill); background:rgba(255,253,248,.9); color:var(--ink); }

/* ============ WORK PAGE PORTFOLIO GRID ============ */
.work-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:18px; margin-top:50px; }
.work-grid .tile{ grid-row:span 2; }
.work-grid .tile.is-wide{ grid-column:span 2; }
@media (max-width:980px){
  .work-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:210px; }
}
@media (max-width:560px){
  .work-grid{ grid-template-columns:1fr; grid-auto-rows:230px; gap:16px; }
  .work-grid .tile.is-wide{ grid-column:span 1; }
}

/* ============ PROCESS ============ */
.timeline{ max-width:760px; margin:0 auto; position:relative; }
.timeline::before{ content:""; position:absolute; left:38px; top:8px; bottom:8px; width:1px; background:var(--line); }
.t-step{ display:grid; grid-template-columns:76px 1fr; gap:24px; padding:34px 0; }
.t-step:first-child{ padding-top:0; }
.t-num{ font-family:var(--font-display); font-weight:900; font-size:2.1rem; color:var(--bg); background:var(--violet); width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:1; }
.t-step:nth-child(2n) .t-num{ background:var(--amber); }
.t-body h3{ font-size:1.3rem; padding-top:14px; }
.t-body p{ margin-top:8px; color:var(--ink-70); max-width:52ch; }

/* ============ PRICING ============ */
.price-toggle{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:52px; }
.price-toggle span{ font-weight:700; font-size:.92rem; color:var(--ink-55); }
.price-toggle span.is-active{ color:var(--ink); }
.switch{ position:relative; width:52px; height:30px; border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--line); flex:none; }
.switch::after{ content:""; position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%; background:var(--white); border:1px solid var(--line); transition:transform .2s ease; }
.switch.is-on::after{ transform:translateX(22px); background:var(--amber); border-color:var(--amber); }
.save-badge{ font-size:.72rem; font-weight:800; color:var(--amber-ink); background:var(--amber-soft); padding:3px 9px; border-radius:var(--radius-pill); }

.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.price-grid-2{ grid-template-columns:repeat(2,1fr); max-width:880px; margin:0 auto; }
.price-card{ background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:36px 32px; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; }
.price-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--line); transition:background .25s ease; }
.price-card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px rgba(36,27,36,.10); }
.price-card:hover::before{ background:var(--amber); }
.price-card h3{ font-size:1.3rem; }
.price-card .tag{ font-size:.9rem; margin-top:6px; color:var(--ink-55); min-height:42px; }
.price-card.is-premium{ border-color:rgba(60,49,98,.22); background:linear-gradient(180deg, var(--violet-ink) 0%, var(--white) 22%); box-shadow:0 16px 40px rgba(60,49,98,.10); }
.price-card.is-premium::before{ background:var(--violet); }
.price-card.is-premium:hover{ box-shadow:0 24px 50px rgba(60,49,98,.16); }
.price-card.is-premium:hover::before{ background:var(--violet); }
.price-amt{ margin-top:24px; display:flex; align-items:baseline; gap:6px; }
.price-amt .cur{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--ink-55); align-self:flex-start; margin-top:6px; }
.price-amt .num{ font-family:var(--font-display); font-weight:900; font-size:2.5rem; }
.price-amt .per{ font-size:.9rem; color:var(--ink-55); }
.price-billed{ font-size:.78rem; color:var(--ink-38); margin-top:4px; height:16px; }
.price-scope{ font-size:.78rem; font-weight:700; color:var(--amber-ink); margin-top:6px; }
.price-onetime-tag{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--violet); background:var(--violet-soft); padding:4px 11px; border-radius:var(--radius-pill); margin-top:8px; }
.price-feats{ margin-top:26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.price-feats li{ display:flex; gap:10px; font-size:.92rem; align-items:flex-start; }
.price-feats svg{ flex:none; margin-top:2px; color:var(--amber); }
.price-card.is-premium .price-feats svg{ color:var(--violet); }
.price-card .btn{ margin-top:28px; }

.price-cat-nav{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 0 48px; }
.price-cat-nav a{ padding:10px 20px; border-radius:var(--radius-pill); border:1.5px solid var(--line); font-size:.85rem; font-weight:700; color:var(--ink-70); transition:border-color .2s ease, color .2s ease, background .2s ease; }
.price-cat-nav a:hover{ border-color:var(--amber); color:var(--ink); background:var(--white); }

.price-track-head{ text-align:center; max-width:600px; margin:0 auto 34px; }
.price-track-head h3{ font-size:1.55rem; margin-top:12px; }
.price-track-head p{ margin-top:8px; font-size:.94rem; color:var(--ink-55); }
.price-track+.price-track{ margin-top:70px; padding-top:70px; border-top:1px solid var(--line); }
.eyebrow--violet::before{ background:var(--violet); }
.eyebrow--ink::before{ background:var(--ink); }

@media (max-width:900px){
  .price-grid{ grid-template-columns:1fr; }
  .price-grid-2{ max-width:520px; }
  .price-cat-nav{ margin-bottom:36px; }
}

/* ============ TOOLS ============ */
.tools-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.tool-chip{ display:flex; align-items:center; gap:10px; padding:13px 22px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--white); font-weight:700; font-size:.92rem; color:var(--ink-70); }
.tool-chip .dot{ width:9px; height:9px; border-radius:3px; }

/* ============ FAQ ============ */
.faq-list{ max-width:760px; margin:0 auto; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px; text-align:left; }
.faq-q .qt{ font-family:var(--font-display); font-weight:600; font-size:1.12rem; }
.faq-q svg{ flex:none; transition:transform .2s ease; color:var(--amber); }
.faq-item.is-open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a-in{ padding:0 4px 24px; color:var(--ink-70); max-width:62ch; }
.faq-item.is-open .faq-a{ max-height:260px; }

/* ============ FINAL CTA ============ */
.cta-band{ position:relative; overflow:hidden; background:var(--violet); border-radius:32px; margin:0 28px; padding:96px 40px; text-align:center; }
.cta-band .blob{ position:absolute; opacity:.9; }
.cta-band .blob--1{ width:420px; top:-140px; left:-120px; fill:var(--violet-dark); }
.cta-band .blob--2{ width:360px; bottom:-160px; right:-100px; fill:var(--amber); opacity:.85; }
.cta-inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.cta-band h2{ color:var(--violet-ink); font-size:clamp(2.1rem,2vw + 1.7rem,3.2rem); }
.cta-band p{ color:rgba(237,233,247,.78); margin-top:16px; font-size:1.08rem; }
.cta-band .btn{ margin-top:32px; }

/* ============ FOOTER ============ */
footer.site{ background:var(--ink); color:rgba(250,246,239,.72); margin-top:104px; padding:80px 0 32px; }
.foot-top{ display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(250,246,239,.14); }
.foot-brand .logo{ color:var(--bg); }
.foot-brand .logo-img{ height:64px; }
.foot-brand p{ margin-top:16px; font-size:.92rem; max-width:26ch; }
.foot-contact{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.foot-contact a, .foot-contact .foot-address{ display:flex; align-items:flex-start; gap:9px; font-size:.85rem; line-height:1.5; color:rgba(250,246,239,.72); max-width:30ch; }
.foot-contact a:hover{ color:var(--bg); }
.foot-contact svg{ flex:none; margin-top:3px; color:var(--amber); }
.foot-news{ margin-top:22px; display:flex; border:1px solid rgba(250,246,239,.25); border-radius:var(--radius-pill); padding:5px; max-width:280px; }
.foot-news input{ background:transparent; border:0; padding:9px 12px; flex:1; min-width:0; color:var(--bg); }
.foot-news input::placeholder{ color:rgba(250,246,239,.4); }
.foot-news button{ background:var(--amber); color:var(--white); border-radius:var(--radius-pill); padding:9px 16px; font-weight:700; font-size:.85rem; flex:none; }
.foot-col h4{ font-family:var(--font-body); color:var(--bg); font-size:.85rem; font-weight:700; margin-bottom:16px; }
.foot-col ul{ display:flex; flex-direction:column; gap:11px; }
.foot-col a{ font-size:.88rem; }
.foot-col a:hover{ color:var(--bg); }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:28px; flex-wrap:wrap; gap:16px; }
.foot-bottom p{ font-size:.82rem; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ height:380px; margin-top:20px; }
  .about-wrap{ grid-template-columns:1fr; }
  .services-wrap{ grid-template-columns:1fr; }
  .tab-list{ flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }
  .tab-btn{ border-bottom:0; border-right:1px solid var(--line); flex:none; min-width:220px; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1/-1; }
  .section{ padding:76px 0; }
  .cta-band{ margin:0 16px; padding:64px 24px; }
}
@media (max-width:560px){
  .container{ padding:0 20px; }
  .foot-top{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; }
  .price-toggle{ flex-wrap:wrap; }
}

/* ============ MODAL ============ */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(36,27,36,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:200;
}
.modal-backdrop[hidden]{ display:none; }
.modal{
  width:100%; max-width:440px; background:var(--white); border-radius:var(--radius-lg);
  border:1px solid var(--line); padding:36px 32px; position:relative; max-height:90vh; overflow-y:auto;
}
.modal-close{ position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-55); }
.modal-close:hover{ background:var(--surface); color:var(--ink); }
.modal h3{ font-size:1.5rem; padding-right:20px; }
.modal-plan{ display:inline-block; margin-top:10px; font-size:.78rem; font-weight:700; color:var(--amber-ink); background:var(--amber-soft); padding:4px 10px; border-radius:var(--radius-pill); }
.modal-sub{ margin-top:10px; color:var(--ink-55); font-size:.92rem; }
.modal-call{ margin-top:10px; font-size:.88rem; color:var(--ink-55); }
.modal-call a{ color:var(--amber-ink); font-weight:700; }
.field{ display:flex; flex-direction:column; gap:7px; margin-top:20px; }
.field label{ font-size:.82rem; font-weight:700; color:var(--ink-70); }
.field input, .field select, .field textarea{
  padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--bg);
  width:100%;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--amber); outline:none; }
.phone-row{ display:grid; grid-template-columns:132px 1fr; gap:8px; }
.modal form .btn{ margin-top:26px; }
#contactForm .btn-block{ margin-top:24px; }
.form-error{ margin-top:16px; padding:11px 14px; border-radius:var(--radius-sm); background:rgba(217,58,58,.08); border:1px solid rgba(217,58,58,.3); color:#b53030; font-size:.86rem; line-height:1.5; }
.modal-success{ text-align:center; padding:12px 0 4px; }
.modal-success .check{ width:58px; height:58px; border-radius:50%; background:var(--amber-soft); color:var(--amber); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.modal-success h3{ font-size:1.3rem; }
.modal-success p{ margin-top:10px; color:var(--ink-55); font-size:.94rem; }
.modal-success .btn{ margin-top:22px; }

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .marquee-track{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ transition-duration:.01ms !important; }
}

/* =========================================================
   OUR STORY PAGE
   ========================================================= */

/* ---- page hero ---- */
.story-hero{ padding:88px 0 40px; text-align:center; position:relative; overflow:hidden; }
.story-hero .eyebrow{ justify-content:center; }
.story-hero h1{ margin-top:16px; font-size:clamp(2.3rem,3vw + 1.5rem,3.6rem); max-width:15ch; margin-left:auto; margin-right:auto; line-height:1.08; }
.story-hero p.lede{ margin:20px auto 0; max-width:54ch; font-size:1.1rem; color:var(--ink-70); }
.stat-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:40px; }
.stat-pill{ display:flex; align-items:center; gap:10px; padding:12px 22px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--white); }
.stat-pill .num{ font-family:var(--font-display); font-weight:800; color:var(--violet); font-size:1.1rem; font-variant-numeric:tabular-nums; }
.stat-pill .lbl{ font-size:.82rem; color:var(--ink-55); font-weight:600; }

/* ---- "who we are" dark card ---- */
.who-card{ position:relative; background:var(--violet); border-radius:var(--radius-lg); border:1px solid var(--line); padding:64px 56px 84px; color:var(--violet-ink); overflow:hidden; text-align:center; }
.who-card .blob{ position:absolute; opacity:.8; }
.who-card .blob--1{ width:360px; top:-140px; left:-120px; fill:var(--violet-dark); }
.who-card .blob--2{ width:300px; bottom:-140px; right:-90px; fill:var(--amber); opacity:.5; }
.who-card-inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.who-card h2{ color:var(--violet-ink); font-size:clamp(1.8rem,1.6vw + 1.5rem,2.5rem); }
.who-card p{ margin-top:18px; color:rgba(237,233,247,.8); font-size:1.05rem; }
.who-card .btn{ margin-top:30px; }
.who-badge{
  position:absolute; left:50%; bottom:-32px; transform:translateX(-50%); z-index:2;
  width:64px; height:64px; border-radius:50%; background:var(--amber); color:var(--white);
  display:flex; align-items:center; justify-content:center; border:6px solid var(--bg);
}

/* ---- scope of work ---- */
.scope-card{ background:var(--violet); border-radius:var(--radius-lg); padding:8px 0; margin-top:56px; }
.scope-row{ display:flex; gap:20px; align-items:flex-start; padding:26px 34px; border-bottom:1px solid rgba(255,255,255,.12); }
.scope-row:last-child{ border-bottom:0; }
.scope-icon{ width:44px; height:44px; border-radius:12px; background:var(--amber); display:flex; align-items:center; justify-content:center; flex:none; color:var(--white); }
.scope-row h3{ color:var(--violet-ink); font-size:1.12rem; }
.scope-row p{ margin-top:6px; color:rgba(237,233,247,.72); font-size:.94rem; max-width:60ch; }

.callout-box{ margin-top:24px; border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:28px 30px; background:var(--surface); }
.callout-box h4{ font-family:var(--font-body); font-weight:700; font-size:1rem; }
.callout-box p{ margin-top:10px; color:var(--ink-70); font-size:.95rem; }

/* ---- keyword ticker band ---- */
.keyword-band{ background:var(--ink); padding:22px 0; }
.keyword-band .marquee-track{ align-items:center; }
.keyword-band .marquee-track span{ color:rgba(250,246,239,.55); font-family:var(--font-body); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; display:inline-flex; align-items:center; gap:34px; }
.keyword-band .marquee-track span::after{ content:"•"; color:var(--amber); }

/* ---- mission ---- */
.mission-tags{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
.mission-tag{ padding:10px 18px; border-radius:var(--radius-pill); background:var(--amber-soft); color:var(--amber-ink); font-weight:700; font-size:.82rem; }

/* ---- audience / who we work with ---- */
.audience-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:50px; }
.audience-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 24px; }
.audience-icon{ width:46px; height:46px; border-radius:12px; background:var(--violet-soft); color:var(--violet); display:flex; align-items:center; justify-content:center; }
.audience-card h3{ margin-top:18px; font-size:1.02rem; }
.audience-card p{ margin-top:8px; font-size:.9rem; color:var(--ink-70); }

/* ---- why choose us ---- */
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:50px; }
.why-grid-3{ grid-template-columns:repeat(3,1fr); }
.why-card{ display:flex; gap:18px; padding:28px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.why-icon{ width:46px; height:46px; border-radius:12px; background:var(--amber); color:var(--white); display:flex; align-items:center; justify-content:center; flex:none; }
.why-card h3{ font-size:1.05rem; }
.why-card p{ margin-top:6px; font-size:.9rem; color:var(--ink-70); }

/* ---- founder spotlight ---- */
.founder-spot{ display:grid; grid-template-columns:440px 1fr; gap:48px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:48px; margin-top:50px; }
.founder-id{ text-align:left; }
.founder-avatar{ width:100%; aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden; box-shadow:0 16px 34px rgba(60,49,98,.24); background:linear-gradient(135deg, var(--amber) 0%, var(--violet) 100%); }
.founder-avatar img{ display:block; width:100%; height:100%; object-fit:cover; }
.founder-id-text{ margin-top:18px; }
.founder-id h3{ font-size:1.2rem; }
.founder-role{ display:block; margin-top:4px; font-size:.84rem; font-weight:700; color:var(--amber-ink); }
.founder-quote{ font-family:var(--font-display); font-weight:600; font-size:1.28rem; line-height:1.5; color:var(--ink); font-style:italic; border-left:3px solid var(--amber); padding-left:22px; }
.founder-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:32px; padding-top:30px; border-top:1px solid var(--line); }
.founder-detail h4{ font-size:.95rem; font-weight:800; color:var(--violet); }
.founder-detail p{ margin-top:10px; font-size:.92rem; line-height:1.65; color:var(--ink-70); }

@media (max-width:900px){
  .audience-grid{ grid-template-columns:1fr 1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .who-card{ padding:48px 28px 76px; }
  .founder-spot{ grid-template-columns:1fr; padding:36px 30px; }
  .founder-id{ text-align:left; }
  .founder-avatar{ width:100%; aspect-ratio:4/3; }
}
@media (max-width:560px){
  .audience-grid{ grid-template-columns:1fr; }
  .scope-row{ flex-direction:column; padding:24px; }
  .founder-spot{ padding:30px 22px; }
  .founder-detail-grid{ grid-template-columns:1fr; gap:24px; }
}

/* =========================================================
   FUN / DELIGHT TOUCHES
   ========================================================= */

/* ---- confetti burst (modal success) ---- */
.confetti-burst{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; z-index:5; }
.confetti-piece{
  position:absolute; top:-12px; width:7px; height:13px; border-radius:2px; opacity:.95;
  animation-name:confetti-fall; animation-timing-function:cubic-bezier(.15,.6,.35,1); animation-fill-mode:forwards;
}
@keyframes confetti-fall{
  to{ transform:translateY(260px) rotate(var(--rot,180deg)); opacity:0; }
}
.modal-success .check{ animation:check-pop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes check-pop{
  0%{ transform:scale(0); opacity:0; }
  60%{ transform:scale(1.12); opacity:1; }
  100%{ transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .modal-success .check{ animation:none; }
  .h-card, .tile, .btn{ transition:none; }
}

/* =========================================================
   PRICING PAGE — comparison table
   ========================================================= */
.compare-wrap{ margin-top:52px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--white); -webkit-overflow-scrolling:touch; }
.compare-table{ width:100%; min-width:680px; border-collapse:collapse; }
.compare-table th, .compare-table td{ padding:18px 22px; text-align:center; border-bottom:1px solid var(--line-soft); font-size:.92rem; color:var(--ink-70); }
.compare-table th:first-child, .compare-table td:first-child{ text-align:left; font-weight:600; color:var(--ink); }
.compare-table thead th{ font-family:var(--font-display); font-size:1.08rem; font-weight:700; color:var(--ink); padding-top:26px; border-bottom:1.5px solid var(--line); white-space:nowrap; }
.compare-table tbody tr:nth-child(even){ background:var(--surface); }
.compare-table .yes{ color:var(--amber-dark); font-weight:800; font-size:1.05rem; }
.compare-table .no{ color:var(--ink-38); }
.compare-table tbody tr:last-child td{ border-bottom:0; }
@media (max-width:640px){
  .compare-table th, .compare-table td{ padding:14px 16px; font-size:.85rem; }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.contact-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 28px; }
.contact-card .c-icon{ width:46px; height:46px; border-radius:12px; background:var(--amber-soft); color:var(--amber-ink); display:flex; align-items:center; justify-content:center; }
.contact-card h3{ margin-top:18px; font-size:1.05rem; }
.contact-card p{ margin-top:8px; font-size:.9rem; color:var(--ink-70); }
.c-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-weight:700; font-size:.9rem;
  color:var(--amber-ink); background:none; border:0; padding:0; font-family:inherit; cursor:pointer;
}
.c-link:hover{ text-decoration:underline; }

.contact-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:stretch; }
.contact-form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:44px 40px; }
.contact-form-card h3{ font-size:1.5rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.contact-side{ position:relative; background:var(--violet); border-radius:var(--radius-lg); padding:40px 34px; color:var(--violet-ink); overflow:hidden; }
.contact-side .blob{ position:absolute; opacity:.8; }
.contact-side .blob--1{ width:280px; top:-110px; right:-100px; fill:var(--violet-dark); }
.contact-side .blob--2{ width:240px; bottom:-120px; left:-90px; fill:var(--amber); opacity:.45; }
.side-item{ display:flex; gap:14px; margin-top:26px; position:relative; z-index:1; }
.side-item .s-icon{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.12); color:var(--violet-ink); display:flex; align-items:center; justify-content:center; flex:none; }
.side-item h4{ font-size:.94rem; color:var(--violet-ink); font-family:var(--font-body); font-weight:700; }
.side-item p{ margin-top:4px; font-size:.86rem; color:rgba(237,233,247,.72); }

@media (max-width:1100px){
  .contact-cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-cards{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .form-row{ grid-template-columns:1fr; }
  .contact-form-card{ padding:32px 24px; }
}

/* =========================================================
   OUR FOUNDERS — origin story card
   ========================================================= */
.origin-card{
  position:relative; background:var(--ink); border-radius:var(--radius-lg);
  padding:64px 56px 108px; color:var(--violet-ink);
}
.origin-texture{
  position:absolute; top:0; left:0; width:340px; height:340px; pointer-events:none;
  border-top-left-radius:var(--radius-lg);
  background-image:
    repeating-linear-gradient(0deg, rgba(237,233,247,.14) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(237,233,247,.14) 0 1px, transparent 1px 34px);
  -webkit-mask-image:radial-gradient(circle at 0 0, #000 0%, transparent 72%);
  mask-image:radial-gradient(circle at 0 0, #000 0%, transparent 72%);
}
.origin-head{ position:relative; z-index:1; max-width:640px; text-align:center; margin:0 auto; }
.origin-head h2{ margin-top:14px; color:var(--violet-ink); font-size:clamp(1.8rem,1.6vw + 1.5rem,2.6rem); }
.origin-head p{ margin-top:14px; color:rgba(237,233,247,.75); font-size:1.02rem; }
.origin-cols{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:52px; }
.origin-col p{ color:rgba(237,233,247,.8); font-size:.98rem; line-height:1.7; }
.origin-col p + p{ margin-top:16px; }
.origin-col .btn{ margin-top:26px; }
.origin-eyebrow-row{ display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.origin-label{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:var(--violet-ink); }
.origin-tag{
  display:inline-block; font-family:var(--font-display); font-weight:800; font-size:1.2rem;
  color:#fff; padding:3px 14px; border-radius:8px; transform:rotate(-2deg);
  background:linear-gradient(120deg, var(--amber) 0%, var(--violet) 100%);
}

.founder-badge{
  position:absolute; left:50%; bottom:-58px; transform:translateX(-50%); z-index:2;
  filter:drop-shadow(0 12px 26px rgba(228,98,45,.35));
}
.founder-badge svg{ display:block; animation:badge-spin 24s linear infinite; transform-origin:50% 50%; }
@keyframes badge-spin{ to{ transform:rotate(360deg); } }

@media (max-width:900px){
  .origin-cols{ grid-template-columns:1fr; gap:36px; }
  .origin-card{ padding:48px 32px 96px; }
}
@media (max-width:560px){
  .origin-card{ padding:40px 24px 88px; }
  .founder-badge{ bottom:-46px; }
  .founder-badge svg{ width:134px; height:134px; }
}
@media (prefers-reduced-motion: reduce){
  .founder-badge svg{ animation:none; }
}

/* =========================================================
   HOMEPAGE — services showcase marquee, gallery carousel,
   all-plans-include, tools marquee
   ========================================================= */
.showcase-track{ gap:20px; }
.showcase-track img{
  height:200px; width:auto; flex:none; border-radius:var(--radius-md);
  box-shadow:0 12px 26px rgba(36,27,36,.14);
}
@media (max-width:640px){
  .showcase-track img{ height:140px; }
}

.tools-track{ gap:16px; }

/* ---- Recent work carousel ---- */
.gallery-carousel{ position:relative; }
.gallery-viewport{ overflow:hidden; }
.gallery-track{ display:flex; gap:20px; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.gallery-slide{ position:relative; flex:0 0 calc(25% - 15px); border-radius:var(--radius-md); overflow:hidden; }
.gallery-slide img{ width:100%; height:280px; object-fit:cover; display:block; }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; padding:20px 20px;
  background:linear-gradient(to top, rgba(36,27,36,.88), transparent);
}
.gallery-caption .p-badge{
  position:static; display:inline-block; font-size:.64rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:4px 9px; border-radius:var(--radius-pill);
  background:rgba(255,253,248,.92); color:var(--ink); margin-bottom:8px;
}
.gallery-caption .p-name{ color:var(--white); font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.gallery-caption .p-cat{ color:rgba(250,246,239,.75); font-size:.78rem; margin-top:3px; font-weight:600; }
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  background:var(--white); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--ink); box-shadow:0 8px 20px rgba(36,27,36,.15); z-index:2;
}
.gallery-nav:hover{ background:var(--amber); color:var(--white); border-color:var(--amber); }
.gallery-nav.prev{ left:-24px; }
.gallery-nav.next{ right:-24px; }
.gallery-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
.gallery-dots .dot{ width:9px; height:9px; border-radius:50%; background:var(--line); border:0; padding:0; }
.gallery-dots .dot.is-active{ background:var(--amber); width:22px; border-radius:5px; transition:width .2s ease; }
.gallery-note{ margin-top:24px; font-size:.82rem; line-height:1.6; color:var(--ink-38); text-align:center; max-width:640px; margin-left:auto; margin-right:auto; }
@media (max-width:1023px){
  .gallery-slide{ flex:0 0 calc(50% - 10px); }
}
@media (max-width:900px){
  .gallery-nav.prev{ left:8px; }
  .gallery-nav.next{ right:8px; }
}
@media (max-width:640px){
  .gallery-slide{ flex:0 0 100%; }
  .gallery-slide img{ height:340px; }
  .gallery-caption{ padding:22px 20px; }
}

/* ---- Tools & integrations: dual opposite-scrolling marquee ---- */
.tools-section{ position:relative; overflow:hidden; padding-bottom:64px; }
.tools-section::before,
.tools-section::after{
  content:''; position:absolute; width:340px; height:340px; border-radius:50%;
  filter:blur(90px); opacity:.5; z-index:0; pointer-events:none;
}
.tools-section::before{ background:var(--amber-soft-2); top:-80px; left:-80px; }
.tools-section::after{ background:var(--violet-soft); bottom:-100px; right:-60px; }
.tools-section .container{ position:relative; z-index:1; }
.tools-dual{ display:flex; flex-direction:column; gap:16px; margin-top:8px; }
.marquee-reverse .marquee-track{ animation-direction:reverse; }
.tool-card{
  display:flex; align-items:center; gap:12px; padding:9px 22px 9px 9px;
  border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--white);
  font-weight:700; font-size:.92rem; color:var(--ink-70); white-space:nowrap;
  box-shadow:0 6px 16px rgba(36,27,36,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tool-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(36,27,36,.14); border-color:var(--line-soft,var(--line)); }
.tool-icon{
  width:34px; height:34px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:.76rem; letter-spacing:.01em;
}
@media (max-width:640px){
  .tools-section::before, .tools-section::after{ width:220px; height:220px; }
}

/* ---- All plans include ---- */
.plans-include{
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-lg);
  padding:36px 40px; text-align:center;
}
.plans-include h3{ font-family:var(--font-display); font-size:1.3rem; font-weight:800; }
.plans-include-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 30px; margin-top:22px; }
.pi-item{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:var(--ink-70); }
.pi-item svg{ flex:none; color:var(--amber); }
@media (max-width:640px){
  .plans-include{ padding:28px 22px; }
}

/* =========================================================
   SERVICES PAGE
   ========================================================= */
.svc-hero{ position:relative; }
.svc-hero .hero-blob--1{ right:-480px; top:-160px; }
.svc-hero-icon{
  position:absolute; top:18px; right:2%; color:var(--amber);
  opacity:.5; transform:rotate(8deg);
}
@media (max-width:1100px){
  .svc-hero .hero-blob--1{ right:-360px; }
}
@media (max-width:760px){
  .svc-hero-icon{ display:none; }
  .svc-hero .hero-blob--1{ right:-260px; width:480px; }
}

/* ---- Service feature sections (image + copy, alternating) ---- */
.svc-feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.svc-feature-grid.is-reverse .svc-feature-media{ order:2; }
.svc-feature-grid.is-reverse .svc-feature-copy{ order:1; }
.svc-feature-media{ position:relative; }
.svc-feature-media::before{
  content:''; position:absolute; inset:-30px; z-index:0; border-radius:var(--radius-lg);
  background:var(--accent, var(--amber-soft-2)); filter:blur(60px); opacity:.75; pointer-events:none;
}
.svc-feature-num{
  position:absolute; top:-14px; left:26px; z-index:2;
  font-family:var(--font-display); font-weight:800; font-size:.85rem; color:var(--white);
  background:linear-gradient(120deg, var(--amber) 0%, var(--violet) 100%);
  padding:7px 15px; border-radius:var(--radius-pill); box-shadow:0 10px 22px rgba(36,27,36,.24);
}
.svc-feature-frame{
  position:relative; z-index:1; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 24px 54px rgba(36,27,36,.16); border:1px solid var(--line-soft);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.svc-feature-media:hover .svc-feature-frame{ transform:translateY(-8px) rotate(-.5deg); box-shadow:0 32px 64px rgba(36,27,36,.22); }
.svc-feature-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.svc-feature-copy h2{ font-size:clamp(1.8rem,1.3vw + 1.6rem,2.4rem); margin-top:12px; }
.svc-feature-copy p{ margin-top:18px; font-size:1.03rem; color:var(--ink-70); max-width:48ch; line-height:1.75; }
.svc-feature-copy .btn{ margin-top:30px; }
@media (max-width:860px){
  .svc-feature-grid{ grid-template-columns:1fr; gap:52px; }
  .svc-feature-media, .svc-feature-grid.is-reverse .svc-feature-media,
  .svc-feature-copy, .svc-feature-grid.is-reverse .svc-feature-copy{ order:0; }
}

/* ---- Textured CTA band ---- */
.svc-cta{
  position:relative; background:var(--ink); border-radius:var(--radius-lg); overflow:hidden;
  padding:76px 40px; text-align:center; color:var(--violet-ink);
}
.svc-cta-texture{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(237,233,247,.10) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(237,233,247,.10) 0 1px, transparent 1px 36px);
  -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 75%);
  mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 75%);
}
.svc-cta-inner{ position:relative; z-index:1; max-width:620px; margin:0 auto; }
.svc-cta h2{ color:var(--violet-ink); font-size:clamp(1.8rem,1.6vw + 1.5rem,2.6rem); margin-top:14px; }
.svc-cta p{ margin-top:14px; color:rgba(237,233,247,.75); font-size:1.02rem; }
.svc-cta .hero-ctas{ justify-content:center; margin-top:28px; }
@media (max-width:640px){
  .svc-cta{ padding:56px 26px; }
}

/* =========================================================
   LEGAL PAGES (Privacy / Terms / Refund)
   ========================================================= */
.legal-content{ max-width:760px; margin:0 auto; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:52px 56px; }
.legal-content h2{ font-size:1.25rem; margin-top:38px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ margin-top:14px; font-size:.96rem; line-height:1.75; color:var(--ink-70); }
.legal-content p strong{ color:var(--ink); }
.legal-content ul{ margin-top:14px; padding-left:22px; list-style:disc; }
.legal-content ul li{ margin-top:10px; font-size:.96rem; line-height:1.75; color:var(--ink-70); }
.legal-content ul li:first-child{ margin-top:0; }
.legal-content ul li strong{ color:var(--ink); }
.legal-note{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line); font-size:.88rem; color:var(--ink-55); }
.legal-note a{ color:var(--amber-ink); font-weight:700; }
@media (max-width:640px){
  .legal-content{ padding:36px 26px; }
}