/* services.html — page-specific styles (extracted from inline) */

/* ============================
       SERVICES PAGE
    ============================ */
    .page-hero { padding:10rem 0 6rem; }
    .page-hero .blob--1{width:500px;height:500px;top:-150px;left:-80px;}
    .page-hero .blob--2{width:400px;height:400px;top:10%;right:-60px;animation-delay:-5s;}

    .ph-eyebrow { display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem; }

    .page-title {
      font-family:var(--font-display);
      font-size:clamp(4rem,8vw,9rem);
      line-height:.9; letter-spacing:.02em; color:var(--text);
      margin-bottom:1.5rem;
    }
    .page-lead {
      font-size:1.1rem; font-weight:300; line-height:1.7;
      color:var(--text-muted); max-width:560px; font-style:italic;
    }
    .page-meta {
      display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem;
    }

    /* SERVICE SECTIONS */
    .svc-section {
      padding:7rem 0;
      position:relative;
    }
    .svc-section:nth-child(even) { background:var(--bg-alt); }
    .svc-section:nth-child(odd)  { background:var(--bg); }

    /* TABS */
    .svc-tabs__nav {
      display:grid; grid-template-columns:repeat(4,1fr);
      gap:.6rem; margin-bottom:4rem;
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      padding:1.2rem 0;
    }
    .svc-tab {
      display:flex; flex-direction:column; gap:.35rem;
      align-items:flex-start; text-align:left;
      background:transparent; border:1px solid transparent;
      cursor:pointer;
      padding:1rem 1.2rem;
      border-radius:var(--radius-md);
      color:var(--text-muted);
      transition:all .25s;
      font-family:inherit;
    }
    .svc-tab:hover { color:var(--text); background:rgba(255,255,255,.02); }
    [data-theme="light"] .svc-tab:hover { background:rgba(0,0,0,.025); }
    .svc-tab__num {
      font-family:var(--font-mono); font-size:.6rem; letter-spacing:.15em;
      color:var(--text-muted); opacity:.6;
    }
    .svc-tab__name {
      font-family:var(--font-display); font-size:1.35rem;
      letter-spacing:.02em; color:var(--text); line-height:1;
    }
    .svc-tab__sub {
      font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em;
      color:var(--text-muted); opacity:.7;
    }
    .svc-tab.is-on {
      background:linear-gradient(135deg,rgba(249,130,25,.08),rgba(108,78,243,.08));
      border-color:rgba(249,130,25,.3);
    }
    .svc-tab.is-on .svc-tab__num { color:var(--orange); opacity:1; }
    .svc-tab.is-on .svc-tab__sub { opacity:1; color:var(--text-muted); }

    .svc-tab-panel[hidden] { display:none; }
    .svc-tab-panel { animation:svcTabFade .35s ease-out; }
    @keyframes svcTabFade {
      from { opacity:0; transform:translateY(10px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* SEO visual */
    .sv-seo {
      background:linear-gradient(160deg,#0a0a1e,#0a1a12);
      display:flex; flex-direction:column; padding:0;
    }
    [data-theme="light"] .sv-seo { background:linear-gradient(160deg,#d0d0f0,#d0e8d8); }
    .seo-body {
      padding:1.4rem; display:flex; flex-direction:column; gap:1.2rem; flex:1;
    }
    .seo-serp {
      background:var(--surface); border:1px solid var(--border);
      border-radius:10px; padding:1rem 1.1rem;
      display:flex; flex-direction:column; gap:.35rem;
    }
    .seo-serp__url {
      font-family:var(--font-mono); font-size:.6rem; letter-spacing:.04em;
      color:var(--text-muted);
    }
    .seo-serp__title {
      font-family:var(--font-display); font-size:1.1rem; line-height:1.2;
      color:var(--orange); letter-spacing:.01em;
    }
    .seo-serp__desc {
      font-size:.75rem; line-height:1.55; color:var(--text-muted); font-weight:300;
    }
    .seo-scores { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
    .seo-score { display:flex; flex-direction:column; align-items:center; gap:.45rem; }
    .seo-score__ring {
      width:48px; height:48px; border-radius:50%;
      border:2px solid #4ade80;
      display:flex; align-items:center; justify-content:center;
      font-family:var(--font-display); font-size:1rem; color:#4ade80;
      background:rgba(74,222,128,.08);
    }
    .seo-score span {
      font-family:var(--font-mono); font-size:.58rem; letter-spacing:.05em;
      color:var(--text-muted); text-align:center;
    }

    .svc-layout {
      display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center;
    }
    .svc-layout--flip { direction:rtl; }
    .svc-layout--flip > * { direction:ltr; }

    .svc-number {
      font-family:var(--font-display); font-size:8rem; line-height:1;
      letter-spacing:.02em; opacity:.06; color:var(--text);
      margin-bottom:-1.5rem; display:block;
    }
    .svc-label {
      font-family:var(--font-mono); font-size:.68rem; letter-spacing:.15em;
      text-transform:uppercase; color:var(--orange); margin-bottom:1rem;
    }
    .svc-title {
      font-family:var(--font-display); font-size:clamp(3rem,5vw,5rem);
      line-height:.92; letter-spacing:.02em; color:var(--text);
      margin-bottom:1.5rem;
    }
    .svc-desc {
      font-size:1rem; font-weight:300; line-height:1.75;
      color:var(--text-muted); margin-bottom:2rem;
    }
    .svc-features { display:flex; flex-direction:column; gap:.75rem; margin-bottom:2.5rem; }
    .svc-feature {
      display:flex; align-items:flex-start; gap:.9rem;
      font-size:.9rem; font-weight:300; color:var(--text-muted); line-height:1.5;
    }
    .svc-feature__icon {
      width:28px; height:28px; border-radius:8px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center; font-size:.9rem;
      background:linear-gradient(135deg,var(--purple-glow),var(--orange-glow));
      border:1px solid var(--border); margin-top:1px;
    }
    .svc-tags { display:flex; flex-wrap:wrap; gap:.5rem; }

    /* Visual panels */
    .svc-visual {
      border-radius:var(--radius-xl); overflow:hidden;
      position:relative; aspect-ratio:4/3;
      border:1px solid var(--border);
    }
    .sv-webdev {
      background:var(--code-bg);
      display:flex; flex-direction:column; padding:0;
    }
    .web-dash {
      padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:1rem; flex:1;
      font-family:var(--font-mono);
    }
    .web-dash__top {
      display:flex; justify-content:space-between; align-items:center;
      font-size:.65rem; letter-spacing:.04em; color:var(--text-muted);
    }
    .web-dash__live { display:inline-flex; align-items:center; gap:.4rem; color:#4ade80; }
    .web-dash__dot {
      width:6px; height:6px; border-radius:50%; background:#4ade80;
      box-shadow:0 0 8px #4ade80;
    }
    .web-dash__cards {
      display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;
    }
    .web-stat {
      background:var(--surface); border:1px solid var(--border);
      border-radius:8px; padding:.7rem .8rem;
      display:flex; flex-direction:column; gap:.25rem;
    }
    .web-stat__num {
      font-family:var(--font-display); font-size:1.25rem;
      color:var(--text); letter-spacing:.02em;
    }
    .web-stat__lab {
      font-family:var(--font-mono); font-size:.58rem; letter-spacing:.05em;
      color:var(--text-muted);
    }
    .web-dash__chart {
      background:var(--surface); border:1px solid var(--border);
      border-radius:8px; padding:.6rem;
      flex:1; min-height:80px;
    }
    .web-dash__chart svg { width:100%; height:100%; display:block; }
    .sv-header {
      display:flex; align-items:center; gap:.4rem;
      padding:.6rem .9rem; background:rgba(255,255,255,.03);
      border-bottom:1px solid var(--border);
    }
    .sv-dot { width:10px;height:10px;border-radius:50%; }
    .sv-dot--r{background:#ff5f56;} .sv-dot--y{background:#ffbd2e;} .sv-dot--g{background:#27c93f;}
    .sv-filename { font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted);margin-left:.4rem; }
    .sv-code { padding:1.4rem; font-family:var(--font-mono); font-size:.78rem; flex:1; overflow:hidden; }
    .sv-line { line-height:1.9; color:var(--text-muted); }
    .sv-line .ck { color:var(--purple); }
    .sv-line .fn { color:var(--orange); }
    .sv-line .st { color:#7dd3a8; }
    .sv-line .cm { color:rgba(255,255,255,.25); font-style:italic; }
    .sv-line .nm { color:#60a5fa; }
    [data-theme="light"] .sv-line .cm { color:rgba(0,0,0,.3); }
    .sv-cursor { display:inline-block;width:8px;height:.9em;background:var(--orange);border-radius:1px;animation:blink 1.1s step-end infinite;vertical-align:middle; }
    @keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }
    .ind { padding-left:1.4em; }
    .ind2 { padding-left:2.8em; }

    .sv-uiux {
      background:linear-gradient(160deg, #0a0a1e, #150a2e);
      display:flex; align-items:center; justify-content:center; padding:2rem;
    }
    [data-theme="light"] .sv-uiux { background:linear-gradient(160deg,#e0e0f8,#d0c0f0); }
    .ui-mockup {
      width:100%; max-width:420px;
      background:var(--surface); border:1px solid var(--border);
      border-radius:16px; overflow:hidden;
      box-shadow:0 24px 60px rgba(0,0,0,.5);
    }
    .ui-mockup__bar {
      height:44px; background:rgba(255,255,255,.04);
      border-bottom:1px solid var(--border);
      display:flex; align-items:center; padding:0 1rem; gap:.5rem;
    }
    .ui-bar-dot { width:8px;height:8px;border-radius:50%;background:var(--border); }
    .ui-mockup__title {
      font-family:var(--font-mono); font-size:.6rem; letter-spacing:.04em;
      color:var(--text-muted); margin-left:.5rem;
    }
    .ui-mockup__body { padding:1rem; display:flex; flex-direction:column; gap:.7rem; }
    .ui-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:1rem; }
    .ui-comp {
      display:flex; flex-direction:column; gap:.45rem;
      padding:.9rem; background:rgba(255,255,255,.02);
      border:1px solid var(--border); border-radius:8px;
    }
    [data-theme="light"] .ui-comp { background:rgba(0,0,0,.02); }
    .ui-comp label {
      font-family:var(--font-mono); font-size:.55rem; letter-spacing:.06em;
      color:var(--text-muted); text-transform:lowercase;
    }
    .ui-btn {
      align-self:flex-start; font-family:var(--font-display); font-size:.72rem;
      padding:.45rem .8rem; border-radius:6px;
      background:linear-gradient(135deg,var(--orange),#e06c00);
      color:#fff; letter-spacing:.02em;
    }
    .ui-input {
      font-family:var(--font-mono); font-size:.65rem; color:var(--text);
      padding:.45rem .6rem; border-radius:6px;
      background:var(--surface); border:1px solid var(--orange);
      box-shadow:0 0 0 2px rgba(249,130,25,.15);
    }
    .ui-toggle {
      width:36px; height:20px; border-radius:100px;
      background:var(--orange); position:relative; align-self:flex-start;
    }
    .ui-toggle__thumb {
      position:absolute; right:2px; top:2px;
      width:16px; height:16px; border-radius:50%; background:#fff;
    }
    .ui-swatches { display:flex; gap:.35rem; }
    .ui-swatches span {
      width:22px; height:22px; border-radius:5px;
      border:1px solid var(--border);
    }
    .ui-type { display:flex; flex-direction:column; gap:.25rem; color:var(--text); }
    .ui-mono {
      font-family:var(--font-mono); font-size:.6rem; color:var(--text-muted); letter-spacing:.04em;
    }
    .ui-elev { display:flex; gap:.4rem; }
    .ui-elev span {
      width:22px; height:22px; border-radius:5px;
      background:var(--surface); border:1px solid var(--border);
    }
    .ui-elev--md { box-shadow:0 3px 8px rgba(0,0,0,.3); }
    .ui-elev--lg { box-shadow:0 10px 20px rgba(0,0,0,.5); }
    .ui-row { display:flex; gap:.7rem; }
    .ui-block { border-radius:6px; background:var(--surface); border:1px solid var(--border); }
    .ui-block--accent-a { background:rgba(108,78,243,.25); border-color:rgba(108,78,243,.3); }
    .ui-block--accent-b { background:rgba(249,130,25,.2);  border-color:rgba(249,130,25,.25); }
    .ui-pill { height:20px; border-radius:100px; background:rgba(108,78,243,.2); border:1px solid rgba(108,78,243,.25); }
    .ui-pill-sm { width:60px; height:14px; border-radius:100px; background:var(--surface); border:1px solid var(--border); }

    .sv-content {
      background:linear-gradient(160deg, #0a1a0a, #0a0a1e);
      padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:1rem;
    }
    [data-theme="light"] .sv-content { background:linear-gradient(160deg,#d0e8d0,#d0d0f0); }
    .cal-header {
      display:flex; justify-content:space-between; align-items:center;
      font-family:var(--font-mono); font-size:.65rem; letter-spacing:.04em;
      color:var(--text-muted);
    }
    .cal-header__meta { color:var(--orange); }
    .cal-grid {
      display:grid; grid-template-columns:1fr 1fr; gap:.7rem; flex:1;
    }
    .cal-card {
      background:var(--surface); border:1px solid var(--border);
      border-radius:10px; padding:.6rem; display:flex; flex-direction:column; gap:.45rem;
      position:relative;
    }
    .cal-thumb {
      aspect-ratio:16/9; border-radius:6px; overflow:hidden;
      background:linear-gradient(135deg,rgba(108,78,243,.3),rgba(249,130,25,.2));
      position:relative; display:flex; align-items:center; justify-content:center;
    }
    .cal-thumb--doc {
      background:linear-gradient(135deg,rgba(108,78,243,.15),rgba(108,78,243,.05));
    }
    .cal-thumb--doc::before,
    .cal-thumb--doc::after {
      content:''; position:absolute; left:14%; right:14%; height:3px; border-radius:2px;
      background:rgba(255,255,255,.2);
    }
    .cal-thumb--doc::before { top:28%; }
    .cal-thumb--doc::after  { top:50%; right:40%; }
    .cal-play {
      width:30px;height:30px;border-radius:50%;
      background:linear-gradient(135deg,var(--orange),#e06c00);
      display:flex;align-items:center;justify-content:center;
      font-size:.7rem; color:#fff;
      box-shadow:0 6px 16px rgba(249,130,25,.4);
    }
    .cal-badge {
      align-self:flex-start;
      font-family:var(--font-mono); font-size:.55rem; letter-spacing:.04em;
      padding:.2rem .5rem; border-radius:100px;
      background:rgba(108,78,243,.15); border:1px solid rgba(108,78,243,.25);
      color:#a78bfa;
    }
    .cal-badge--orange {
      background:rgba(249,130,25,.15); border-color:rgba(249,130,25,.3);
      color:var(--orange);
    }
    .cal-title {
      font-family:var(--font-display); font-size:.85rem;
      color:var(--text); letter-spacing:.02em; line-height:1.2;
    }
    .content-mockup {
      width:90%; display:flex; flex-direction:column; gap:1rem;
    }
    .cm-video {
      aspect-ratio:16/9; border-radius:10px; overflow:hidden;
      background:var(--code-bg); border:1px solid var(--border); position:relative;
      display:flex; align-items:center; justify-content:center;
    }
    .cm-play {
      width:44px;height:44px; border-radius:50%;
      background:linear-gradient(135deg,var(--orange),#e06c00);
      display:flex; align-items:center; justify-content:center;
      font-size:.9rem; box-shadow:0 8px 24px rgba(249,130,25,.4);
    }
    .cm-bar { height:6px; border-radius:3px; background:var(--border); overflow:hidden; }
    .cm-bar__fill { height:100%; border-radius:3px; background:linear-gradient(to right,var(--orange),var(--purple)); }
    .cm-meta { display:flex; gap:.7rem; align-items:center; }
    .cm-views { font-family:var(--font-mono);font-size:.65rem;color:var(--orange); }
    .cm-pills { display:flex; gap:.4rem; flex-wrap:wrap; }

    /* CTA */
    .svc-cta { padding:7rem 0; background:var(--bg); position:relative; }
    .svc-cta__grid {
      display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:end;
    }
    .svc-cta__desc {
      font-size:1.05rem; font-weight:300; line-height:1.7;
      color:var(--text-muted); margin-bottom:1.8rem; font-style:italic;
      max-width:460px;
    }
    @media(max-width:900px) {
      .svc-cta { padding:5rem 0; }
      .svc-cta__grid { grid-template-columns:1fr; gap:2rem; align-items:start; }
    }

    /* PRICING */
    .pricing { padding:7rem 0; background:var(--bg-alt); }
    .pricing__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:4rem; }
    .price-card {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius-lg); padding:2.4rem;
      position:relative; overflow:hidden; transition:all .3s;
    }
    .price-card--featured {
      border-color:rgba(249,130,25,.35);
      background:linear-gradient(135deg,rgba(249,130,25,.06),rgba(108,78,243,.06));
    }
    .price-card:hover { transform:translateY(-5px); }
    .price-card__badge {
      position:absolute; top:1.2rem; right:1.2rem;
      font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em;
      background:linear-gradient(135deg,var(--orange),#e06c00); color:#fff;
      padding:.25rem .7rem; border-radius:var(--radius-pill);
    }
    .price-card__plan {
      font-family:var(--font-mono); font-size:.68rem;
      letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
      margin-bottom:1rem;
    }
    .price-card__amount {
      font-family:var(--font-display); font-size:3.2rem; line-height:1;
      color:var(--text); margin-bottom:.4rem;
    }
    .price-card__amount span { font-size:1.2rem; color:var(--text-muted); }
    .price-card__note { font-size:.8rem; color:var(--text-muted); margin-bottom:2rem; font-style:italic; }
    .price-card__features { display:flex; flex-direction:column; gap:.75rem; margin-bottom:2.5rem; }
    .price-feature {
      display:flex; align-items:center; gap:.75rem;
      font-size:.88rem; font-weight:300; color:var(--text-muted);
    }
    .pf-check { color:#4ade80; font-size:.8rem; flex-shrink:0; }
    .pf-x { color:rgba(255,255,255,.2); font-size:.8rem; flex-shrink:0; }
    [data-theme="light"] .pf-x { color:rgba(0,0,0,.2); }

    @media(max-width:1024px) {
      .svc-layout { grid-template-columns:1fr; gap:3rem; }
      .svc-layout--flip { direction:ltr; }
      .pricing__grid { grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; }
      .svc-number { font-size:5rem; }
      .svc-tabs__nav { grid-template-columns:repeat(2,1fr); }
    }
    @media(max-width:640px) {
      .page-hero { padding:8rem 0 4rem; }
      .svc-section { padding:5rem 0; }
      .pricing { padding:5rem 0; }
      .svc-tabs__nav { grid-template-columns:1fr; gap:.3rem; padding:.8rem 0; margin-bottom:2.5rem; }
      .svc-tab { padding:.8rem 1rem; }
      .seo-scores { grid-template-columns:repeat(2,1fr); }
      .ui-grid { grid-template-columns:1fr; }
      .web-dash__cards { grid-template-columns:1fr; }
    }
  
    /* Force nav links visible on desktop */
    @media(min-width:901px) {
      .nav__links { display:flex !important; }
      .nav__hamburger { display:none !important; }
    }