/* =====================================================================
   buildmesite.online — styled with The Sales Page System tokens
   Layers: 1) foundation tokens  2) semantic aliases  3) components
   ===================================================================== */

:root{
  /* 1. Foundation tokens (from design file) */
  --font-family-primary:"Inter";
  --font-family-stack:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-size-base:18px;
  --font-weight-base:400;
  --line-height-base:1.6;               /* 28.8px at 18px */

  --color-text-primary:#d9d6cf;         /* body copy */
  --color-text-secondary:#f5f3ee;       /* headings, emphasis */
  --color-text-tertiary:#121019;        /* text on accent surfaces */
  --color-text-inverse:#a4a2ae;         /* muted / supporting copy */
  --color-surface-base:#000000;
  --color-surface-strong:#07080f;
  --color-surface-raised:#d7ff3a;       /* accent / raised actions */
  --color-border-strong:#ffffff;

  --radius-xs:14px;--radius-sm:16px;--radius-md:18px;--radius-lg:20px;--radius-xl:99px;

  --shadow-1:rgb(143,174,14) 0 6px 0 0,rgba(215,255,58,.45) 0 24px 44px -16px;  /* primary action */
  --shadow-2:rgba(0,0,0,.4) 0 18px 40px -30px;                                   /* raised card */
  --shadow-3:rgb(143,174,14) 0 4px 0 0;                                          /* pressed action */
  --motion-duration-instant:150ms;

  /* Extensions (documented in DESIGN.md) */
  --color-feedback-error:#ff8a8a;
  --color-border-subtle:color-mix(in srgb,var(--color-border-strong) 16%,transparent);
  --color-border-medium:color-mix(in srgb,var(--color-border-strong) 38%,transparent);
  --color-accent-tint:color-mix(in srgb,var(--color-surface-raised) 12%,transparent);

  --fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-base:18px;--fs-lg:20px;--fs-xl:24px;--fs-2xl:32px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;

  /* 2. Semantic aliases (components use only these) */
  --text-body:var(--color-text-primary);
  --text-heading:var(--color-text-secondary);
  --text-muted:var(--color-text-inverse);
  --text-on-accent:var(--color-text-tertiary);
  --text-accent:var(--color-surface-raised);
  --bg-page:var(--color-surface-base);
  --bg-section-alt:var(--color-surface-strong);
  --bg-accent:var(--color-surface-raised);
  --card-bg:var(--color-surface-strong);          /* flips inside alt sections */
  --line:var(--color-border-subtle);
  --focus-ring:var(--color-text-secondary);
  --ease:var(--motion-duration-instant) ease;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-family-stack);font-size:var(--font-size-base);font-weight:var(--font-weight-base);line-height:var(--line-height-base);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
h1,h2,h3{font-family:var(--font-family-stack);color:var(--text-heading);margin:0;letter-spacing:-.035em;line-height:1.1;font-weight:700}
p{margin:0}
.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
section[id]{scroll-margin-top:120px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.on-accent{--focus-ring:var(--color-text-tertiary)}
.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;background:var(--bg-accent);color:var(--text-on-accent);padding:var(--space-3) var(--space-5);border-radius:var(--radius-xl);font-weight:700;--focus-ring:var(--color-text-tertiary)}
.skip-link:focus{top:var(--space-4)}

