/* ============================================================
   EffortlessAI — shared design system ("bone / living-marble")
   Extracted + extended from the Benda-approved hero (_hero-explore/hero.html).
   Canvas = bone #F4F0E8 · fonts Bagel Fat One / Fredoka / Heebo ·
   psychedelic palette MINUS green. Default theme = light/bone.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; min-height:100%; }

:root{
  /* LIGHT / BONE — the default for every page */
  --bg:#F4F0E8; --fg:#16111E; --muted:#5C5568; --line:rgba(22,17,30,.16);
  --chip:rgba(22,17,30,.05); --chip-line:rgba(22,17,30,.16);
  --card:#FFFFFF; --card-line:rgba(22,17,30,.10);
  --btn2-bg:rgba(255,255,255,.5); --btn2-fg:#16111E;
  --scrim:radial-gradient(120% 120% at 70% 42%, rgba(244,240,232,.94) 0%, rgba(244,240,232,.82) 34%, rgba(244,240,232,.3) 62%, rgba(244,240,232,0) 82%);
  /* psychedelic palette */
  --vi:#7E3BFF; --ma:#FF2BB1; --og:#FF8A2A; --go:#FFD23F; --bl:#3B6BFF;
  --rainbow:linear-gradient(108deg,#FF2BB1 0%,#FF6A2A 26%,#FFD23F 44%,#7E3BFF 70%,#3B6BFF 86%,#FF2BB1 100%);
  --grad-pm:linear-gradient(120deg,#7E3BFF,#FF2BB1 55%,#FF8A2A);
}
[data-theme="dark"]{
  --bg:#0E0322; --fg:#FBF5FF; --muted:#C7B6EA; --line:rgba(255,255,255,.16);
  --chip:rgba(255,255,255,.06); --chip-line:rgba(255,255,255,.22);
  --card:#170A2E; --card-line:rgba(255,255,255,.10);
  --btn2-bg:transparent; --btn2-fg:#FBF5FF;
  --scrim:radial-gradient(120% 120% at 70% 42%, rgba(14,3,34,.92) 0%, rgba(14,3,34,.78) 34%, rgba(14,3,34,.28) 62%, rgba(14,3,34,0) 82%);
}

body{
  background:var(--bg); color:var(--fg);
  font-family:'Heebo',system-ui,sans-serif; line-height:1.55;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; }

/* ---------- shared atoms ---------- */
.flow{
  background:var(--rainbow); background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:flowhue 9s linear infinite;
}
@keyframes flowhue{ to{ background-position:280% 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:999px;
  background:var(--chip); border:1px solid var(--chip-line); font-size:13px; font-weight:700; letter-spacing:.02em;
}
.eyebrow .pulse{ width:8px; height:8px; border-radius:50%; background:var(--ma); box-shadow:0 0 0 0 rgba(255,43,177,.5); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,43,177,.5);} 70%{ box-shadow:0 0 0 12px rgba(255,43,177,0);} 100%{ box-shadow:0 0 0 0 rgba(255,43,177,0);} }

