/* 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;
    }

    /* 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); }

    .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;
    }
    .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:90%; max-width:320px;
      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__body { padding:1rem; display:flex; flex-direction:column; gap:.7rem; }
    .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:2rem; display:flex; align-items:center; justify-content:center;
    }
    [data-theme="light"] .sv-content { background:linear-gradient(160deg,#d0e8d0,#d0d0f0); }
    .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; }

    /* 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; }
    }
    @media(max-width:640px) {
      .page-hero { padding:8rem 0 4rem; }
      .svc-section { padding:5rem 0; }
      .pricing { padding:5rem 0; }
    }
  
    /* Force nav links visible on desktop */
    @media(min-width:901px) {
      .nav__links { display:flex !important; }
      .nav__hamburger { display:none !important; }
    }