/* ---------- Buttons: default · hover · focus-visible · active · disabled · loading · error ---------- */
.button{--spinner:var(--color-text-tertiary);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-5);border:2px solid transparent;border-radius:var(--radius-xl);font-weight:700;font-size:var(--fs-md);line-height:1.2;cursor:pointer;transition:transform var(--ease),background var(--ease),box-shadow var(--ease),border-color var(--ease)}
.button-primary{background:var(--bg-accent);color:var(--text-on-accent);box-shadow:var(--shadow-1)}
.button-primary:hover{background:color-mix(in srgb,var(--bg-accent) 86%,var(--color-border-strong));transform:translateY(-1px)}
.button-primary:active{transform:translateY(2px);box-shadow:var(--shadow-3)}
.button-secondary{--spinner:var(--color-text-secondary);background:transparent;color:var(--text-heading);border-color:var(--color-border-strong)}
.button-secondary:hover{background:var(--color-accent-tint)}
.button-secondary:active{transform:translateY(1px)}
.button:disabled,.button[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.button[aria-busy="true"]{color:transparent;pointer-events:none}
.button[aria-busy="true"]::after{content:"";position:absolute;width:20px;height:20px;border:3px solid var(--spinner);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.button.is-error{border-color:var(--color-feedback-error);color:var(--color-feedback-error)}
.button.full{width:100%}
@keyframes spin{to{transform:rotate(360deg)}}
.header-cta{min-height:44px;font-size:var(--fs-sm);box-shadow:var(--shadow-3)}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg-page) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.promo-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:var(--bg-accent);color:var(--text-on-accent);font-size:var(--fs-sm);line-height:1.3;padding:10px var(--space-4);text-align:center;transition:background var(--ease)}
.promo-bar:hover{background:color-mix(in srgb,var(--bg-accent) 86%,var(--color-border-strong))}
.promo-arrow{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--text-on-accent);flex:none;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-text-tertiary) 45%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
.nav-wrap{height:72px;display:flex;align-items:center;gap:var(--space-6)}
.brand{font-size:22px;font-weight:800;letter-spacing:-.04em;color:var(--text-heading)}
.brand span{color:var(--text-accent)}
.desktop-nav{display:flex;gap:var(--space-5);margin-left:auto}
.desktop-nav a{font-size:var(--fs-sm);font-weight:500;color:var(--text-muted);padding:var(--space-2) var(--space-1);transition:color var(--ease)}
.desktop-nav a:hover{color:var(--text-heading);text-decoration:underline;text-decoration-color:var(--text-accent);text-underline-offset:6px}
.menu-btn,.mobile-nav{display:none}

/* ---------- Hero ---------- */
.hero{padding:var(--space-9) 0 0;background:radial-gradient(60% 55% at 88% 8%,var(--color-accent-tint),transparent 70%),var(--bg-page)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:var(--space-8);align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--bg-section-alt);color:var(--text-body);border-radius:var(--radius-xl);padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--space-5)}
.hero-badge .pulse-dot{background:var(--text-accent);animation-name:pulseLime}
@keyframes pulseLime{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-surface-raised) 55%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
.hero h1{font-size:clamp(40px,5.6vw,80px);line-height:1.04;font-weight:800;letter-spacing:-.045em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--text-accent)}
.hero-lead{font-size:var(--fs-lg);max-width:640px;margin-top:var(--space-5);color:var(--text-body)}
.hero-actions{display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-6);flex-wrap:wrap}
.text-link{font-weight:600;color:var(--text-heading);text-decoration:underline;text-decoration-color:var(--text-accent);text-decoration-thickness:2px;text-underline-offset:6px;transition:color var(--ease)}
.text-link:hover{color:var(--text-accent)}
.text-link span{margin-left:4px}
.microcopy{color:var(--text-muted);font-size:var(--fs-sm);margin-top:var(--space-4)}
.service-line{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--space-8)}
.service-line span{flex:1;padding:var(--space-4) var(--space-3);text-align:center;font-size:var(--fs-sm);font-weight:500;color:var(--text-muted);border-right:1px solid var(--line)}
.service-line span:last-child{border-right:0}