.btn{ font-family:'Heebo',sans-serif; display:inline-flex; align-items:center; gap:9px; padding:15px 28px; border-radius:999px; font-weight:800; font-size:17px; text-decoration:none; cursor:pointer; border:0; transition:transform .18s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ color:#fff; background:var(--grad-pm); box-shadow:0 10px 34px rgba(255,43,177,.34); }
.btn-2{ background:var(--btn2-bg); color:var(--btn2-fg); border:1px solid var(--line); }

/* reveal on load */
.rv{ opacity:0; transform:translateY(16px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
.d1{ animation-delay:.05s } .d2{ animation-delay:.16s } .d3{ animation-delay:.28s } .d4{ animation-delay:.4s } .d5{ animation-delay:.52s }
@media (prefers-reduced-motion:reduce){ .rv{ animation:none; opacity:1; transform:none; } .flow{ animation:none; } *{ scroll-behavior:auto; } }

/* ---------- top bar (inner pages) ---------- */
.topbar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px clamp(20px,5vw,64px); background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand{ font-family:'Bagel Fat One',cursive; font-size:24px; letter-spacing:.01em; display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); }
.brand .dot{ width:13px; height:13px; border-radius:50%; background:linear-gradient(135deg,#FF2BB1,#FF8A2A); box-shadow:0 0 18px rgba(255,43,177,.6); }
.nav-links{ display:flex; gap:24px; font-size:15px; font-weight:600; color:var(--muted); }
.nav-links a{ color:inherit; text-decoration:none; transition:color .2s; }
.nav-links a:hover{ color:var(--fg); }
.nav-cta{ font-family:'Heebo',sans-serif; font-weight:800; font-size:14px; padding:10px 18px; border-radius:999px; border:1px solid var(--chip-line); background:var(--chip); color:var(--fg); cursor:pointer; text-decoration:none; }

/* ---------- generic section ---------- */
.section{ max-width:1180px; margin-inline:auto; padding:clamp(56px,8vw,104px) clamp(20px,5vw,64px); }
.section h2{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(32px,5vw,56px); line-height:1.02; letter-spacing:-.01em; margin:16px 0 0; text-wrap:balance; }
.sec-lede{ margin-top:16px; max-width:620px; font-size:clamp(16px,1.6vw,20px); color:var(--muted); }

/* ---------- service-page hero (no WebGL — gradient backdrop) ---------- */
.svc-top{ position:relative; overflow:hidden; padding:clamp(38px,6vw,76px) clamp(20px,5vw,64px) clamp(30px,4vw,52px); border-bottom:1px solid var(--line); }
.svc-top::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:
    radial-gradient(60% 70% at 88% 8%, rgba(255,43,177,.30), transparent 60%),
    radial-gradient(55% 65% at 8% 92%, rgba(126,59,255,.26), transparent 60%),
    radial-gradient(40% 50% at 60% 30%, rgba(255,138,42,.18), transparent 60%); }
.svc-top__in{ position:relative; z-index:1; max-width:1180px; margin-inline:auto; }
.crumbs{ font-size:13.5px; font-weight:600; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a{ text-decoration:none; color:var(--muted); } .crumbs a:hover{ color:var(--fg); }
.crumbs span{ opacity:.5; }
.svc-top h1{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(36px,6.4vw,76px); line-height:1.0; letter-spacing:-.01em; margin:18px 0 0; max-width:14ch; text-wrap:balance; }
.svc-top h1 .flow{ display:inline; }

/* TL;DR — the answer-first box (GEO bait) */
.tldr{ position:relative; margin:26px 0 0; max-width:680px; padding:22px 24px; border-radius:20px; background:var(--card); border:1px solid var(--card-line);
  box-shadow:0 16px 44px rgba(22,17,30,.07); font-size:clamp(16px,1.6vw,19px); line-height:1.55; }
.tldr::before{ content:""; position:absolute; inset-inline-start:0; inset-block:14px; width:5px; border-radius:999px; background:var(--rainbow); }
.tldr b{ color:var(--fg); }
.svc-meta{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; }
.pill{ padding:8px 15px; border-radius:999px; background:var(--chip); border:1px solid var(--chip-line); font-size:13.5px; font-weight:700; color:var(--muted); }
.pill.price{ color:#fff; background:var(--grad-pm); border:0; }

/* ---------- prose blocks ---------- */
.prose{ max-width:760px; }
.prose h2{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(26px,3.4vw,38px); line-height:1.08; letter-spacing:-.01em; margin:0 0 14px; }
.prose h3{ font-family:'Fredoka',sans-serif; font-weight:500; font-size:clamp(20px,2.4vw,26px); margin:26px 0 10px; }
.prose p{ margin:0 0 14px; font-size:clamp(16px,1.5vw,18px); color:var(--fg); }
.prose p.muted{ color:var(--muted); }
.prose ul{ margin:0 0 16px; padding-inline-start:0; list-style:none; }
.prose ul li{ position:relative; padding-inline-start:26px; margin:0 0 10px; font-size:clamp(15px,1.5vw,18px); }
.prose ul li::before{ content:""; position:absolute; inset-inline-start:0; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--grad-pm); }
.prose strong{ font-weight:700; }
.block{ padding-block:clamp(34px,5vw,60px); }
.block + .block{ border-top:1px solid var(--line); }

/* ---------- steps (process) ---------- */
.steps{ counter-reset:step; display:grid; gap:14px; margin:8px 0 0; max-width:780px; }
.step{ counter-increment:step; position:relative; padding:20px 22px 20px 64px; border-radius:18px; background:var(--card); border:1px solid var(--card-line); }
.step::before{ content:counter(step); position:absolute; inset-inline-start:18px; top:18px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:'Fredoka',sans-serif; font-weight:600; color:#fff; background:var(--grad-pm); }
.step h4{ font-family:'Fredoka',sans-serif; font-weight:500; font-size:1.15rem; margin:0 0 5px; }
.step p{ margin:0; color:var(--muted); font-size:.97rem; }

/* ---------- example block (honest demo / Roots) ---------- */
.example{ display:grid; gap:20px; grid-template-columns:1fr; max-width:880px; }
.example .card{ border:1px solid var(--card-line); border-radius:22px; background:var(--card); padding:26px; box-shadow:0 16px 44px rgba(22,17,30,.07); }
.example h4{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.3rem; margin:0 0 10px; }
.example p{ margin:0 0 10px; color:var(--fg); }
.result{ margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; }
.result .stat{ padding:12px 16px; border-radius:14px; background:var(--chip); border:1px solid var(--chip-line); }
.result .stat b{ display:block; font-family:'Fredoka',sans-serif; font-size:1.4rem; background:var(--rainbow); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.result .stat span{ font-size:.86rem; color:var(--muted); }
.honest-note{ margin-top:14px; font-size:13px; color:var(--muted); }

/* ---------- pricing ---------- */
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; max-width:920px; }
.tier{ border:1px solid var(--card-line); border-radius:22px; background:var(--card); padding:26px; display:flex; flex-direction:column; }
.tier.feat{ border-color:transparent; box-shadow:0 0 0 2px var(--ma), 0 18px 50px rgba(255,43,177,.18); }
.tier h4{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.25rem; margin:0; }
.tier .amt{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:2rem; margin:10px 0 4px; }
.tier .amt small{ font-size:.95rem; font-weight:500; color:var(--muted); }
.tier ul{ list-style:none; padding:0; margin:14px 0 0; }
.tier ul li{ position:relative; padding-inline-start:24px; margin:0 0 9px; font-size:.96rem; color:var(--fg); }
.tier ul li::before{ content:"✓"; position:absolute; inset-inline-start:0; color:var(--vi); font-weight:800; }
.tier .quote{ font-family:'Fredoka',sans-serif; font-weight:500; font-size:1.3rem; margin:10px 0 4px; }

/* ---------- FAQ (details/summary) ---------- */
.faq{ max-width:820px; }
.faq details{ border:1px solid var(--card-line); border-radius:16px; background:var(--card); margin:0 0 12px; overflow:hidden; }
.faq summary{ cursor:pointer; list-style:none; padding:18px 22px; font-family:'Fredoka',sans-serif; font-weight:500; font-size:1.1rem; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:'Fredoka',sans-serif; color:var(--ma); font-size:1.5rem; line-height:1; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .ans{ padding:0 22px 20px; color:var(--muted); font-size:1rem; line-height:1.6; }

/* ---------- CTA band ---------- */
.ctaband{ position:relative; overflow:hidden; margin:0; padding:clamp(48px,7vw,84px) clamp(20px,5vw,64px); text-align:center; color:#fff; background:var(--grad-pm); }
.ctaband::after{ content:""; position:absolute; inset:0; opacity:.5; background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.4), transparent 55%); pointer-events:none; }
.ctaband__in{ position:relative; z-index:1; max-width:720px; margin-inline:auto; }
.ctaband h2{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(28px,4.4vw,48px); margin:0; color:#fff; }
.ctaband p{ margin:14px auto 26px; max-width:520px; color:rgba(255,255,255,.92); font-size:clamp(16px,1.6vw,19px); }
.ctaband .btn-primary{ background:#fff; color:#16111E; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.ctaband .btn-2{ color:#fff; border-color:rgba(255,255,255,.5); }

/* ---------- footer ---------- */
.footer{ background:var(--bg); border-top:1px solid var(--line); padding:clamp(44px,6vw,72px) clamp(20px,5vw,64px) 40px; }
.footer__in{ max-width:1180px; margin-inline:auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
.footer .brand{ font-size:28px; }
.footer p{ margin:14px 0 0; color:var(--muted); max-width:34ch; font-size:.96rem; }
.footer h5{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem; margin:0 0 12px; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer ul li{ margin:0 0 9px; }
.footer ul a{ color:var(--muted); text-decoration:none; font-size:.96rem; }
.footer ul a:hover{ color:var(--fg); }
.footer .legal{ max-width:1180px; margin:34px auto 0; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- service grid (hub + homepage cross-links) ---------- */
.svcgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:36px; }
.svccard{ position:relative; border:1px solid var(--card-line); border-radius:24px; background:var(--card); padding:28px; text-decoration:none; color:var(--fg); display:flex; flex-direction:column; min-height:200px; box-shadow:0 16px 44px rgba(22,17,30,.06); transition:transform .2s ease, box-shadow .2s ease; }
.svccard:hover{ transform:translateY(-4px); box-shadow:0 24px 60px rgba(22,17,30,.12); }
.svccard .dotc{ width:12px; height:12px; border-radius:50%; background:var(--grad-pm); }
.svccard h3{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.4rem; margin:14px 0 0; }
.svccard p{ margin:9px 0 0; color:var(--muted); font-size:.97rem; flex:1; }
.svccard .go{ margin-top:16px; font-weight:800; color:var(--vi); font-size:.95rem; }

@media (max-width:760px){
  .nav-links{ display:none; }
  .footer__in{ grid-template-columns:1fr 1fr; }
  .footer .brand-col{ grid-column:1 / -1; }
}