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

/* ============================
       HOME — HERO
    ============================ */
    .hero {
      position:relative; min-height:100vh;
      display:flex; align-items:center; justify-content:center;
      gap:5rem; padding:8rem 4rem 4rem; overflow:hidden;
      background:var(--bg);
    }
    .hero .blob--1 { width:600px;height:600px; top:-150px;left:-100px; animation-delay:0s; }
    .hero .blob--2 { width:500px;height:500px; bottom:-100px;right:-50px; animation-delay:-4s; }
    .hero .blob--3 { width:350px;height:350px; top:50%;right:30%; animation-delay:-8s; }

    .hero__content {
      position:relative; z-index:2; max-width:600px; flex-shrink:0;
      animation:revealUp .9s cubic-bezier(.22,1,.36,1) .2s both;
    }
    .hero__badge {
      display:inline-flex; align-items:center; gap:.6rem;
      font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted);
      background:var(--surface); border:1px solid var(--border);
      padding:.4rem .9rem; border-radius:var(--radius-pill);
      margin-bottom:2rem; letter-spacing:.04em;
      animation:revealUp .8s ease .4s both;
    }
    .hero__title {
      font-family:var(--font-display); line-height:.92;
      letter-spacing:.01em; margin-bottom:2rem;
      display:flex; flex-direction:column;
    }
    .hero__title-line { display:block; overflow:hidden; }
    .hero__title-line--1 {
      font-size:clamp(4.5rem,8vw,9rem); color:var(--text);
      animation:slideUp .8s cubic-bezier(.22,1,.36,1) .5s both;
    }
    .hero__title-line--2 {
      font-size:clamp(4.5rem,8vw,9rem);
      animation:slideUp .8s cubic-bezier(.22,1,.36,1) .65s both;
    }
    .hero__title-line--3 {
      font-size:clamp(4.5rem,8vw,9rem);
      background:linear-gradient(110deg,var(--orange) 0%,var(--purple) 60%,#a78bfa 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      animation:slideUp .8s cubic-bezier(.22,1,.36,1) .8s both;
    }
    .hero__sub-row {
      display:flex; align-items:flex-start; gap:1.2rem;
      margin-bottom:2.5rem; animation:revealUp .8s ease 1s both;
    }
    .hero__divider {
      width:3px; min-height:52px; border-radius:2px;
      background:linear-gradient(to bottom,var(--orange),var(--purple));
      flex-shrink:0; margin-top:2px;
    }
    .hero__subtitle {
      font-size:1.05rem; font-weight:300; line-height:1.65;
      color:var(--text-muted); font-style:italic;
    }
    .hero__actions {
      display:flex; gap:1rem; align-items:center;
      margin-bottom:3rem; animation:revealUp .8s ease 1.1s both;
    }
    .hero__stats {
      display:flex; align-items:center; gap:1.5rem;
      animation:revealUp .8s ease 1.2s both;
    }
    .stat { display:flex; flex-direction:column; gap:.2rem; }
    .stat__number {
      font-family:var(--font-display); font-size:2.4rem; line-height:1; color:var(--text);
    }
    .stat__plus {
      font-size:1.5rem;
      background:linear-gradient(135deg,var(--orange),var(--purple));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .stat__label {
      font-size:.72rem; color:var(--text-muted);
      font-family:var(--font-mono); letter-spacing:.04em;
    }
    .stat__divider { width:1px; height:40px; background:var(--border); }

    /* Hero visual */
    .hero__visual {
      position:relative; z-index:2; width:460px; height:380px; flex-shrink:0;
      animation:visualReveal 1s cubic-bezier(.22,1,.36,1) .6s both;
    }
    @keyframes visualReveal {
      from{opacity:0;transform:translateX(50px) rotate(-2deg)}
      to  {opacity:1;transform:translateX(0) rotate(0)}
    }
    .mac-card {
      position:absolute; top:-30px; right:-50px; z-index:3;
      min-width:320px; border-radius:var(--radius-md);
      background:var(--code-bg); border:1px solid rgba(255,255,255,.1);
      box-shadow:0 0 0 1px rgba(108,78,243,.2),0 20px 50px rgba(0,0,0,.6),0 0 30px rgba(108,78,243,.12);
      backdrop-filter:blur(20px); overflow:hidden;
      animation:floatUp 5s ease-in-out infinite; animation-delay:-2.5s;
    }
    .mac-card__bar {
      display:flex; align-items:center; gap:.4rem;
      padding:.55rem .8rem; background:rgba(255,255,255,.04);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .mac-dot { width:10px;height:10px;border-radius:50%; }
    .mac-dot--r { background:#ff5f56; } .mac-dot--y { background:#ffbd2e; } .mac-dot--g { background:#27c93f; }
    .mac-card__filename {
      font-family:var(--font-mono); font-size:.65rem;
      color:var(--text-muted); margin-left:.3rem; letter-spacing:.03em;
    }
    .mac-card__body {
      padding:.6rem 0; background:var(--code-bg);
      display:flex; flex-direction:column;
    }
    .mac-line {
      font-family:var(--font-mono); font-size:.9rem; line-height:2;
      color:var(--text-muted); display:flex; align-items:center;
      padding:0 1.4rem 0 0; white-space:pre;
    }
    .mac-ln {
      display:inline-block; min-width:2.5rem; padding:0 .85rem;
      color:rgba(255,255,255,.2); text-align:right; user-select:none;
      border-right:1px solid rgba(255,255,255,.05); margin-right:.85rem; font-size:.8rem;
    }
    [data-theme="light"] .mac-ln { color:rgba(0,0,0,.2); border-right-color:rgba(0,0,0,.08); }
    [data-theme="light"] .mac-line { color:rgba(13,13,26,.55); }
    .mac-tab { padding-left:1.4em; }
    .code-cursor {
      display:inline-block; width:9px; height:1.1em; background:var(--orange);
      border-radius:1px; animation:blink 1.1s step-end infinite; vertical-align:text-bottom;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
    .ck { color:var(--purple); }

    .visual__tag {
      position:absolute; bottom:-20px; left:-50px;
      display:flex; align-items:center; gap:.9rem;
      background:var(--surface); border:1px solid var(--border);
      backdrop-filter:blur(20px); padding:.85rem 1.2rem;
      border-radius:var(--radius-md); box-shadow:0 16px 40px rgba(0,0,0,.4);
      animation:floatUp 5s ease-in-out infinite;
    }
    .vtag__icon {
      font-size:1.4rem; width:38px; height:38px;
      display:flex; align-items:center; justify-content:center;
      background:linear-gradient(135deg,var(--purple-glow),var(--orange-glow));
      border-radius:10px; border:1px solid var(--border);
    }
    .vtag__title { font-size:.85rem; font-weight:500; color:var(--text); }

    .visual__orbit {
      position:absolute; inset:-80px; pointer-events:none;
      animation:orbitSpin 20s linear infinite;
    }
    .orbit__ring {
      position:absolute; inset:20px; border-radius:50%;
      border:1px dashed rgba(108,78,243,.2);
    }
    .orbit__dot {
      position:absolute; width:10px;height:10px; border-radius:50%;
      top:50%; left:50%;
    }
    .od--1{background:var(--orange);box-shadow:0 0 12px var(--orange);transform:translate(-50%,-50%) translateX(calc(50% + 120px));}
    .od--2{background:var(--purple);box-shadow:0 0 12px var(--purple);transform:translate(-50%,-50%) rotate(120deg) translateX(calc(50% + 120px));}
    .od--3{background:#a78bfa;box-shadow:0 0 12px #a78bfa;transform:translate(-50%,-50%) rotate(240deg) translateX(calc(50% + 120px));}
    @keyframes orbitSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

    /* ============================
       HOME — SERVICES PREVIEW
    ============================ */
    .services-preview { padding:7rem 0; background:var(--bg-alt); }
    .services-preview .container { display:grid; grid-template-columns:1fr 2fr; gap:5rem; align-items:start; }
    .services-preview__left { position:sticky; top:5.5rem; }
    .services-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }

    /* ============================
       HOME — FEATURED WORK
    ============================ */
    .featured-work { padding:7rem 0; background:var(--bg); }
    .work-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3.5rem; }
    .work-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
    .work-card {
      border-radius:var(--radius-lg); overflow:hidden;
      background:var(--surface); border:1px solid var(--border);
      transition:all .35s cubic-bezier(.22,1,.36,1); cursor:pointer;
    }
    .work-card--wide { grid-column:span 2; }
    .work-card:hover { transform:translateY(-6px); border-color:rgba(108,78,243,.3); box-shadow:0 30px 60px rgba(0,0,0,.35); }
    .work-card__thumb { height:260px; position:relative; overflow:hidden; }
    .work-card--wide .work-card__thumb { height:320px; }
    .work-card__bg { position:absolute; inset:0; transition:transform .5s cubic-bezier(.22,1,.36,1); }
    .work-card:hover .work-card__bg { transform:scale(1.05); }
    .wbg-1 { background:linear-gradient(135deg,#0a0a1a,#1a0a2e 40%,#0d1a2e); }
    .wbg-2 { background:linear-gradient(135deg,#0a1a0a,#1a2e0d 60%,#0a1a1a); }
    .wbg-3 { background:linear-gradient(135deg,#1a0a0a,#2e1a0d 50%,#1a0a1a); }
    [data-theme="light"] .wbg-1 { background:linear-gradient(135deg,#d0d0f0,#c0b0e8 40%,#b8c8e8); }
    [data-theme="light"] .wbg-2 { background:linear-gradient(135deg,#c0e0c0,#d0e0a8 60%,#b8e0d8); }
    [data-theme="light"] .wbg-3 { background:linear-gradient(135deg,#e8c0c0,#e8d0a8 50%,#e0b8d8); }
    .work-card__deco {
      position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    }
    .deco-grid {
      display:grid; grid-template-columns:repeat(3,80px); grid-template-rows:repeat(2,60px);
      gap:12px; opacity:.6; transition:opacity .3s;
    }
    .deco-grid--wide {
      grid-template-columns:repeat(5,80px); grid-template-rows:72px;
    }
    .work-card:hover .deco-grid { opacity:.9; }
    .dbox { border-radius:10px; transition:transform .4s cubic-bezier(.22,1,.36,1); }
    .work-card:hover .dbox:nth-child(1) { transform:translateY(-6px); }
    .work-card:hover .dbox:nth-child(3) { transform:translateY(6px); }
    .work-card:hover .dbox:nth-child(5) { transform:translateY(-4px); }
    .dbox-a { background:linear-gradient(135deg,var(--purple),rgba(108,78,243,.3)); }
    .dbox-b { background:linear-gradient(135deg,var(--orange),rgba(249,130,25,.3)); }
    .dbox-c { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
    .dbox-d { background:linear-gradient(135deg,#a78bfa,rgba(167,139,250,.2)); }
    .dbox-e { background:linear-gradient(135deg,#7dd3a8,rgba(125,211,168,.2)); }
    [data-theme="light"] .dbox-c { background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.1); }
    .work-card__info {
      padding:1.5rem 1.8rem; display:flex; justify-content:space-between; align-items:center;
    }
    .work-card__meta { display:flex; flex-direction:column; gap:.3rem; }
    .work-card__cat {
      font-family:var(--font-mono); font-size:.65rem;
      letter-spacing:.12em; text-transform:uppercase; color:var(--orange);
    }
    .work-card__name { font-family:var(--font-display); font-size:1.5rem; letter-spacing:.04em; color:var(--text); }
    .work-card__arrow {
      width:40px; height:40px; border-radius:50%;
      background:var(--surface); border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      font-size:1rem; transition:all .3s;
    }
    .work-card:hover .work-card__arrow {
      background:linear-gradient(135deg,var(--orange),#e06c00);
      border-color:transparent; transform:rotate(-45deg);
    }

    /* ============================
       HOME — CTA STRIP
    ============================ */
    .cta-strip {
      position:relative; overflow:hidden; text-align:center;
      padding:9rem 0; background:var(--bg-alt);
    }
    .cta-strip .blob--1{width:500px;height:500px;top:-100px;left:-100px;animation-delay:0s;}
    .cta-strip .blob--2{width:500px;height:500px;bottom:-100px;right:-100px;animation-delay:-4s;}
    .cta-strip__inner { position:relative; z-index:2; max-width:700px; margin:0 auto; }
    .cta-title {
      font-family:var(--font-display); font-size:clamp(3.5rem,6vw,7rem);
      line-height:.9; letter-spacing:.02em; color:var(--text); margin-bottom:1.5rem;
    }
    .cta-title span { display:block; }
    .cta-desc {
      font-size:1.05rem; font-weight:300; line-height:1.7;
      color:var(--text-muted); margin-bottom:3rem; font-style:italic;
    }
    .cta-actions { display:flex; gap:1rem; justify-content:center; align-items:center; flex-wrap:wrap; }
    .avail-badge {
      display:flex; align-items:center; gap:.7rem;
      font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted);
      background:var(--surface); border:1px solid var(--border);
      padding:.5rem 1.2rem; border-radius:var(--radius-pill);
    }

    /* RESPONSIVE HOME */
    @media(max-width:1024px) {
      .hero { flex-direction:column; gap:4rem; padding:8rem 2.5rem 5rem; text-align:center; }
      .hero__content { max-width:100%; display:flex; flex-direction:column; align-items:center; }
      .hero__sub-row { justify-content:center; }
      .hero__stats { justify-content:center; }
      .hero__visual { width:360px; }
      .services-preview .container { grid-template-columns:1fr; gap:3rem; }
      .services-preview__left { position:static; }
      .services-grid { grid-template-columns:1fr; }
      .work-grid { grid-template-columns:1fr; }
      .work-card--wide { grid-column:span 1; }
      .work-header { flex-direction:column; align-items:flex-start; gap:1rem; }
    }
    @media(max-width:640px) {
      .hero { padding:7rem 1.5rem 5rem; }
      .hero__visual { width:100%; max-width:340px; }
      .visual__tag { left:-15px; }
      .hero__stats { gap:1rem; }
      .cta-actions { flex-direction:column; }
      .services-preview,.featured-work,.cta-strip { padding:5rem 0; }
    }
  
    /* Force nav links visible on desktop */
    @media(min-width:901px) {
      .nav__links { display:flex !important; }
      .nav__hamburger { display:none !important; }
    }

    /* ── Browser mockup screenshots ── */
    .browser-mock { width:100%; height:100%; display:flex; flex-direction:column; background:#0d0d1a; }
    [data-theme="light"] .browser-mock { background:#e8e8f0; }
    .browser-mock__bar {
      flex-shrink:0; height:28px; display:flex; align-items:center; gap:8px;
      padding:0 10px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07);
    }
    [data-theme="light"] .browser-mock__bar { background:rgba(0,0,0,.05); border-bottom-color:rgba(0,0,0,.08); }
    .browser-mock__dots { display:flex; gap:5px; flex-shrink:0; }
    .browser-mock__dots span { width:8px; height:8px; border-radius:50%; display:block; }
    .browser-mock__dots span:nth-child(1) { background:#ff5f57; }
    .browser-mock__dots span:nth-child(2) { background:#febc2e; }
    .browser-mock__dots span:nth-child(3) { background:#28c840; }
    .browser-mock__urlbar {
      flex:1; height:16px; border-radius:3px; font-family:var(--font-mono); font-size:9px;
      color:var(--text-muted); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
      display:flex; align-items:center; padding:0 6px; overflow:hidden; white-space:nowrap;
      text-overflow:ellipsis; max-width:240px;
    }
    [data-theme="light"] .browser-mock__urlbar { background:rgba(255,255,255,.7); border-color:rgba(0,0,0,.12); }
    .browser-mock__screen {
      flex:1; background-size:cover; background-position:top center; background-repeat:no-repeat;
      transition:transform .5s cubic-bezier(.22,1,.36,1); background-color:var(--surface);
    }
    .work-card:hover .browser-mock__screen { transform:scale(1.04); }
    .work-card--wide:hover .browser-mock__screen { transform:scale(1.02); }
    .browser-mock__screen.loading::after {
      content:''; display:block; width:28px; height:28px; margin:35% auto;
      border:2px solid var(--border); border-top-color:var(--orange);
      border-radius:50%; animation:spin .8s linear infinite;
    }
    @keyframes spin { to { transform:rotate(360deg); } }