.deal-card{position:relative;background:var(--bg-section-alt);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:rgba(215,255,58,.45) 0 24px 44px -26px,var(--shadow-2);overflow:hidden}
.deal-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--bg-accent)}
.deal-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);font-size:var(--fs-sm);color:var(--text-muted)}
.deal-top b{background:var(--bg-accent);color:var(--text-on-accent);border-radius:var(--radius-xl);padding:var(--space-1) var(--space-3);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase}
.deal-price{font-weight:800;font-size:68px;letter-spacing:-.05em;line-height:1;margin:var(--space-5) 0;color:var(--text-heading)}
.deal-price span{font-size:20px;letter-spacing:0;margin-right:6px;color:var(--text-muted);vertical-align:top;position:relative;top:8px;font-weight:600}
.deal-card ul{list-style:none;margin:0 0 var(--space-5);padding:0;border-top:1px solid var(--line)}
.deal-card li{padding:var(--space-3) 0;border-bottom:1px solid var(--line);color:var(--text-body);font-size:var(--fs-md);display:flex;gap:var(--space-3);align-items:center}
.deal-card li:before{content:"✓";color:var(--text-accent);font-weight:800}
.deal-card>a{font-weight:700;color:var(--text-heading);text-decoration:underline;text-decoration-color:var(--text-accent);text-decoration-thickness:2px;text-underline-offset:6px}
.deal-card>a:hover{color:var(--text-accent)}

/* ---------- Sections ---------- */
.section{padding:var(--space-9) 0}
.section-strong{background:var(--bg-section-alt);--card-bg:var(--bg-page)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-xs);font-weight:700;color:var(--text-accent);margin-bottom:var(--space-4)}
.section-heading{margin-bottom:var(--space-7);display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-8);align-items:end}
.section-heading .eyebrow{grid-column:1/-1}
.section-heading h2{font-size:clamp(32px,4.2vw,56px);line-height:1.08;max-width:720px;text-wrap:balance;font-weight:800;letter-spacing:-.04em}
.section-heading p{color:var(--text-body);max-width:520px}
.section-heading.narrow{display:block;max-width:820px}

/* ---------- Package ---------- */
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);align-items:stretch}
.package-col{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6) 28px;transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease)}
.package-col:hover{transform:translateY(-4px);border-color:var(--color-border-medium);box-shadow:var(--shadow-2)}
.package-head{display:flex;align-items:baseline;gap:var(--space-3);padding-bottom:var(--space-4);border-bottom:1px solid var(--line);margin-bottom:var(--space-1)}
.package-head span{font-size:var(--fs-sm);font-weight:700;color:var(--text-accent)}
.package-head h3{font-size:var(--fs-xl)}
.tick-list{list-style:none;margin:0;padding:0}
.tick-list li{position:relative;padding:var(--space-4) 0 var(--space-4) 38px;border-bottom:1px solid var(--line);color:var(--text-body);font-size:var(--fs-md);line-height:1.5}
.tick-list li:last-child{border-bottom:0}
.tick-list li:before{content:"✓";position:absolute;left:0;top:var(--space-4);width:24px;height:24px;border-radius:50%;background:var(--color-accent-tint);color:var(--text-accent);font-size:var(--fs-xs);font-weight:800;display:grid;place-items:center}
.tick-list strong{display:block;color:var(--text-heading);font-size:var(--fs-base);font-weight:700;letter-spacing:-.02em;margin-bottom:2px}
.package-featured{background:var(--bg-accent);border-color:var(--bg-accent);color:var(--text-on-accent);box-shadow:var(--shadow-1);--focus-ring:var(--color-text-tertiary)}
.package-featured:hover{border-color:var(--bg-accent)}
.package-featured .package-head,.package-featured .tick-list li{border-color:color-mix(in srgb,var(--color-text-tertiary) 22%,transparent)}
.package-featured .package-head h3,.package-featured .package-head span,.package-featured .tick-list strong,.package-featured .tick-list li{color:var(--text-on-accent)}
.package-featured .tick-list li:before{background:var(--text-on-accent);color:var(--bg-accent)}
.scope-note{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-6);margin-top:var(--space-5);padding:var(--space-5) var(--space-6);border:1px dashed var(--color-border-medium);border-radius:var(--radius-md);font-size:var(--fs-md);color:var(--text-muted)}
.scope-note strong{color:var(--text-heading)}

