/* Page styles for service.php — shared tokens live in ../site.css */

/* ── Keyframes ── */
@keyframes sv-rise    { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes sv-rise-sm { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes sv-fade    { from{opacity:0} to{opacity:1} }
@keyframes sv-scan    { 0%{transform:translateY(-100%)} 100%{transform:translateY(100vh)} }
@keyframes sv-grid    { from{transform:translateY(0)} to{transform:translateY(60px)} }
@keyframes sv-breathe { 0%,100%{opacity:.35;transform:scale(1)} 50%{opacity:.8;transform:scale(1.08)} }
@keyframes sv-pulse   { 0%,100%{box-shadow:0 0 0 0 rgba(191,247,71,.5)} 50%{box-shadow:0 0 0 8px rgba(191,247,71,0)} }
@keyframes sv-spin    { to{transform:rotate(360deg)} }
@keyframes sv-glitch  {
    0%,88%,100%{transform:none;opacity:0}
    89%{transform:translateX(-4px);opacity:1}
    90%{transform:translateX(3px);opacity:1}
    91%{transform:none;opacity:0}
    93%{transform:translateX(-2px);opacity:1}
    94%{transform:none;opacity:0}
}
@keyframes sv-in { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes sv-number { from{opacity:0;transform:scale(.6)} to{opacity:.06;transform:scale(1)} }

/* ── Reveal system ── */
.sv-reveal      { opacity:0; transform:translateY(14px); transition:opacity var(--dur-reveal) var(--ease-expo),transform var(--dur-reveal) var(--ease-expo); }
.sv-reveal.on   { opacity:1; transform:none; }
.sv-reveal-r    { opacity:0; transform:translateX(14px); transition:opacity var(--dur-reveal) var(--ease-expo),transform var(--dur-reveal) var(--ease-expo); }
.sv-reveal-r.on { opacity:1; transform:none; }
.sv-stagger > * { opacity:0; transform:translateY(20px); }
.sv-stagger.on > * { animation:sv-rise-sm .6s .54s var(--ease-expo) forwards; }
.sv-stagger.on > *:nth-child(1){ animation:sv-rise-sm .7s 0s   var(--ease-expo) forwards; }
.sv-stagger.on > *:nth-child(2){ animation:sv-rise-sm .7s .09s var(--ease-expo) forwards; }
.sv-stagger.on > *:nth-child(3){ animation:sv-rise-sm .7s .18s var(--ease-expo) forwards; }
.sv-stagger.on > *:nth-child(4){ animation:sv-rise-sm .7s .27s var(--ease-expo) forwards; }
.sv-stagger.on > *:nth-child(5){ animation:sv-rise-sm .7s .36s var(--ease-expo) forwards; }
.sv-stagger.on > *:nth-child(6){ animation:sv-rise-sm .7s .45s var(--ease-expo) forwards; }
.sv-stagger.on > *:nth-child(7){ animation:sv-rise-sm .7s .54s var(--ease-expo) forwards; }

/* cursor glow */

/* ════════════════════════════════════════
   HERO
   ════════════════════════════════════════ */
.sv-hero {
    min-height:80vh; display:flex; align-items:center;
    background:#060606; position:relative; overflow:hidden;
    padding:140px 0 80px;
}
.sv-hero::before {
    content:''; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(191,247,71,.02) 1px,transparent 1px),
        linear-gradient(90deg,rgba(191,247,71,.02) 1px,transparent 1px);
    background-size:60px 60px; animation:sv-grid 22s linear infinite;
}
.sv-hero::after {
    content:''; position:absolute; left:0; right:0; top:0; height:40px;
    background:linear-gradient(to bottom,transparent,rgba(191,247,71,.012),transparent);
    animation:sv-scan 9s linear infinite; pointer-events:none; z-index:1;
}
.sv-hero-glow {
    position:absolute; top:-80px; right:-100px;
    width:700px; height:700px;
    background:radial-gradient(ellipse,rgba(191,247,71,.055) 0%,transparent 65%);
    animation:sv-breathe 9s ease-in-out infinite; pointer-events:none;
}
.sv-hero-content { position:relative; z-index:2; }
.sv-eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    background:rgba(191,247,71,.06); border:1px solid rgba(191,247,71,.22);
    border-radius:8px; padding:9px 16px; margin-bottom:28px;
    font-family:'Bricolage Grotesque',sans-serif; font-size:12px; color:#BFF747;

}
.sv-eyebrow::before { content:'$ '; color:rgba(191,247,71,.4); font-family:monospace; font-size:14px; }
.sv-hero h1 {
    font-family:'Big Shoulders Display',sans-serif;
    font-size:clamp(50px,7vw,92px); font-weight:900; color:#fff;
    line-height:.95; margin:0 0 28px;

}
.sv-hero h1 em { font-style:normal; color:var(--accent); }
.sv-hero h1 .glitch { position:relative; display:inline-block; }
.sv-hero h1 .glitch::after {
    content:attr(data-t); position:absolute; left:3px; top:0;
    color:rgba(191,247,71,.28);
    clip-path:polygon(0 20%,100% 20%,100% 44%,0 44%);
    animation:sv-glitch 10s 2s infinite; pointer-events:none;
}
.sv-hero-sub {
    font-size:16px; color:#999; line-height:1.9; max-width:560px; margin-bottom:0;

}
.sv-hero-sub strong { color:#ccc; font-weight:600; }

/* right — service index card */
.sv-index-card {
    position:relative; z-index:2;
    background:rgba(191,247,71,.025);
    border:1.5px solid rgba(191,247,71,.18);
    border-radius:24px; padding:32px 28px;

    overflow:hidden;
}
.sv-index-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.sv-index-label {
    font-size:9px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
    color:#BFF747; font-family:'Bricolage Grotesque',sans-serif;
    display:flex; align-items:center; gap:8px; margin-bottom:18px;
}
.sv-index-label::after { content:''; flex:1; height:1px; background:rgba(191,247,71,.18); }
.sv-index-list { display:flex; flex-direction:column; gap:6px; }
.sv-index-item {
    display:flex; align-items:center; gap:12px;
    background:rgba(193,193,193,.04); border:1px solid rgba(193,193,193,.1);
    border-radius:10px; padding:11px 14px;
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:13px; font-weight:600; color:#bbb;
    text-decoration:none;
    transition:border-color .3s,background .3s,color .3s,transform .4s var(--ease-expo);
}
.sv-index-item:hover {
    border-color:var(--accent-border); background:var(--accent-dim);
    color:#BFF747; transform:translateX(5px);
}
.sv-index-item i.icon { color:#BFF747; font-size:13px; width:16px; text-align:center; flex-shrink:0; }
.sv-index-item .num {
    margin-left:auto; font-size:9px; font-weight:700; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--text-dim); font-family:'Bricolage Grotesque',sans-serif;
}

/* ════════════════════════════════════════
   SECTION LABEL (shared)
   ════════════════════════════════════════ */
.sv-sec-label {
    font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
    color:#BFF747; font-family:'Bricolage Grotesque',sans-serif;
    display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.sv-sec-label::after { content:''; flex:1; height:1px; background:rgba(191,247,71,.18); }

/* ════════════════════════════════════════
   SERVICES — alternating full sections
   ════════════════════════════════════════ */

/* odd sections — dark bg */
.sv-service { padding:100px 0; position:relative; overflow:hidden; }
.sv-service:nth-child(odd)  { background:#060606; }
.sv-service:nth-child(even) { background:var(--surface); }

/* large bg number */
.sv-bg-num {
    position:absolute; right:-20px; top:50%; transform:translateY(-50%);
    font-family:'Big Shoulders Display',sans-serif; font-weight:900;
    font-size:clamp(200px,22vw,320px); color:#fff; line-height:1;
    opacity:0; pointer-events:none; user-select:none;
    animation:sv-number 1s var(--ease-expo) forwards;
    animation-play-state:paused;
}
.sv-service.on .sv-bg-num { animation-play-state:running; }
.sv-service:nth-child(even) .sv-bg-num { right:auto; left:-20px; }

/* ambient glow per service */
.sv-service-glow {
    position:absolute; width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle,rgba(191,247,71,.04) 0%,transparent 65%);
    pointer-events:none; top:50%; left:50%; transform:translate(-50%,-50%);
}

/* service heading */
.sv-service-heading {
    font-family:'Big Shoulders Display',sans-serif;
    font-size:clamp(36px,4.5vw,60px); font-weight:900;
    color:#fff; line-height:1.0; margin-bottom:20px;
}
.sv-service-heading span { color:var(--accent); }

.sv-service-intro {
    font-size:15.5px; color:#888; line-height:1.95; margin-bottom:28px;
}
.sv-service-intro strong { color:#ccc; font-weight:600; }

/* what's included checklist */
.sv-includes { display:flex; flex-direction:column; gap:9px; margin-bottom:28px; }
.sv-include {
    display:flex; align-items:flex-start; gap:12px;
    font-size:13.5px; color:#999; line-height:1.65;
    font-family:'Bricolage Grotesque',sans-serif;
}
.sv-include i { color:#BFF747; font-size:11px; margin-top:3px; flex-shrink:0; }

/* process steps */
.sv-process { display:flex; flex-direction:column; gap:0; margin-bottom:28px; }
.sv-step {
    display:flex; gap:18px; align-items:flex-start;
    padding:16px 0; border-bottom:1px solid rgba(193,193,193,.07);
    transition:border-color .3s;
}
.sv-step:last-child { border-bottom:none; }
.sv-step:hover { border-color:rgba(191,247,71,.18); }
.sv-step-num {
    font-family:'Big Shoulders Display',sans-serif;
    font-size:13px; font-weight:800; color:rgba(191,247,71,.35);
    flex-shrink:0; width:28px; padding-top:2px;
    transition:color .3s;
}
.sv-step:hover .sv-step-num { color:#BFF747; }
.sv-step-body {}
.sv-step-title {
    font-family:'Big Shoulders Display',sans-serif;
    font-size:17px; font-weight:800; color:#ddd;
    margin-bottom:3px; transition:color .3s;
}
.sv-step:hover .sv-step-title { color:#fff; }
.sv-step-desc { font-size:13px; color:var(--text-dim); line-height:1.7; }

/* tool chips */
.sv-tools { display:flex; flex-wrap:wrap; gap:7px; }
.sv-tool {
    display:flex; align-items:center; gap:7px;
    background:rgba(193,193,193,.05); border:1px solid rgba(193,193,193,.12);
    border-radius:8px; padding:7px 13px;
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:11px; font-weight:700; letter-spacing:.5px; color:#888;
    transition:all .3s;
}
.sv-tool:hover { border-color:var(--accent-border); color:#BFF747; background:var(--accent-dim); }
.sv-tool i { font-size:11px; color:#BFF747; }

/* right-side accent card */
.sv-accent-card {
    background:rgba(191,247,71,.025);
    border:1.5px solid rgba(191,247,71,.18);
    border-radius:22px; padding:32px 28px;
    position:relative; overflow:hidden;
    height:100%;
}
.sv-accent-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.sv-accent-card-icon {
    width:64px; height:64px; border-radius:18px;
    background:rgba(191,247,71,.1); border:1.5px solid rgba(191,247,71,.25);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:22px;
    transition:background .4s,transform .4s var(--ease-expo);
}
.sv-accent-card:hover .sv-accent-card-icon { background:rgba(191,247,71,.18); transform:scale(1.07); }
.sv-accent-card-icon i { font-size:28px; color:#BFF747; }
.sv-accent-card-title {
    font-family:'Big Shoulders Display',sans-serif;
    font-size:26px; font-weight:800; color:#fff; margin-bottom:12px; line-height:1.1;
}
.sv-accent-card-desc { font-size:14px; color:var(--text-dim); line-height:1.85; margin-bottom:22px; }

/* stat chips inside accent card */
.sv-stat-chips { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.sv-stat-chip {
    background:rgba(191,247,71,.05); border:1px solid rgba(191,247,71,.15);
    border-radius:10px; padding:12px 16px; text-align:center;
    transition:background .4s,border-color .4s;
}
.sv-accent-card:hover .sv-stat-chip { background:rgba(191,247,71,.09); border-color:rgba(191,247,71,.3); }
.sv-stat-chip-val {
    font-family:'Big Shoulders Display',sans-serif;
    font-size:22px; font-weight:800; color:#BFF747;
    display:block; line-height:1; margin-bottom:3px;
}
.sv-stat-chip-lbl {
    font-family:'Bricolage Grotesque',sans-serif;
    font-size:9px; font-weight:700; letter-spacing:1px;
    text-transform:uppercase; color:var(--text-dim);
}

/* divider */
.sv-divider {
    width:100%; height:1px;
    background:rgba(193,193,193,.08); margin:20px 0;
    transition:background .4s;
}
.sv-accent-card:hover .sv-divider { background:rgba(191,247,71,.15); }

/* ── "Also includes" mini list inside card ── */
.sv-mini-list { display:flex; flex-direction:column; gap:8px; }
.sv-mini-item {
    display:flex; align-items:center; gap:10px;
    font-size:12.5px; color:#888; font-family:'Bricolage Grotesque',sans-serif;
}
.sv-mini-item i { color:#BFF747; font-size:10px; flex-shrink:0; }

/* ════════════════════════════════════════
   WHY ME — 3-col feature grid
   ════════════════════════════════════════ */
.sv-why { background:#060606; padding:100px 0; position:relative; overflow:hidden; }
.sv-why::before {
    content:''; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(191,247,71,.016) 1px,transparent 1px),
        linear-gradient(90deg,rgba(191,247,71,.016) 1px,transparent 1px);
    background-size:80px 80px; pointer-events:none;
}
.sv-why-glow {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:800px; height:500px;
    background:radial-gradient(ellipse,rgba(191,247,71,.04) 0%,transparent 65%);
    pointer-events:none;
}
.sv-why-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1px; background:var(--line);
    border:1px solid var(--line); border-radius:24px; overflow:hidden;
    margin-top:52px;
}
.sv-why-card {
    background:var(--surface); padding:40px 28px; text-align:center;
    position:relative; overflow:hidden;
    transition:background .4s;
}
.sv-why-card::after {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 50% 100%,rgba(191,247,71,.07) 0%,transparent 65%);
    opacity:0; transition:opacity .4s; pointer-events:none;
}
.sv-why-card:hover { background:rgba(191,247,71,.025); }
.sv-why-card:hover::after { opacity:1; }
.sv-why-icon { font-size:30px; color:#BFF747; display:block; margin-bottom:18px; transition:transform .4s var(--ease-expo); }
.sv-why-card:hover .sv-why-icon { transform:scale(1.15) translateY(-3px); }
.sv-why-title { font-family:'Big Shoulders Display',sans-serif; font-size:20px; font-weight:800; color:#fff; margin-bottom:10px; }
.sv-why-desc { font-size:13px; color:var(--text-dim); line-height:1.78; }

/* ════════════════════════════════════════
   PRICING CARDS
   ════════════════════════════════════════ */
.sv-pricing { background:var(--surface); padding:100px 0; }
.sv-pricing-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
    margin-top:52px;
}
.sv-price-card {
    background:rgba(193,193,193,.03);
    border:1.5px solid rgba(193,193,193,.1);
    border-radius:22px; padding:36px 28px;
    position:relative; overflow:hidden;
    transition:border-color .4s,background .4s,transform .5s var(--ease-expo);
    display:flex; flex-direction:column;
}
.sv-price-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,rgba(193,193,193,.2),transparent);
    transition:background .4s;
}
.sv-price-card:hover { border-color:rgba(191,247,71,.28); background:rgba(191,247,71,.025); transform:translateY(-6px); }
.sv-price-card:hover::before { background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.sv-price-card.featured {
    border-color:rgba(191,247,71,.3);
    background:rgba(191,247,71,.03);
}
.sv-price-card.featured::before { background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.sv-price-badge {
    font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
    color:#060606; background:#BFF747; border-radius:100px; padding:4px 12px;
    display:inline-block; margin-bottom:20px; width:fit-content;
}
.sv-price-badge.dim {
    background:rgba(193,193,193,.12); color:var(--text-dim);
    border:1px solid rgba(193,193,193,.15);
}
.sv-price-name {
    font-family:'Big Shoulders Display',sans-serif;
    font-size:22px; font-weight:800; color:#fff; margin-bottom:6px;
}
.sv-price-desc { font-size:13px; color:var(--text-dim); line-height:1.7; margin-bottom:24px; }
.sv-price-val {
    font-family:'Big Shoulders Display',sans-serif;
    font-size:42px; font-weight:900; color:#BFF747; line-height:1; margin-bottom:4px;
}
.sv-price-unit { font-size:11px; color:var(--text-dim); font-family:'Bricolage Grotesque',sans-serif; margin-bottom:24px; }
.sv-price-list { display:flex; flex-direction:column; gap:9px; flex:1; margin-bottom:28px; }
.sv-price-item {
    display:flex; align-items:flex-start; gap:9px;
    font-size:13px; color:#999; font-family:'Bricolage Grotesque',sans-serif; line-height:1.55;
}
.sv-price-item i { color:#BFF747; font-size:10px; margin-top:3px; flex-shrink:0; }
.sv-price-item.off i { color:var(--text-dim); }
.sv-price-item.off { color:var(--text-dim); }

/* ════════════════════════════════════════
   CTA
   ════════════════════════════════════════ */
.sv-cta { background:#060606; padding:100px 0; }
.sv-cta-wrap {
    background:rgba(191,247,71,.03); border:1.5px solid rgba(191,247,71,.2);
    border-radius:28px; padding:80px 60px; text-align:center;
    position:relative; overflow:hidden;
}
.sv-cta-wrap::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.sv-cta-wrap::after { content:''; position:absolute; bottom:-80px; left:50%; transform:translateX(-50%); width:500px; height:500px; background:radial-gradient(circle,rgba(191,247,71,.055) 0%,transparent 65%); pointer-events:none; }
.sv-cta-eyebrow { font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#BFF747; font-family:'Bricolage Grotesque',sans-serif; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:20px; }
.sv-cta-eyebrow::before,.sv-cta-eyebrow::after { content:''; width:40px; height:1px; background:rgba(191,247,71,.3); }
.sv-cta-heading { font-family:'Big Shoulders Display',sans-serif; font-size:clamp(40px,5.5vw,72px); font-weight:900; color:#fff; line-height:1.0; margin-bottom:18px; }
.sv-cta-heading span { color:var(--accent); }
.sv-cta-sub { font-size:15px; color:var(--text-dim); max-width:520px; margin:0 auto 44px; line-height:1.85; }
.sv-cta-btns { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media(max-width:1199px){ .sv-pricing-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:991px){
    .sv-why-grid{grid-template-columns:repeat(2,1fr);}
    .sv-pricing-grid{grid-template-columns:1fr 1fr;}
    .sv-bg-num{font-size:160px;}
}
@media(max-width:767px){
    .sv-hero{min-height:auto;padding:120px 0 60px;}
    .sv-why-grid{grid-template-columns:1fr;}
    .sv-pricing-grid{grid-template-columns:1fr;}
    .sv-cta-wrap{padding:44px 22px;}
    .sv-cta-btns{flex-direction:column;}
    .sv-cta-btns .theme-btn{width:100%;justify-content:center;display:flex;}
    .sv-bg-num{display:none;}
}
@media(max-width:575px){
    .sv-hero h1{font-size:44px;}
    .sv-stat-chips{flex-wrap:wrap;}
}
@media(hover:none),(max-width:1024px){
    .mouse-cursor,.cursor-inner,.cursor-outer{display:none !important;}
    *,*::before,*::after{cursor:auto !important;}
    a,button,label,[role="button"]{cursor:pointer !important;}
}