/* ---------- Work carousel ---------- */
.project-carousel{--gap:24px;--view-h:540px;position:relative}
.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-5)}
.carousel-progress{position:relative;flex:1;max-width:280px;height:3px;background:var(--line);border-radius:var(--radius-xl);overflow:hidden}
.carousel-progress span{position:absolute;inset:0 auto 0 0;width:50%;background:var(--bg-accent);border-radius:var(--radius-xl);transition:transform .35s ease,width .35s ease}
.carousel-arrows{display:flex;gap:var(--space-2)}
.carousel-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--color-border-strong);background:transparent;color:var(--text-heading);font-size:var(--fs-lg);cursor:pointer;display:grid;place-items:center;transition:background var(--ease),color var(--ease),transform var(--ease)}
.carousel-arrow:hover{background:var(--bg-accent);color:var(--text-on-accent);border-color:var(--bg-accent)}
.carousel-arrow:active{transform:scale(.94)}
.carousel-pause{font-size:var(--fs-xs);letter-spacing:-.1em}
.carousel-track{position:relative;display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:6px 6px 8px;margin:-6px -6px 0;cursor:grab;-webkit-user-select:none;user-select:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.carousel-track.is-dragging .project-card{pointer-events:none}
.project-card{flex:0 0 calc((100% - var(--gap)) / 2);scroll-snap-align:start;min-width:0}
.project-frame{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card-bg);overflow:hidden;transition:border-color var(--ease)}
.project-bar{display:flex;align-items:center;gap:6px;height:40px;padding:0 var(--space-4);border-bottom:1px solid var(--line);background:var(--bg-section-alt)}
.project-bar i{width:8px;height:8px;border-radius:50%;background:var(--color-border-medium)}
.project-bar span{margin-left:10px;font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-viewport{position:relative;height:var(--view-h);overflow:hidden;background:var(--bg-section-alt)}
.project-shot{display:block;width:100%;height:auto;transform:translate3d(0,0,0);transition:transform 1.6s cubic-bezier(.65,0,.35,1);will-change:transform;-webkit-user-drag:none}
.project-card.is-previewing .project-shot{transform:translate3d(0,calc(var(--shift,0px) * -1),0);transition:transform var(--dur,7s) cubic-bezier(.45,.05,.55,.95)}
@media (hover:hover) and (pointer:fine){
  .project-card:hover .project-shot{transform:translate3d(0,calc(var(--shift,0px) * -1),0);transition:transform var(--dur,7s) cubic-bezier(.45,.05,.55,.95)}
  .project-card:hover .project-frame{border-color:var(--bg-accent)}
}
/* keyboard users get the preview toggle on focus; touch users always see it */
.project-preview-toggle{display:block;position:absolute;left:50%;bottom:var(--space-4);transform:translateX(-50%);border:0;border-radius:var(--radius-xl);padding:var(--space-3) var(--space-5);min-height:44px;background:var(--bg-accent);color:var(--text-on-accent);font-size:var(--fs-sm);font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:var(--shadow-3);opacity:0;pointer-events:none;--focus-ring:var(--color-text-secondary)}
.project-preview-toggle:focus-visible{opacity:1}
@media (hover:none),(pointer:coarse){.project-preview-toggle{opacity:1;pointer-events:auto}.carousel-track{cursor:auto}}
.project-meta{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2) var(--space-4);padding:var(--space-4) var(--space-1) 0}
.project-meta h3{font-size:var(--fs-xl)}
.project-meta h3 a:hover{color:var(--text-accent)}
.project-link{color:var(--text-accent);font-size:var(--fs-md);font-weight:600;display:inline-flex;align-items:center;gap:var(--space-1);word-break:break-all}
.project-link:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Process ---------- */
.process-grid{display:grid;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.process-grid.process-4{grid-template-columns:repeat(4,1fr)}
.process-grid article{padding:var(--space-6) var(--space-5);border-right:1px solid var(--line);min-height:270px}
.process-grid article:last-child{border-right:0}
.process-grid span{font-size:var(--fs-sm);font-weight:700;color:var(--text-accent)}
.process-grid h3{font-size:var(--fs-xl);margin:var(--space-7) 0 var(--space-3)}
.process-grid p{color:var(--text-body);font-size:var(--fs-md)}
.process-final{background:var(--color-accent-tint)}
.send-strip{display:grid;grid-template-columns:200px 1fr;gap:var(--space-6);align-items:start;margin-top:var(--space-7)}
.send-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--text-muted);padding-top:var(--space-3)}
.send-chips{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.send-chips span{border:1px solid var(--line);background:var(--card-bg);color:var(--text-heading);border-radius:var(--radius-xl);padding:var(--space-2) var(--space-4);font-size:var(--fs-md)}
.timing-note{margin-top:var(--space-5);font-size:var(--fs-sm);color:var(--text-muted);max-width:760px}

/* ---------- Domain ---------- */
.domain-top{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-8);align-items:stretch}
.domain-intro h2{font-size:clamp(32px,4.2vw,56px);line-height:1.08;font-weight:800;letter-spacing:-.04em;text-wrap:balance;max-width:640px}
.domain-intro .hl{color:var(--text-accent)}
.domain-intro>p{max-width:560px;margin:var(--space-5) 0 var(--space-6)}
.address-bar{display:flex;align-items:center;gap:var(--space-4);max-width:560px;background:var(--bg-section-alt);border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-5);box-shadow:rgba(215,255,58,.45) 0 24px 44px -26px}
.ab-dot{width:12px;height:12px;border-radius:50%;background:var(--bg-accent);flex:none}
.ab-text{font-weight:700;font-size:clamp(18px,2.6vw,28px);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-heading)}
.ab-scheme{color:var(--text-muted);font-weight:500}
.ab-tld{color:var(--text-accent)}
.address-caption{display:block;margin:var(--space-3) 0 0 var(--space-5);color:var(--text-muted);font-size:var(--fs-sm)}
.domain-calc{background:var(--bg-section-alt);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;justify-content:center}
.calc-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--text-accent);margin-bottom:var(--space-3)}
.calc-row,.calc-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-5);padding:var(--space-4) 0;border-bottom:1px solid var(--line);color:var(--text-body)}
.calc-row strong{color:var(--text-heading);font-size:var(--fs-lg);text-align:right}
.calc-total{border-bottom:0;padding-top:var(--space-5);color:var(--text-heading);font-weight:600}
.calc-total strong{font-size:clamp(20px,2.1vw,26px);letter-spacing:-.03em;color:var(--text-accent);text-align:right;white-space:nowrap}
.domain-calc>p{margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--text-muted)}
.domain-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-7)}
.domain-opts article{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6) 28px;background:var(--card-bg);transition:transform var(--ease),border-color var(--ease)}
.domain-opts article:hover{transform:translateY(-4px);border-color:var(--bg-accent)}
.opt-tag{align-self:flex-start;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-accent);background:var(--color-accent-tint);border-radius:var(--radius-xl);padding:var(--space-1) var(--space-3)}
.domain-opts h3{font-size:var(--fs-xl);margin:var(--space-5) 0 var(--space-2)}
.domain-opts p{margin-bottom:var(--space-5);font-size:var(--fs-md)}
.domain-opts b,.domain-opts article>a{margin-top:auto;font-weight:700;font-size:var(--fs-md);padding-top:var(--space-4);border-top:1px solid var(--line);color:var(--text-heading)}
.domain-opts article>a:hover{color:var(--text-accent)}

/* ---------- Pricing ---------- */
.pricing-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-8);align-items:end;margin-bottom:var(--space-7)}
.pricing-intro h2{font-size:clamp(32px,4.2vw,56px);line-height:1.08;font-weight:800;letter-spacing:-.04em;text-wrap:balance}
.pricing-intro>p{max-width:520px}
.pricing-switcher{display:inline-flex;border:1px solid var(--color-border-medium);border-radius:var(--radius-xl);padding:var(--space-1);margin-bottom:var(--space-6)}
.price-tab{min-height:44px;border:0;background:transparent;padding:0 var(--space-5);border-radius:var(--radius-xl);font-weight:700;cursor:pointer;color:var(--text-muted);transition:background var(--ease),color var(--ease)}
.price-tab:hover{color:var(--text-heading)}
.price-tab.active{background:var(--bg-accent);color:var(--text-on-accent)}
.price-tab.active:focus-visible{outline-offset:2px}
.price-panel{display:none}
.price-panel.active{display:block;animation:panelIn .25s ease}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pricing-spotlight{display:grid;grid-template-columns:1.2fr .8fr;background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-2)}
.spotlight-main{padding:var(--space-7)}
.price-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-xs);color:var(--text-accent);font-weight:700}
.spotlight-price{font-weight:800;font-size:clamp(64px,8vw,104px);letter-spacing:-.06em;line-height:.9;margin:var(--space-6) 0;color:var(--text-accent)}
.spotlight-price span{font-size:.23em;letter-spacing:0;margin-right:8px;vertical-align:top;position:relative;top:11px;color:var(--text-muted);font-weight:600}
.spotlight-main h3{font-size:var(--fs-2xl);max-width:620px;line-height:1.12;text-wrap:balance}
.spotlight-main>p{max-width:600px;margin:var(--space-4) 0 var(--space-6)}
.spotlight-side{display:grid;background:var(--bg-section-alt);border-left:1px solid var(--line)}
.included-card{padding:var(--space-6);border-bottom:1px solid var(--line);transition:background var(--ease)}
.included-card:last-child{border-bottom:0}
.included-card:hover{background:var(--color-accent-tint)}
.included-card span{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--text-accent);font-weight:700}
.included-card strong{display:block;font-size:var(--fs-lg);color:var(--text-heading);margin:var(--space-2) 0;letter-spacing:-.02em}
.included-card p{color:var(--text-body);font-size:var(--fs-md)}
.inline-link{text-decoration:underline;text-decoration-color:var(--text-accent);text-underline-offset:4px;color:var(--text-heading);font-weight:600}
.inline-link:hover{color:var(--text-accent)}
.upgrade-row{display:grid;grid-template-columns:1fr auto 56px;gap:var(--space-6);align-items:center;margin-top:var(--space-4);padding:var(--space-5) var(--space-6);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card-bg);transition:border-color var(--ease),transform var(--ease)}
.upgrade-row:hover{border-color:var(--bg-accent);transform:translateY(-2px)}
.upgrade-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--text-accent);font-weight:700}
.upgrade-row h3{font-size:var(--fs-xl);margin:var(--space-2) 0}
.upgrade-row p{color:var(--text-body);max-width:670px;font-size:var(--fs-md)}
.upgrade-price{display:grid;text-align:right}
.upgrade-price span,.upgrade-price small{font-size:var(--fs-sm);color:var(--text-muted)}
.upgrade-price small:first-child{text-transform:uppercase;letter-spacing:.1em;font-size:var(--fs-xs);font-weight:600}
.upgrade-price strong{font-size:44px;letter-spacing:-.05em;line-height:1;color:var(--text-heading)}
.circle-link{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--bg-accent);color:var(--text-on-accent);font-size:var(--fs-xl);font-weight:700;box-shadow:var(--shadow-3);transition:transform var(--ease)}
.circle-link:hover{transform:rotate(45deg)}
.circle-link:active{transform:translateY(2px) rotate(45deg)}
.store-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.store-intro-card,.store-plan{border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6);background:var(--card-bg)}
.store-intro-card{background:var(--bg-accent);border-color:var(--bg-accent);color:var(--text-on-accent);--focus-ring:var(--color-text-tertiary)}
.store-intro-card .price-kicker,.store-intro-card h3,.store-intro-card p{color:var(--text-on-accent)}
.store-intro-card h3{font-size:var(--fs-2xl);margin:var(--space-5) 0 var(--space-4)}
.store-note{border-top:1px solid color-mix(in srgb,var(--color-text-tertiary) 25%,transparent);margin-top:var(--space-5);padding-top:var(--space-4);font-size:var(--fs-sm);color:var(--text-on-accent)}
.store-plan{display:flex;flex-direction:column;transition:transform var(--ease),border-color var(--ease)}
.store-plan:hover{transform:translateY(-4px);border-color:var(--color-border-medium)}
.featured-store{border-color:var(--bg-accent);box-shadow:rgba(215,255,58,.45) 0 24px 44px -26px}
.store-plan-top{display:flex;justify-content:space-between;gap:var(--space-3);align-items:start}
.store-plan-top span{font-weight:700;color:var(--text-heading)}
.store-plan-top small{color:var(--text-muted);font-size:var(--fs-sm)}
.store-plan-price{margin:var(--space-7) 0 var(--space-4);font-size:var(--fs-md);color:var(--text-muted)}
.store-plan-price strong{font-size:52px;letter-spacing:-.05em;color:var(--text-heading)}
.store-plan p{min-height:78px;font-size:var(--fs-md)}
.split-pay{display:grid;gap:6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--space-4) 0;margin:var(--space-4) 0;font-size:var(--fs-sm);color:var(--text-muted)}
.store-plan>a{font-weight:700;margin-top:auto;color:var(--text-accent);padding:var(--space-2) 0}
.store-plan>a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:980px}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:var(--space-5) 0;display:flex;justify-content:space-between;gap:var(--space-5);font-size:var(--fs-lg);font-weight:600;color:var(--text-heading);transition:color var(--ease)}
summary:hover{color:var(--text-accent)}
summary::-webkit-details-marker{display:none}
summary span{font-weight:400;color:var(--text-accent);font-size:var(--fs-xl);line-height:1;transition:transform var(--ease)}
details[open] summary span{transform:rotate(45deg)}
details p{max-width:760px;color:var(--text-body);padding:0 0 var(--space-5)}

/* ---------- CTA ---------- */
.cta-section{background:var(--bg-accent);color:var(--text-on-accent);padding:var(--space-9) 0;--focus-ring:var(--color-text-tertiary)}
.cta-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-8);align-items:center}
.cta-grid h2{font-size:clamp(34px,4.4vw,60px);line-height:1.04;font-weight:800;letter-spacing:-.045em;color:var(--text-on-accent);text-wrap:balance}
.light-eyebrow{color:var(--text-on-accent)}
.muted-heading{color:color-mix(in srgb,var(--color-text-tertiary) 68%,var(--color-surface-raised))!important;margin-top:var(--space-2)}
.start-box{background:var(--bg-page);color:var(--text-body);border-radius:var(--radius-lg);padding:var(--space-6);--focus-ring:var(--color-text-secondary)}
.start-kicker{color:var(--text-accent);text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-xs);font-weight:700;margin-bottom:var(--space-3)}
.start-box>p:not(.form-note){margin-bottom:var(--space-5)}
.contact-number{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--text-heading);margin-top:var(--space-5)}
.form-note{font-size:var(--fs-sm);margin-top:var(--space-2);color:var(--text-muted)}
.floating-whatsapp{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:60;background:var(--bg-accent);color:var(--text-on-accent);border-radius:var(--radius-xl);padding:0 var(--space-5);min-height:48px;font-size:var(--fs-sm);font-weight:700;display:flex;align-items:center;gap:var(--space-2);box-shadow:var(--shadow-1);transition:transform var(--ease),box-shadow var(--ease)}
.floating-whatsapp:hover{transform:translateY(-2px)}
.floating-whatsapp:active{transform:translateY(2px);box-shadow:var(--shadow-3)}
.wa-dot{width:8px;height:8px;border-radius:50%;background:var(--text-on-accent)}

/* ---------- Footer ---------- */
footer{padding:var(--space-8) 0 var(--space-5);background:var(--bg-page);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.7fr .65fr .8fr;gap:var(--space-8)}
.footer-brand{display:inline-block;margin-bottom:var(--space-4)}
.footer-grid p{color:var(--text-muted);max-width:420px;font-size:var(--fs-md)}
.footer-grid>div:not(:first-child){display:grid;align-content:start;gap:var(--space-1)}
.footer-grid strong{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:var(--space-3)}
.footer-grid a:not(.brand){color:var(--text-body);font-size:var(--fs-md);padding:var(--space-1) 0;width:fit-content}
.footer-grid a:not(.brand):hover,.legal-links a:hover{color:var(--text-accent)}
.footer-bottom{border-top:1px solid var(--line);margin-top:var(--space-8);padding-top:var(--space-5);display:flex;justify-content:space-between;gap:var(--space-4);color:var(--text-muted);font-size:var(--fs-sm)}
.legal-links{display:flex;gap:var(--space-5)}
.legal-links a{color:var(--text-body)}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .package-grid{grid-template-columns:1fr}
  .package-featured{order:-1}
  .process-grid.process-4{grid-template-columns:1fr 1fr}
  .process-grid article:nth-child(2n){border-right:0}
  .process-grid article{border-bottom:1px solid var(--line)}
  .send-strip{grid-template-columns:1fr;gap:var(--space-3)}
  .send-label{padding-top:0}
}
@media(max-width:900px){
  .desktop-nav,.header-cta{display:none}
  .menu-btn{display:block;margin-left:auto;min-height:44px;padding:0 var(--space-4);background:transparent;border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);font-weight:700;color:var(--text-heading);cursor:pointer}
  .menu-btn:hover{background:var(--color-accent-tint)}
  .mobile-nav{padding:var(--space-3) var(--space-5) var(--space-5);border-top:1px solid var(--line)}
  .mobile-nav a{color:var(--text-body);padding:var(--space-3) 0;font-weight:500}
  .mobile-nav a:hover{color:var(--text-accent)}
  .mobile-nav.open{display:grid;gap:var(--space-1)}
  .hero-grid,.cta-grid,.section-heading,.domain-top,.pricing-intro,.pricing-spotlight{grid-template-columns:1fr;gap:var(--space-6)}
  .section-heading{gap:var(--space-4)}
  .spotlight-side{border-left:0;border-top:1px solid var(--line)}
  .domain-opts{grid-template-columns:1fr}
  .scope-note{grid-template-columns:1fr;gap:var(--space-3)}
  .store-showcase{grid-template-columns:1fr 1fr}
  .store-intro-card{grid-column:1/-1}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
  .project-carousel{--gap:18px;--view-h:460px}
  .project-card{flex-basis:78%}
}
@media(max-width:640px){
  .wrap{width:min(100% - 32px,1180px)}
  .promo-bar{font-size:var(--fs-xs);padding:var(--space-2) var(--space-3);gap:6px}
  .promo-arrow{display:none}
  .nav-wrap{height:64px}
  .section{padding:var(--space-8) 0}
  .hero{padding-top:var(--space-7)}
  .hero h1{font-size:40px}
  .hero-lead{font-size:var(--fs-base)}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .deal-card{padding:var(--space-5)}
  .deal-price{font-size:56px}
  .service-line{flex-wrap:wrap}
  .service-line span{flex:1 1 45%;border-bottom:1px solid var(--line)}
  .process-grid.process-4{grid-template-columns:1fr}
  .process-grid article{border-right:0;min-height:0}
  .process-grid h3{margin-top:var(--space-4)}
  .package-col{padding:var(--space-5)}
  .spotlight-main{padding:var(--space-5)}
  .spotlight-price{font-size:68px}
  .pricing-switcher{width:100%}
  .price-tab{flex:1}
  .upgrade-row{grid-template-columns:1fr auto;gap:var(--space-5)}
  .upgrade-price{text-align:left}
  .circle-link{grid-column:2;grid-row:1/3}
  .store-showcase{grid-template-columns:1fr}
  .store-intro-card{grid-column:auto}
  .address-bar{padding:var(--space-3) var(--space-4)}
  .domain-calc{padding:var(--space-5)}
  .calc-row,.calc-total{flex-direction:column;gap:2px}
  .calc-row strong,.calc-total strong{text-align:left}
  .project-carousel{--gap:14px;--view-h:420px}
  .project-card{flex-basis:88%}
  .project-meta{flex-direction:column;gap:6px}
  .start-box{padding:var(--space-5)}
  .footer-grid{grid-template-columns:1fr}
  .footer-grid>div:first-child{grid-column:auto}
  .footer-bottom{display:grid}
  .floating-whatsapp{right:var(--space-3);bottom:var(--space-3);padding:0 var(--space-4)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}