/* ===================================================
     BASE
  =================================================== */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  :root{
    --bg:#000000;--bg2:rgba(28, 28, 30, 0.45);--bg3:rgba(44, 44, 46, 0.6);--bg4:rgba(58, 58, 60, 0.7);
    --purple:#BF5AF2;--purple-dim:#9B51E0;--purple-glow:rgba(191, 90, 242, 0.2);
    --green:#30D158;--green-dim:#24a840;--green-glow:rgba(48, 209, 88, 0.18);
    --pink:#FF375F;--cyan:#5AC8F5;--cyan-glow:rgba(90, 200, 245, 0.18);
    --text:#ffffff;--text-dim:rgba(255, 255, 255, 0.97);--text-muted:rgba(255, 255, 255, 0.88);
    --border:rgba(255, 255, 255, 0.1);--border-green:rgba(48, 209, 88, 0.2);--border-cyan:rgba(90, 200, 245, 0.2);
    --sw:240px;--sc:64px;--tr:.3s cubic-bezier(.4,0,.2,1);
    --fh:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --fc:var(--fh);
    --mac-blue:#007aff;
  }

  /* Relocated theme overrides block to bottom */
  html{scroll-behavior:smooth;width:100%;max-width:100%;overflow-x:hidden}
  body{background:var(--bg);color:var(--text);font-family:var(--fc);font-size:15px;line-height:1.6;min-height:100vh;overflow-x:hidden;width:100%;max-width:100%;overflow-wrap:break-word;word-wrap:break-word;letter-spacing:-0.01em;}
  body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
  img,video,iframe,embed,object,canvas,svg:not(:root){max-width:100%;height:auto}
  table{max-width:100%}
  pre,code{max-width:100%;overflow-x:auto;word-break:break-all}
  ::selection{background:var(--purple);color:#fff}
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: 
      radial-gradient(circle at 10% 20%, rgba(255, 159, 10, 0.18), transparent 45%),
      radial-gradient(circle at 90% 10%, rgba(191, 90, 242, 0.15), transparent 45%),
      radial-gradient(circle at 50% 80%, rgba(255, 45, 85, 0.14), transparent 50%),
      radial-gradient(circle at 80% 90%, rgba(10, 132, 255, 0.15), transparent 45%),
      radial-gradient(circle at 5% 75%, rgba(50, 215, 75, 0.08), transparent 40%);
    z-index: 0;
    pointer-events: none;
    animation: drift 25s ease-in-out infinite alternate;
  }
  @keyframes drift {
    0% { transform: scale(1) translate(0px, 0px); }
    50% { transform: scale(1.08) translate(-1%, 2%); }
    100% { transform: scale(1.15) translate(1%, -1%); }
  }
  @keyframes appleFadeIn {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* ===================================================
     LAYOUT
  =================================================== */
  #app{display:flex;min-height:100vh;position:relative;z-index:3;width:100%;max-width:100%;overflow-x:hidden}

  /* ===================================================
     TOP HEADER (UNIFIED)
  =================================================== */
  #top-header { position: fixed; top: 0; left: 0; right: 0; height: 64px; background: rgba(28, 28, 30, 0.45); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-bottom: 1px solid rgba(255,255,255,0.08); z-index: 9999; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; transition: all 0.3s ease; }
  .header-footer-bar { display: flex; align-items: center; gap: 8px; }
  .header-legal-links{display:flex;align-items:center;gap:5px;margin-right:4px}
  .header-legal-link{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);color:var(--text-dim);border-radius:7px;padding:5px 8px;font:700 10px/1 var(--fc);letter-spacing:.03em;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
  .header-legal-link:hover{background:rgba(10,132,255,.16);border-color:rgba(100,210,255,.4);color:#fff}
  @media (max-width: 900px) {
    .header-footer-bar { display: none; }
    .header-legal-links { display:none; }
  }
  .mac-status-bar { display: flex; align-items: center; gap: 16px; font-family: var(--fh); font-size: 14px; font-weight: 600; color: #fff; }
  #mac-clock{min-width:86px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  #bottom-footer { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px 16px 140px; flex-wrap: wrap; }

  .top-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .top-brand img { width: 40px; height: 40px; border-radius: 6px; }
  .top-brand .tb-text { font-family: var(--fh); font-size: 16px; font-weight: 900; letter-spacing: 0.16em; color: #fff; }
  .top-brand .tb-sub { font-family: var(--fc); font-size: 9px; color: var(--green); letter-spacing: 0.2em; display: block; margin-top: 2px; }

  .mac-dock { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; padding: 12px 18px; background: rgba(28, 28, 30, 0.45); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; z-index: 9999; box-shadow: 0 12px 50px rgba(0,0,0,0.6); transition: all 0.3s ease; }
  .mac-dock:hover { border-color: rgba(183,0,255,0.4); box-shadow: 0 0 24px var(--purple-glow); }
  
  .mac-item { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--icon-grad, rgba(255,255,255,0.04)); color: #fff; text-decoration: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s, box-shadow 0.2s; transform-origin: bottom center; box-shadow: 0 2px 12px var(--icon-glow, transparent), inset 0 0.5px 0 rgba(255,255,255,0.25); }
  .mac-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 52%; background: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.12) 40%, transparent 100%); pointer-events: none; z-index: 1; border-radius: 14px 14px 0 0; }
  .mac-dock.magnifying .mac-item {
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
  }
  .mac-item:hover { transform: scale(1.35) translateY(-10px); z-index: 10; filter: brightness(1.25); border: 1px solid rgba(255,255,255,0.35); }
  .mac-item.active { filter: brightness(1.1); border: 1.5px solid rgba(255,255,255,0.5); box-shadow: 0 2px 16px var(--icon-glow, transparent), inset 0 0.5px 0 rgba(255,255,255,0.25), 0 0 20px var(--icon-glow, transparent); }
  .mac-item.active::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; }
  
  .mac-item svg { width: 22px; height: 22px; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: filter 0.2s; position: relative; z-index: 2; }
  .mac-item:hover svg { filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)); }
  .mac-item.active svg { filter: drop-shadow(0 0 6px rgba(255,255,255,0.5)); }
  
  .mac-label { position: absolute; top: -40px; background: rgba(0,0,0,0.85); color: #fff; padding: 6px 12px; border-radius: 6px; font-family: var(--fc); font-size: 10px; letter-spacing: 0.1em; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; transform: translateY(8px); white-space: nowrap; border: 1px solid rgba(255,255,255,0.1); font-weight: 500; }
  .mac-label-short{display:none}
  .mac-item:hover .mac-label { opacity: 1; transform: translateY(0); }
  .mac-item.has-sub:hover .mac-label { display: none !important; }
  .mac-dock.submenu-active .mac-label { opacity: 0 !important; pointer-events: none !important; }
  
  .dock-sub-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(28, 28, 30, 0.82);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1.5px solid rgba(191, 90, 242, 0.4);
    border-radius: 16px;
    padding: 8px 12px;
    width: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 15px 50px rgba(0,0,0,0.6), 0 0 20px rgba(191, 90, 242, 0.2);
    z-index: 10000;
    margin-bottom: 8px;
  }
  .dock-sub-menu::before {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 16px;
    background: transparent;
    pointer-events: all;
  }
  @media (max-width: 900px) {
    .dock-sub-menu { display: none !important; }
  }
  .mac-item:hover .dock-sub-menu,
  .dock-sub-menu:hover {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
  }
  .dsm-header {
    display: none;
  }
  .dsm-list {
    display: flex;
    flex-direction: row;
    gap: 4px;
  }
  .dsm-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    color: rgba(255,255,255,0.7);
    font-family: var(--fh);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .dsm-item:hover {
    background: var(--hover-bg);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 12px var(--glow-color);
  }
  .dsm-item:hover .dsm-dot {
    box-shadow: 0 0 8px var(--glow-color);
  }
  .dsm-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  #overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:99;backdrop-filter:blur(4px)}
  #mheader{display:none;position:fixed;top:0;left:0;right:0;height:68px;background:rgba(10,10,12,.95);border-bottom:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:102;align-items:center;justify-content:space-between;padding:0 16px}
  .mh-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
  .mh-logo-icon{width:30px;height:30px;border-radius:4px;object-fit:cover}
  .mh-text{display:flex;flex-direction:column}
  .mh-title{font-family:var(--fh);font-weight:700;font-size:14px;color:#fff;letter-spacing:.05em}
  .mh-sub{font-size:8px;color:var(--green);font-family:var(--fc);letter-spacing:.1em;text-transform:uppercase}
  #mtoggle{display:none;width:42px;height:42px;background:rgba(22,22,31,.95);border:1.5px solid var(--purple);box-shadow:0 0 10px var(--purple-glow);border-radius:6px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;transition:background .2s,border-color .2s,box-shadow .2s}
  #mtoggle:hover,#mtoggle:active{background:var(--purple);border-color:#fff;box-shadow:0 0 15px var(--purple)}
  .hline{width:20px;height:2px;background:#fff;border-radius:1px;transition:all .3s}

  /* ===================================================
     MAIN
  =================================================== */
  #main{margin-left:var(--sw);flex:1;min-height:100vh;transition:margin-left var(--tr);padding:0;max-width:100%;overflow-x:hidden;overflow-wrap:break-word;word-wrap:break-word}
  #main.sc{margin-left:var(--sc)}
  .pw{max-width:1100px;margin:0 auto;padding:44px 36px 80px;overflow-x:hidden}

  /* ===================================================
     PAGE HEADER
  =================================================== */
  .ph{margin-bottom:44px;padding-bottom:22px;border-bottom:1px solid var(--border);position:relative}
  .ph::after{content:'';position:absolute;bottom:-1px;left:0;width:80px;height:2px;background:var(--purple);box-shadow:0 0 12px var(--purple-glow)}
  .ph-bc{font-size:11px;letter-spacing:.05em;color:var(--text-muted);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px;opacity:0.9;}
  .ph-bc span{color:var(--text-dim);opacity:0.5;}
  .ph-bc a{display:inline-flex;align-items:center;min-height:30px;margin:-5px -6px;padding:5px 7px;border-radius:8px;color:var(--text-muted);text-decoration:none;transition:color .2s,background .2s,box-shadow .2s}
  .ph-bc a:hover{color:#64d2ff;background:rgba(100,210,255,.09)}
  .ph-bc a:focus-visible{outline:0;color:#fff;background:rgba(10,132,255,.22);box-shadow:0 0 0 3px rgba(100,210,255,.3)}
  .ph-bc a[aria-current="page"]{color:var(--text-dim)}
  .ph-bc .ph-bc-sep{pointer-events:none;user-select:none}
  .ph-title{font-family:var(--fh);font-size:clamp(27px,3.6vw,44px);font-weight:800;line-height:1.08;letter-spacing:-0.02em;color:#fff;background:linear-gradient(135deg, #ffffff 0%, #a0a0a5 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;min-width:0;flex:1;}
  .ph-sub{font-family:var(--fc);font-size:14px;color:var(--text-muted);margin-top:10px;letter-spacing:0;}

  /* ===================================================
     GLITCH (REMOVED - Kept classes for HTML compatibility)
  =================================================== */
  .glitch{position:relative;display:inline-block}
  .glitch::before,.glitch::after{display:none;}
  
  /* ===================================================
     CARDS (FROSTED GLASS)
  =================================================== */
  .tc{background:rgba(255,255,255,0.03);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s;box-shadow:0 8px 32px rgba(0,0,0,0.2);}
  .tc::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.05) 0%,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
  .tc:hover{border-color:rgba(255,255,255,0.15);box-shadow:0 12px 40px rgba(0,0,0,0.4);transform:translateY(-4px)}
  .tc:hover::before{opacity:1}
  .tc.gv{border-color:rgba(50,215,75,0.2)}
  .tc.gv:hover{border-color:var(--green);box-shadow:0 12px 40px rgba(50,215,75,0.15)}
  .tc.cv{border-color:rgba(100,210,255,0.2)}
  .tc.cv:hover{border-color:var(--cyan);box-shadow:0 12px 40px rgba(100,210,255,0.15)}
  .th{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.02)}
  .dot{width:10px;height:10px;border-radius:50%}
  .dr{background:#ff5f57;box-shadow:0 0 8px rgba(255,95,87,0.4)}.dy{background:#febc2e;box-shadow:0 0 8px rgba(254,188,46,0.4)}.dg{background:#28c840;box-shadow:0 0 8px rgba(40,200,64,0.4)}
  .tt{font-size:10px;letter-spacing:.05em;color:var(--text-muted);margin-left:4px;font-family:var(--fc);font-weight:500;}
  .tb{padding:24px}

  /* ===================================================
     FLIP CLOCK (Fliqlo Style)
  =================================================== */
  .fc-wrapper { display:flex; flex-direction:column; gap:6px; align-items:center; margin-bottom:24px; width:100%; }
  .fc-home-header { width:270px; min-width:270px; flex:0 0 270px; margin-bottom: 0 !important; }
  @media (max-width: 900px) {
    .fc-home-header { display: none !important; }
  }
  .fc-top { display:flex; justify-content:center; width:100%; max-width:270px; font-family:var(--fh); font-size:14px; font-weight:700; color:#fff; padding:0 8px; margin-bottom: 6px; letter-spacing:-0.02em; }
  .fc-top span { opacity: 0.8; }
  .fc-cards { display:flex; gap:12px; }
  .flip-card { position:relative; background:#18181a; border-radius:12px; width:82px; min-width:82px; height:94px; display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-size:64px; font-weight:700; font-variant-numeric:tabular-nums; color:#fff; letter-spacing:-0.02em; box-shadow:0 8px 24px rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.05); overflow:hidden; }
  .flip-card::after { content:''; position:absolute; top:50%; left:0; right:0; height:2px; background:#000; margin-top:-1px; z-index:2; box-shadow:0 1px 2px rgba(255,255,255,0.05); }
  .flip-card span { position:relative; z-index:1; }
  
  .fc-mini { transform: scale(0.45); transform-origin: right center; margin-bottom: 0 !important; }

  /* ===================================================
     BUTTONS
  =================================================== */
  .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:0;text-decoration:none;padding:12px 20px;border-radius:12px;cursor:pointer;border:none;transition:all .25s;position:relative;overflow:hidden;backdrop-filter:blur(10px);}
  .btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.1);opacity:0;transition:opacity .2s}
  .btn:hover::after{opacity:1}
  .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
  .btn-p{background:var(--purple);color:#fff;box-shadow:0 8px 24px rgba(94,92,230,0.3)}
  .btn-p:hover{box-shadow:0 12px 32px rgba(94,92,230,0.5); transform:translateY(-2px)}
  .btn-g{background:var(--green);color:#000;box-shadow:0 8px 24px rgba(50,215,75,0.3)}
  .btn-g:hover{box-shadow:0 12px 32px rgba(50,215,75,0.5); transform:translateY(-2px)}
  .btn-c{background:var(--cyan);color:#000;box-shadow:0 8px 24px rgba(100,210,255,0.3)}
  .btn-c:hover{box-shadow:0 12px 32px rgba(100,210,255,0.5); transform:translateY(-2px)}
  .btn-ghost{background:rgba(255,255,255,0.05);color:var(--text);border:1px solid rgba(255,255,255,0.15)}
  .btn-ghost:hover{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.3); transform:translateY(-2px)}

  /* ===================================================
     ANIMATIONS
  =================================================== */
  @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 8px var(--green)}50%{opacity:.4;box-shadow:0 0 2px var(--green)}}
  @keyframes slideIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  @keyframes neonP{0%,100%{text-shadow:0 0 10px currentColor,0 0 20px currentColor}50%{text-shadow:0 0 4px currentColor}}
  @keyframes blink{0%,50%{border-color:var(--green)}51%,100%{border-color:transparent}}
  @keyframes marqueeL{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  @keyframes marqueeR{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
  .animate-in{animation:slideIn .55s ease forwards}
  .np{color:var(--purple);text-shadow:0 0 10px var(--purple),0 0 20px var(--purple-dim);animation:neonP 3s ease-in-out infinite}
  .ng{color:var(--green);text-shadow:0 0 10px var(--green),0 0 20px var(--green-dim)}
  .nc2{color:var(--cyan);text-shadow:0 0 10px var(--cyan)}

  /* ===================================================
     STATS
  =================================================== */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:28px 0}
  .stat{padding:18px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;text-align:center;position:relative;overflow:hidden}
  .stat::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--purple),var(--green));box-shadow:0 0 8px var(--purple)}
  .sv{font-family:var(--fh);font-size:30px;font-weight:900;color:#fff;line-height:1;margin-bottom:5px}
  .sl{font-size:9px;letter-spacing:.2em;color:var(--text-muted);text-transform:uppercase}

  /* ===================================================
     SECTION LABEL
  =================================================== */
  .sec-lbl{font-size:9px;letter-spacing:.3em;color:var(--text-muted);text-transform:uppercase;margin-bottom:22px;display:flex;align-items:center;gap:10px}
  .sec-lbl::before{content:'';width:22px;height:1px;background:var(--purple);box-shadow:0 0 8px var(--purple)}

  /* ===================================================
     CODE BLOCK
  =================================================== */
  .cb{background:rgba(0,0,0,.45);border:1px solid var(--border);border-radius:4px;padding:18px;font-family:var(--fc);font-size:11.5px;color:var(--text-dim);line-height:2;position:relative;overflow-x:auto}
  .cb .kw{color:var(--purple)} .cb .str{color:var(--green)} .cb .num{color:var(--cyan)} .cb .cmt{color:var(--text-muted);font-style:italic} .cb .fn{color:#ffd700}

  /* ===================================================
     MARQUEE / CLIENT STRIP
  =================================================== */
  .marquee-wrap{overflow:hidden;position:relative;margin:8px 0}
  .marquee-wrap::before,.marquee-wrap::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
  .marquee-wrap::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
  .marquee-wrap::after{right:0;background:linear-gradient(-90deg,var(--bg2),transparent)}
  .marquee-inner{display:flex;gap:0;width:max-content;animation:marqueeL 30s linear infinite}
  .marquee-inner.rev{animation:marqueeR 30s linear infinite}
  .client-chip{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:3px;margin:0 6px;font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--text-dim);white-space:nowrap;text-decoration:none;transition:border-color .2s,color .2s}
  .client-chip:hover{border-color:var(--purple);color:var(--purple)}
  .client-chip img{width:16px;height:16px;border-radius:2px;opacity:.7}

  /* ===================================================
     SERVICES GRID
  =================================================== */
  .services-grid{display:flex;flex-direction:column;gap:24px;margin-top:28px}
  .services-grid .tc{display:flex;flex-direction:column}
  .services-grid .tb{display:grid;grid-template-columns:220px 1fr;gap:24px;flex:1}
  @media(max-width:768px){
    .services-grid .tb{grid-template-columns:1fr;gap:16px}
  }

  .s-icon{width:44px;height:44px;border-radius:4px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .s-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .ip{background:var(--purple-glow)} .ig{background:var(--green-glow)} .ic{background:rgba(0,229,255,.12)} .ik{background:rgba(255,32,121,.12)}
  .s-name{font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:8px}
  .stag{font-size:8px;letter-spacing:.2em;text-transform:uppercase;padding:2px 8px;border-radius:2px;margin-bottom:12px;display:inline-block}
  .tag-purple{background:var(--purple-glow);color:var(--purple);border:1px solid rgba(183,0,255,.3)}
  .tag-green{background:var(--green-glow);color:var(--green);border:1px solid rgba(0,255,159,.3)}
  .tag-cyan{background:rgba(0,229,255,.08);color:var(--cyan);border:1px solid rgba(0,229,255,.2)}
  .s-desc{font-size:12px;color:var(--text-dim);line-height:1.8;margin-bottom:16px}
  .feat-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:14px}
  .feat-list li{font-size:10.5px;color:var(--text-dim);padding:5px 8px;background:var(--bg3);border-radius:3px;display:flex;align-items:center;gap:6px}
  .feat-list li::before{content:'//';color:var(--green);font-weight:700;font-size:9px;flex-shrink:0}
  .tech-stack{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
  .tp{font-family:var(--fc);font-size:9px;padding:2px 8px;border:1px solid var(--border);border-radius:2px;color:var(--text-dim);background:var(--bg);letter-spacing:.05em}
  .tp.a{border-color:var(--green);color:var(--green)}

  /* ===================================================
     PROJECTS GRID
  =================================================== */
  .proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:28px}
  .proj-card{border-radius:6px;text-decoration:none;display:block}
  .proj-img{height:100px;position:relative;overflow:hidden;border-radius:4px 4px 0 0;display:flex;align-items:center;justify-content:center}
  .proj-badge{position:absolute;top:10px;right:10px;font-size:8px;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15);border-radius:2px;color:#fff;backdrop-filter:blur(4px)}
  .proj-initials{font-family:var(--fh);font-size:28px;font-weight:900}
  .proj-emoji{font-size:28px;margin-bottom:4px}
  .proj-body{padding:18px}
  .proj-cat{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
  .proj-name{font-family:var(--fh);font-size:13px;font-weight:700;color:#fff;letter-spacing:.08em;margin-bottom:8px}
  .proj-desc{font-size:11px;color:var(--text-dim);line-height:1.7;margin-bottom:12px}
  .proj-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border)}
  .proj-platform{font-size:9px;color:var(--text-muted);letter-spacing:.1em}

  /* ===================================================
     PROCESS
  =================================================== */
  .proc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
  .proc-item{padding:38px 20px 20px;background:var(--bg2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:16px;position:relative;overflow:hidden;opacity:1;transform:none;transition:opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s, background 0.3s;box-shadow:0 8px 32px rgba(0,0,0,0.25)}
  .process-reveal-ready .proc-item{opacity:0;transform:translateY(30px) scale(0.96)}
  .proc-item.revealed{opacity:1;transform:translateY(0) scale(1)}
  .proc-item::before{content:'';position:absolute;top:14px;left:14px;width:8px;height:8px;border-radius:50%;background:#ff5f57;box-shadow:12px 0 0 #febc2e, 24px 0 0 #28c840;z-index:2}
  .proc-item::after{content:'';position:absolute;top:0;left:-150%;width:60%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);transform:skewX(-25deg);pointer-events:none;z-index:1}
  .proc-item.revealed:hover::after{left:150%;transition:left 0.75s ease-in-out}
  .proc-num{position:absolute;top:10px;right:16px;font-family:var(--fh);font-size:12px;font-weight:800;color:var(--purple);letter-spacing:.05em;line-height:1;background:rgba(191,90,242,.1);padding:3px 8px;border-radius:6px;border:1px solid rgba(191,90,242,.15);z-index:2}
  .proc-title{font-size:12px;font-weight:600;color:#fff;margin-bottom:6px;letter-spacing:.05em}
  .proc-desc{font-size:12px;color:var(--text-muted);line-height:1.6}
  .proc-item.revealed:hover{transform:translateY(-6px) scale(1.02);border-color:rgba(191,90,242,0.35);box-shadow:0 16px 48px rgba(0,0,0,0.45),0 0 24px rgba(191,90,242,0.25);background:rgba(28,28,30,0.55)}
  @media(max-width:900px){
    .proc-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  }

  /* ===================================================
     BLOG GRID
  =================================================== */
  .blog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 28px;padding:12px;border:1px solid var(--mac-stroke);border-radius:16px;background:rgba(255,255,255,.035);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .blog-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0}
  .bf{display:inline-flex;align-items:center;text-decoration:none;font-family:var(--fc);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:3px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-muted);transition:all .2s}
  .bf:hover{border-color:var(--purple);color:var(--purple)}
  .bf.active{border-color:var(--green);color:var(--green);background:var(--green-glow)}
  .blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .blog-card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;text-decoration:none;display:flex;flex-direction:column;transition:border-color .25s,box-shadow .25s,transform .25s;overflow:hidden}
  .blog-card:hover{border-color:var(--purple);box-shadow:0 0 20px var(--purple-glow);transform:translateY(-3px)}
  .hidden{display:none!important}
  .mac-widget{padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;transition:border-color .25s,box-shadow .25s}
  .mac-widget:hover{border-color:rgba(255,255,255,0.18);box-shadow:0 8px 32px rgba(0,0,0,0.3)}
  .home-content{display:flex;flex-direction:column}
  .home-content>.stats{order:1;margin-top:0;margin-bottom:32px}
  .home-content>.hero-grid{order:2}
  .widget-section-status{order:0;display:flex;align-items:center;gap:9px;margin:0 0 13px;color:#64d2ff;font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
  .widget-section-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#30d158;box-shadow:0 0 12px rgba(48,209,88,.72);animation:widgetBeacon 1.8s ease-in-out infinite}
  .weather-location-btn{appearance:none;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.16);color:#fff;border-radius:999px;padding:6px 10px;font:700 10px/1 var(--fh);cursor:pointer}
  .weather-location-btn:hover,.weather-location-btn:focus-visible{background:rgba(255,255,255,.26);border-color:#fff;outline:none}
  .weather-location-btn:disabled{cursor:wait;opacity:.82}
  .blog-card.hidden{display:none!important}
  .blog-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin:32px 0 8px;flex-wrap:wrap}
  .blog-page-link{min-width:40px;height:40px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--mac-stroke);border-radius:10px;background:rgba(255,255,255,.055);color:var(--text-dim);font-weight:750;font-size:12px;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
  .blog-page-link:hover{background:rgba(10,132,255,.14);border-color:rgba(100,210,255,.38);transform:translateY(-1px)}
  .blog-page-link.active{background:#0066cc;border-color:#268cff;color:#fff;box-shadow:0 8px 22px rgba(0,102,204,.28)}
  .blog-page-link.disabled{opacity:.42;pointer-events:none}
  .blog-count{flex:0 0 auto;color:var(--text-muted);font-size:12px;white-space:nowrap;padding:0 8px}
  .blog-count strong{color:var(--text);font-size:15px}
  .blog-count span{margin:0 4px;color:var(--text-muted)}
  .bc-img{height:108px;display:flex;align-items:center;justify-content:center;font-size:38px;background:linear-gradient(145deg,rgba(100,210,255,.09),rgba(191,90,242,.08));border-bottom:1px solid var(--border)}
  .bc-body{padding:16px;flex:1;display:flex;flex-direction:column}
  .bc-cat{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px;font-family:var(--fh);font-weight:750}
  .bc-title{font-size:17px;font-weight:700;color:#fff;line-height:1.4;margin-bottom:10px;letter-spacing:-.015em}
  .bc-excerpt{font-size:13px;color:var(--text-muted);line-height:1.7;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .bc-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
  .bc-read{font-size:9px;color:var(--text-muted);letter-spacing:.1em}
  .bc-open{display:inline-flex;align-items:center;gap:6px;color:#64d2ff;font-size:11px;font-weight:750}
  .bc-open svg{transition:transform .2s ease}
  .blog-card:hover .bc-open svg{transform:translateX(3px)}
  .featured-card{display:grid;grid-template-columns:1fr 1fr;background:var(--bg2);border:1px solid var(--border-cyan);border-radius:6px;text-decoration:none;margin-bottom:28px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
  .featured-card:hover{border-color:var(--cyan);box-shadow:0 0 24px var(--cyan-glow)}
  .fc-img{min-height:200px;display:flex;align-items:center;justify-content:center;font-size:64px}
  .fc-body{padding:28px;display:flex;flex-direction:column;justify-content:center;gap:12px}
  .fc-badge{font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);background:rgba(0,229,255,.08);border:1px solid var(--border-cyan);padding:2px 10px;border-radius:100px;width:fit-content}
  .fc-title{font-family:var(--fh);font-size:16px;font-weight:700;color:#fff;letter-spacing:.05em;line-height:1.3}
  .fc-desc{font-size:12px;color:var(--text-dim);line-height:1.7}
  .fc-link{color:var(--cyan);font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
  .fc-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

  /* ===================================================
     CONTACT FORM
  =================================================== */
  .contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
  .fg{margin-bottom:17px}
  .fl{display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);margin-bottom:7px;font-family:var(--fc)}
  .fl .req{color:var(--purple)}
  .fi,.fs,.ft{width:100%;background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:var(--fc);font-size:13px;padding:11px 14px;transition:border-color .2s,box-shadow .2s;outline:none;resize:none}
  .fs{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b6b8a' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
  .fs option{background:#111}
  .fi:focus,.fs:focus,.ft:focus{border-color:var(--green);box-shadow:0 0 12px var(--green-glow);color:#fff}
  .fi::placeholder,.ft::placeholder{color:var(--text-muted)}
  .ft{min-height:110px;line-height:1.7}
  .fsubmit{width:100%;padding:13px;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;border:none;border-radius:3px;background:transparent;color:var(--green);border:1px solid var(--green);box-shadow:0 0 14px var(--green-glow);transition:all .25s;display:flex;align-items:center;justify-content:center;gap:10px}
  .fsubmit svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .fsubmit:hover{background:var(--green);color:#000;box-shadow:0 0 28px var(--green)}
  .fsubmit:active{transform:scale(.98)}
  .fcb{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:var(--text-muted);cursor:pointer;line-height:1.6}
  .form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
  .fcb input{margin-top:2px;accent-color:var(--green);flex-shrink:0}
  .fcb a{color:var(--green);text-decoration:none}
  .fcb a:hover{text-decoration:underline}
  .alert{padding:13px 16px;border-radius:3px;font-size:11px;letter-spacing:.07em;margin-bottom:18px;font-family:var(--fc);display:flex;align-items:flex-start;gap:9px;line-height:1.6}
  .alert svg{flex-shrink:0;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2;width:16px;height:16px}
  .al-ok{background:rgba(0,255,159,.06);border:1px solid var(--green);color:var(--green)}
  .al-err{background:rgba(255,32,121,.06);border:1px solid var(--pink);color:var(--pink)}
  .ci-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px}
  .ci-item:last-child{border-bottom:none}
  .ci-icon{width:34px;height:34px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .ci-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round}
  .ci-lbl{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
  .ci-val{color:var(--text);font-family:var(--fc);font-size:12px}

  /* ===================================================
     ABOUT
  =================================================== */
  .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:28px}
  .t-card{padding:22px;text-align:center}
  .t-avatar{width:60px;height:60px;border-radius:4px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-family:var(--fh);font-size:18px;font-weight:900;position:relative;overflow:hidden}
  .t-avatar::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--purple-glow),transparent)}
  .t-name{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.12em;color:#fff;text-transform:uppercase;margin-bottom:4px}
  .t-role{font-size:9px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px}
  .t-skills{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
  .sk{font-size:8px;padding:2px 6px;background:var(--bg);border:1px solid var(--border);border-radius:2px;color:var(--text-muted);letter-spacing:.05em}
  .principle-list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
  .principle-list li{padding:9px 14px;background:var(--bg3);border-left:2px solid var(--purple);font-size:11.5px;color:var(--text-dim);border-radius:0 3px 3px 0;display:flex;align-items:center;gap:9px}
  .principle-list li::before{content:'//';color:var(--purple);font-weight:700;font-size:9px;flex-shrink:0}
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:28px}

  /* ===================================================
     FOOTER BAR (TOP INFO BAR)
  =================================================== */
  .footer-bar{display:flex;align-items:center;gap:6px;}
  .f-cap{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);font-family:var(--fc);font-size:10px}
  .f-cap span{font-size:9px!important;letter-spacing:.08em!important;line-height:1}
  .f-cap-purple{border-color:rgba(183,0,255,.65);background:rgba(183,0,255,.07)}
  .f-cap-purple span{color:#ffffff!important}
  .f-cap-green{border-color:rgba(0,255,159,.65);background:rgba(0,255,159,.07)}
  .f-cap-green span{color:var(--green)!important;text-shadow:0 0 6px rgba(0,255,159,.4)}
  .f-cap-cyan{border-color:rgba(0,229,255,.7);background:rgba(0,229,255,.08)}
  .f-cap-cyan span{color:#00ffcc!important;text-shadow:0 0 8px rgba(0,255,204,0.6)!important;font-weight:700}
  .f-cap-neon-green{border-color:rgba(57,255,20,.7);background:rgba(57,255,20,.08)}
  .f-cap-neon-green span{color:#39ff14!important;text-shadow:0 0 8px rgba(57,255,20,0.6)!important;font-weight:700}
  .f-cap-link{border-color:rgba(183,0,255,.65);background:rgba(10,10,14,.9);transition:border-color .2s,box-shadow .2s,background .2s;cursor:pointer}
  .f-cap-link:hover{border-color:var(--cyan);background:rgba(0,229,255,.12);box-shadow:0 0 8px rgba(0,229,255,.35)}
  .f-cap-link a{color:#ffffff;text-decoration:none;display:block;width:100%;height:100%;line-height:16px;font-size:9px;letter-spacing:.08em}
  .f-cap-link:hover a{color:var(--cyan)}
  #f-copyright{margin-left:auto;}
  @media(max-width:768px){ #f-copyright{order:-1;margin-left:0;} }

  /* ===================================================
     HERO TYPOGRAPHY
  =================================================== */
  .typing-line{font-family:var(--fh);font-size:14px;color:var(--text-muted);margin:20px 0;display:flex;align-items:center;gap:8px;font-weight:500;}
  .cursor{display:none;}
  .hero-slogan{font-family:var(--fc);font-size:clamp(15px,2vw,18px);color:var(--text-muted);margin:18px 0 28px;padding-left:16px;border-left:3px solid var(--purple);max-width:640px;line-height:1.7;font-weight:400;}
  .hero-slogan strong{color:#fff;font-weight:600}
  .hero-overline{font-size:11px;letter-spacing:.2em;color:var(--purple);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px;font-weight:600;}
  .hero-overline::before{content:'';width:12px;height:2px;background:var(--purple);}
  .hero-title{font-family:var(--fh);font-size:clamp(36px,6vw,72px);font-weight:900;color:#fff;line-height:1.05;letter-spacing:-0.03em;margin-bottom:12px}
  .hero-title .ap{background:linear-gradient(135deg, #5E5CE6, #64D2FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
  .hero-title .ag{background:linear-gradient(135deg, #32D74B, #00c97a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
  .hero-actions{display:flex;gap:12px;flex-wrap:nowrap;margin-top:20px;width:100%;}
  .hero-actions .btn{flex:1;justify-content:center;padding:14px 24px;font-size:12px;letter-spacing:0;white-space:nowrap;}

  /* ===================================================
     DIVIDER
  =================================================== */
  .divider{border:none;border-top:1px solid var(--border);margin:28px 0;position:relative}
  .divider::before{content:attr(data-label);position:absolute;top:-9px;left:20px;font-size:8px;letter-spacing:.15em;color:var(--text-muted);background:var(--bg2);padding:0 9px;text-transform:uppercase}
  .hero-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:40px;align-items:center;margin-bottom:30px}
  .hero-left, .hero-right{min-width:0;}
  @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:20px;} .hero-right{display:none;} }

  /* ===================================================
     SCROLLBAR
  =================================================== */
  ::-webkit-scrollbar{width:4px;height:4px}
  ::-webkit-scrollbar-track{background:var(--bg)}
  ::-webkit-scrollbar-thumb{background:var(--purple-dim);border-radius:2px}

  /* ===================================================
     RESPONSIVE & MAIN LAYOUT
  =================================================== */
  #main{width:100%;max-width:100%;margin-left:0;padding-bottom:120px;}
  .pw{padding:100px 40px 70px;max-width:1200px;margin:0 auto;overflow-x:hidden;}
  
  @media(max-width:900px){
    #top-header { height: 60px; flex-direction: row; padding: 0 16px; gap: 0; }
    .mac-status-bar { font-size: 12px; gap: 8px; }
    #mac-date { display: none; }
    .pw{padding:110px 16px 140px;}
    .top-brand { gap: 8px; }
    .top-brand img { width: 30px; height: 30px; }
    .top-brand .tb-text { font-size: 14px; }
    .top-brand .tb-sub { display: none; }
    .mac-dock { width: calc(100% - 24px); max-width: 420px; gap: 6px; padding: 6px 10px; bottom: 12px; }
    .mac-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto; height: auto; flex: 1; padding: 6px 0 4px; background: none !important; border: none !important; border-radius: 0; gap: 2px; box-shadow: none !important; }
    .mac-item::before { display: none !important; }
    .mac-item:hover { transform: translateY(-2px); background: none !important; border: none !important; box-shadow: none !important; filter: none !important; }
    .mac-item.active::after { display: none; }
    .mac-item svg { width: 34px; height: 34px; padding:7px; border-radius:9px; background:var(--icon-grad); box-shadow:0 5px 14px var(--icon-glow),inset 0 1px 0 rgba(255,255,255,.32); }
    .mac-label { position: static; opacity: 1; pointer-events: auto; transform: none; background: none; border: none; padding: 0; margin-top: 2px; font-size: 8px; color: var(--text-muted); letter-spacing: 0.05em; font-weight: 600; display: block !important; }
    .mac-item.active .mac-label { color: var(--green); text-shadow: 0 0 6px rgba(48, 209, 88, 0.4); }
    .mac-item:hover .mac-label { color: var(--purple); }
    .mac-item.has-sub:hover .mac-label { display: block !important; }
    .contact-grid,.about-grid,.featured-card{grid-template-columns:1fr}
    .feat-list{grid-template-columns:1fr}
    #bottom-footer{padding:24px 16px 140px;}
    .f-cap{margin:0!important;justify-content:center;text-align:center;height:auto!important;padding:8px 4px!important;border-radius:4px;}
    .f-cap-purple, .f-cap-green{width:100%}
    .f-cap-cyan, .f-cap-neon-green{width:calc(50% - 6px)}
    .f-cap-link{width:calc(33.333% - 8px);padding:0!important}
    .f-cap-link a{display:flex;align-items:center;justify-content:center;padding:8px 0;height:auto!important}
    .hero-title{font-size:clamp(22px,7vw,42px)}
    .hero-slogan{padding-left:10px;font-size:clamp(11px,3vw,14px)}
    .cb{overflow-x:auto;max-width:100%}
    .btn{padding:11px 16px;font-size:9px;letter-spacing:.12em}
    .hero-actions{flex-direction:column;gap:10px}
    .hero-actions .btn{width:100%;justify-content:center}
  }
  @media(max-width:560px){
    .services-grid,.blog-grid,.proj-grid{grid-template-columns:1fr}
    .stats{grid-template-columns:1fr 1fr}
    .team-grid{grid-template-columns:1fr 1fr}
    .proc-row{grid-template-columns:1fr 1fr}
    .pw{padding:96px 12px 60px}
    .hero-title{font-size:clamp(20px,6.5vw,32px)}
  }
  @media(max-width:380px){
    .stats{grid-template-columns:1fr}
    .team-grid{grid-template-columns:1fr}
    .proc-row{grid-template-columns:1fr}
    .pw{padding:90px 10px 56px}
    .f-cap{font-size:8px!important}
    .footer-bar .f-cap-link{width:100%}
  }

  /* ===================================================
     BLOG DETAIL CONTENT
  =================================================== */
  .blog-content-body{font-size:15px;line-height:1.8;color:var(--text-dim)}
  .blog-content-body p{margin-bottom:20px}
  .blog-content-body h2,.blog-content-body h3,.blog-content-body h4{color:#fff;font-family:var(--fh);margin-top:30px;margin-bottom:15px;letter-spacing:.05em}
  .blog-content-body h2{font-size:20px;border-bottom:1px solid var(--border);padding-bottom:8px}
  .blog-content-body h3{font-size:17px}
  .blog-content-body ul,.blog-content-body ol{margin-left:20px;margin-bottom:20px}
  .blog-content-body li{margin-bottom:8px}
  .blog-content-body table{width:100%;border-collapse:collapse;margin:20px 0}
  .blog-content-body th,.blog-content-body td{padding:10px;border:1px solid var(--border);text-align:left}
  .blog-content-body th{background:rgba(255,255,255,.02);color:var(--green)}
  .blog-content-body a{color:var(--green);text-decoration:none;border-bottom:1px dashed var(--green)}
  .blog-content-body a:hover{color:var(--purple);border-bottom-color:var(--purple)}
  .blog-content-body img{max-width:100%;height:auto;border-radius:4px;border:1px solid var(--border);margin:15px 0}

  /* ===================================================
     SERVICE DETAIL CACHED CONTENT — Scoped Styles
  =================================================== */
  .blog-content-body section{margin:0;padding:0}
  .blog-content-body .page-hero{padding:0;margin-bottom:28px}
  .blog-content-body .container{max-width:100%;padding:0;margin:0;overflow-x:hidden}
  .blog-content-body .breadcrumb{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-muted);margin-bottom:16px;flex-wrap:wrap;font-family:var(--fc)}
  .blog-content-body .breadcrumb a{color:var(--green);text-decoration:none;border-bottom:none}
  .blog-content-body .breadcrumb a:hover{color:var(--cyan)}
  .blog-content-body .breadcrumb-sep{color:var(--purple);margin:0 2px}
  .blog-content-body .hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;background:var(--purple-glow);border:1px solid rgba(183,0,255,.3);border-radius:3px;color:var(--purple);font-family:var(--fc);margin-bottom:16px!important}
  .blog-content-body .hero-badge svg{stroke:var(--purple);width:14px;height:14px;flex-shrink:0}
  .blog-content-body .display-lg{font-family:var(--fh);font-size:clamp(20px,4vw,32px);font-weight:900;color:#fff;letter-spacing:.04em;line-height:1.15;margin-bottom:16px}
  .blog-content-body .display-md{font-family:var(--fh);font-size:clamp(16px,3.5vw,22px);font-weight:700;color:#fff;letter-spacing:.04em;line-height:1.2;margin-bottom:14px}
  .blog-content-body .text-gradient{background:linear-gradient(135deg,var(--purple),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .blog-content-body .text-secondary{color:var(--text-dim);font-size:12px;line-height:1.8}
  .blog-content-body .text-sm{font-size:11px}
  .blog-content-body .section{padding:24px 0;margin:0}
  .blog-content-body .section.bg-alt{background:rgba(255,255,255,.015);border-radius:6px;padding:24px 16px;margin:20px 0;border:1px solid var(--border)}
  .blog-content-body .section-header{text-align:center;margin-bottom:22px}
  .blog-content-body .section-label{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:10px;font-family:var(--fc)}
  .blog-content-body .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .blog-content-body .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
  .blog-content-body .glass-card{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:6px;padding:20px!important;backdrop-filter:blur(8px)}
  .blog-content-body .glass-card h3{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--cyan)!important;margin-bottom:14px;letter-spacing:.06em}
  .blog-content-body .glass-card ul{list-style:none!important;padding:0!important;margin:0!important}
  .blog-content-body .glass-card li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font-size:11px;color:var(--text-dim);line-height:1.7}
  .blog-content-body .glass-card li svg{flex-shrink:0;margin-top:2px}
  .blog-content-body .service-card{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:20px;transition:border-color .25s,box-shadow .25s}
  .blog-content-body .service-card:hover{border-color:var(--purple);box-shadow:0 0 16px var(--purple-glow)}
  .blog-content-body .service-card h3{font-family:var(--fh);font-size:12px;font-weight:700;color:#fff;letter-spacing:.08em;margin:12px 0 8px}
  .blog-content-body .service-card p{font-size:11px;color:var(--text-muted);line-height:1.7;margin-bottom:0}
  .blog-content-body .card-icon{width:42px;height:42px;border-radius:4px;display:flex;align-items:center;justify-content:center}
  .blog-content-body .card-icon.blue{background:rgba(0,229,255,.1);color:var(--cyan)}
  .blog-content-body .card-icon svg{width:20px;height:20px;stroke:currentColor;fill:none}
  .blog-content-body .tech-badge{display:inline-flex;align-items:center;padding:8px 14px!important;font-size:11px!important;font-family:var(--fc);letter-spacing:.06em;background:var(--bg3);border:1px solid var(--border);border-radius:3px;color:var(--text-dim);transition:border-color .2s,color .2s}
  .blog-content-body .tech-badge:hover{border-color:var(--cyan);color:var(--cyan)}
  .blog-content-body .btn-primary{background:transparent;color:var(--green);border:1px solid var(--green);box-shadow:0 0 14px var(--green-glow);font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:11px 24px;border-radius:3px;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer;transition:all .25s}
  .blog-content-body .btn-primary:hover{background:var(--green);color:#000;box-shadow:0 0 28px var(--green);border-bottom:none}
  .blog-content-body .btn-lg{padding:13px 28px;font-size:11px}
  .blog-content-body .card{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:20px}
  @media(max-width:900px){
    .blog-content-body .grid-2{grid-template-columns:1fr;gap:16px}
    .blog-content-body .grid-3{grid-template-columns:1fr;gap:14px}
    .blog-content-body .display-lg{font-size:clamp(18px,5vw,26px)}
    .blog-content-body .display-md{font-size:clamp(15px,4vw,20px)}
    .blog-content-body .glass-card{padding:16px!important}
    .blog-content-body .section.bg-alt{padding:18px 12px}
    .blog-content-body .hero-badge{font-size:9px;padding:5px 10px}
    .blog-content-body .btn-primary{width:100%;justify-content:center;padding:12px 16px}
    .blog-content-body .btn-lg{padding:12px 16px;font-size:10px}
    .blog-content-body .tech-badge{padding:6px 10px!important;font-size:10px!important}
    .blog-content-body .container{padding:0!important}
  }
  @media(max-width:560px){
    .blog-content-body .grid-3{grid-template-columns:1fr}
    .blog-content-body .display-lg{font-size:clamp(16px,5.5vw,22px)}
    .blog-content-body .hero-badge{font-size:8px;letter-spacing:.08em}
  }

  /* ===================================================
     FINDER — PROJECTS PAGE
  =================================================== */
  .finder-window{background:var(--bg2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:6px;overflow:hidden}
  .finder-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .finder-left{display:flex;align-items:center;gap:8px}
  .finder-toolbar{display:flex;align-items:center;gap:12px;flex:1}
  .finder-nav-arrows{display:flex;gap:4px}
  .finder-nav-btn{width:28px;height:28px;border:none;border-radius:4px;background:rgba(255,255,255,0.06);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
  .finder-nav-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .finder-nav-btn:hover:not(:disabled){background:rgba(255,255,255,0.12);color:#fff}
  .finder-nav-btn:disabled{opacity:0.3;cursor:default}
  .finder-view-selector{display:flex;gap:2px;background:rgba(255,255,255,0.05);border-radius:4px;padding:2px}
  .view-btn{width:28px;height:26px;border:none;border-radius:3px;background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
  .view-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round}
  .view-btn:hover{color:#fff}
  .view-btn.active{background:rgba(255,255,255,0.1);color:#fff}
  .finder-search{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:4px;padding:4px 10px;margin-left:auto;width:180px;transition:border-color 0.2s}
  .finder-search:focus-within{border-color:var(--purple)}
  .finder-search .search-icon{width:14px;height:14px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
  .finder-search input{background:transparent;border:none;outline:none;color:var(--text);font-family:var(--fc);font-size:11px;width:100%;padding:2px 0}
  .finder-search input::placeholder{color:var(--text-muted)}
  .finder-body{display:grid;grid-template-columns:160px 1fr;gap:0;min-height:400px}
  .finder-sidebar{background:rgba(255,255,255,0.02);border-right:1px solid var(--border);padding:12px 0}
  .sidebar-section{margin-bottom:16px}
  .sidebar-sec-title{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:4px 16px 8px;font-weight:700}
  .sidebar-list{list-style:none;padding:0;margin:0}
  .sidebar-item{display:flex;align-items:center;gap:8px;padding:6px 16px;cursor:pointer;transition:background 0.15s;color:var(--text-dim);font-size:12px;font-weight:500}
  .sidebar-item:hover{background:rgba(255,255,255,0.05);color:#fff}
  .sidebar-item.active{background:rgba(183,90,242,0.15);color:var(--purple);border-right:2px solid var(--purple)}
  .sidebar-icon{font-size:13px;width:20px;text-align:center;flex-shrink:0}
  .sidebar-label{white-space:nowrap}
  .finder-content-wrapper{overflow-y:auto;max-height:420px;padding:8px}
  .finder-view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;padding:8px}
  .finder-icon-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:6px;text-decoration:none;transition:background 0.15s;cursor:pointer}
  .finder-icon-item:hover{background:rgba(255,255,255,0.06)}
  .finder-app-icon{width:64px;height:64px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 4px 16px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2);position:relative;overflow:hidden}
  .finder-app-icon::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.08) 40%,transparent 100%);pointer-events:none;border-radius:14px 14px 0 0}
  .app-emoji{font-size:24px;position:relative;z-index:1}
  .app-badge{font-family:var(--fh);font-size:8px;font-weight:900;letter-spacing:.05em;position:relative;z-index:1}
  .finder-item-name{font-size:10px;font-weight:600;color:var(--text-dim);text-align:center;line-height:1.3;max-width:90px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .finder-item-sub{font-size:8px;color:var(--text-muted);text-align:center;letter-spacing:.05em}
  .finder-view-list{padding:0}
  .finder-table{width:100%;border-collapse:collapse;font-size:12px}
  .finder-table th{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);font-weight:600;position:sticky;top:0;background:rgba(28,28,30,0.95);backdrop-filter:blur(8px);z-index:2}
  .finder-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04);color:var(--text-dim);vertical-align:middle}
  .finder-row-item{transition:background 0.15s}
  .finder-row-item:hover{background:rgba(255,255,255,0.04)}
  .table-name-cell{display:flex;align-items:center;gap:8px}
  .table-emoji{font-size:16px}
  .table-desc-cell{max-width:300px;font-size:11px;color:var(--text-muted);line-height:1.5}
  .platform-pill{font-size:9px;padding:3px 8px;border-radius:100px;border:1px solid var(--pill-color, var(--border));color:var(--pill-color, var(--text-muted));background:transparent;white-space:nowrap}
  .status-link{font-size:10px;font-weight:600;letter-spacing:.08em}
  .status-link.green{color:var(--green)}
  .status-link.gray{color:var(--text-muted)}
  .finder-view-list.hidden{display:none}
  @media(max-width:900px){
    .finder-toolbar{flex-wrap:wrap;gap:8px}
    .finder-search{width:100%;order:99}
    .finder-body{grid-template-columns:1fr}
    .finder-sidebar{display:none}
    .finder-view-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
    .finder-app-icon{width:56px;height:56px}
    .app-emoji{font-size:20px}
    .finder-content-wrapper{max-height:none}
    .finder-table{font-size:11px}
    .finder-table th,.finder-table td{padding:8px 8px}
    .table-desc-cell{max-width:150px}
  }

  /* FAQ Accordion */
  .faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 8px;
  }
  .faq-item:last-child {
    border-bottom: none;
  }
  .faq-trigger {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 8px;
    text-align: left;
    color: #fff;
    font-family: var(--fh);
    font-size: 13px;
    font-weight: 600;
    transition: color 0.25s;
    outline: none;
  }
  .faq-trigger:hover {
    color: var(--green);
  }
  .faq-question {
    letter-spacing: 0.05em;
  }
  .faq-icon {
    font-family: var(--fc);
    color: var(--cyan);
    font-weight: bold;
    font-size: 16px;
    transition: transform 0.25s ease;
  }
  .faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
  }
  .faq-content-inner {
    padding: 8px 12px 18px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-dim);
    font-family: var(--fc);
  }

  /* Scraped Services Styling */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
  .glass-card, .service-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 24px;
    border-radius: 6px;
    transition: border-color .3s, box-shadow .3s;
    margin-bottom: 20px;
  }
  .glass-card:hover, .service-card:hover {
    border-color: var(--purple);
    box-shadow: 0 0 20px var(--purple-glow);
  }
  .tech-badge {
    font-family: var(--fc);
    font-size: 12px;
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--green);
    background: rgba(0,255,159,.04);
    border-color: var(--border-green);
    letter-spacing: .05em;
  }
  .tech-badge:hover {
    box-shadow: 0 0 12px var(--green-glow);
  }
  .text-gradient {
    background: linear-gradient(90deg, var(--green) 0%, var(--cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }
  .display-lg {
    font-family: var(--fh);
    font-size: clamp(24px, 5vw, 44px);
    font-weight: 900;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 15px;
  }
  .display-md {
    font-family: var(--fh);
    font-size: clamp(18px, 3.5vw, 30px);
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 12px;
  }
  .text-secondary {
    color: var(--text-muted);
  }
  .section-label {
    font-size: 9px;
    letter-spacing: .25em;
    color: var(--green);
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
  }
  .page-hero {
    text-align: center;
    padding: 40px 20px 60px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
    background: linear-gradient(180deg, rgba(183,0,255,.03) 0%, transparent 100%);
  }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(0,229,255,.08);
    border: 1px solid var(--border-cyan);
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 15px;
  }
  .hero-badge svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
  }
  .breadcrumb {
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .breadcrumb a {
    color: var(--cyan);
    text-decoration: none;
  }
  .breadcrumb a:hover {
    color: var(--purple);
  }
  .breadcrumb-sep {
    color: var(--border);
  }
  /* ===================================================
     MODALS
  =================================================== */
  .modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
  .modal.active{display:flex}
  .modal-overlay{position:absolute;inset:0;background:rgba(10,10,14,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .modal-wrapper{position:relative;width:100%;max-width:640px;z-index:1001;animation:slideIn .3s ease forwards}
  .modal-close{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;font-family:var(--fc);transition:color .2s;z-index:10}
  .modal-close:hover{color:var(--purple)}
  .modal-body-scroll{max-height:60vh;overflow-y:auto;padding-right:8px;font-size:12px;color:var(--text-dim);line-height:1.75;}
  .modal-body-scroll::-webkit-scrollbar{width:4px}
  .modal-body-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}
  .modal-body-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
  .modal-body-scroll::-webkit-scrollbar-thumb:hover{background:var(--purple)}

  /* ===================================================
     READABILITY & DELAYED LOADING
  =================================================== */
  .pw p,.pw li,.pw td,.pw th,.pw label,.modal-body-scroll{color:var(--text-dim)}
  .s-desc,.proj-desc,.proc-desc,.bc-excerpt,.fc-desc,.fcb,.principle-list li,.table-desc-cell,.finder-item-sub,.spotlight-item-desc,.mac-notif-desc{color:var(--text-dim)}
  .ph-sub,.ph-bc,.sec-lbl,.proj-cat,.proj-platform,.bc-read,.ci-lbl,.sk,.tp,.cc-module-title{color:var(--text-muted)}
  .ph-bc span{opacity:1;color:var(--text-muted)}
  .fi::placeholder,.ft::placeholder,.spotlight-search input::placeholder{color:rgba(255,255,255,.72);opacity:1}
  .blog-content-body p,.blog-content-body li,.blog-content-body .text-secondary,.blog-content-body .service-card p,.blog-content-body .glass-card li{font-size:14px!important;line-height:1.75;color:var(--text-dim)}
  .faq-content-inner,.modal-body-scroll{font-size:13px;color:var(--text-dim)}
  .home-content>.stats .mac-widget{isolation:isolate}
  .home-content>.stats .mac-widget::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(145deg,rgba(255,255,255,.12),transparent 42%);pointer-events:none}
  .home-content>.stats .mac-widget::after{content:"";position:absolute;width:180px;height:180px;right:-72px;bottom:-105px;z-index:-1;border-radius:50%;background:var(--widget-glow,rgba(10,132,255,.25));filter:blur(8px);opacity:.48;pointer-events:none}
  .widget-weather{--widget-glow:rgba(100,210,255,.55);background:linear-gradient(145deg,#0575d8 0%,#4962ec 52%,#7b3fe4 100%)!important}
  .widget-calendar{--widget-glow:rgba(255,69,58,.30);background:linear-gradient(145deg,rgba(55,31,35,.92),rgba(24,24,27,.86))!important}
  .widget-rings{--widget-glow:rgba(191,90,242,.34);background:linear-gradient(145deg,rgba(42,31,55,.92),rgba(22,24,30,.90))!important}
  .widget-system{--widget-glow:rgba(48,209,88,.30);background:linear-gradient(145deg,rgba(23,43,38,.91),rgba(22,24,29,.92))!important}
  .widget-ecosystem{--widget-glow:rgba(10,132,255,.38);background:linear-gradient(145deg,rgba(19,43,78,.96),rgba(30,25,57,.93))!important}
  .widget-shortcuts{--widget-glow:rgba(255,159,10,.32);background:linear-gradient(145deg,rgba(54,34,31,.94),rgba(27,25,42,.94))!important}
  .widget-play-console{--widget-glow:rgba(52,168,83,.38);background:linear-gradient(145deg,rgba(20,61,45,.96),rgba(20,31,39,.94))!important}
  .widget-android-device{--widget-glow:rgba(66,133,244,.36);background:linear-gradient(145deg,rgba(29,45,79,.96),rgba(31,25,55,.94))!important}
  .widget-eyebrow{font-size:9px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
  .widget-sparkline{width:100%;height:34px;margin-top:auto;overflow:visible}
  .widget-sparkline .area{opacity:.18}
  .widget-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:10px 0 7px}
  .widget-day{height:13px;border-radius:4px;background:rgba(255,255,255,.07)}
  .widget-day.hot{background:rgba(255,69,58,.74);box-shadow:0 0 10px rgba(255,69,58,.28)}
  .widget-day.mid{background:rgba(255,159,10,.38)}
  .ring-visual{position:relative;display:grid;place-items:center;width:68px;height:68px}
  .ring-visual svg{position:absolute;inset:0;width:68px;height:68px}
  .ring-center{font-size:13px;font-weight:850;color:#fff;line-height:1;text-align:center}
  .ring-center small{display:block;margin-top:3px;color:var(--text-muted);font-size:7px;letter-spacing:.08em}
  .system-chart{height:38px;margin:4px 0 7px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .system-chart svg{width:100%;height:100%;overflow:visible}
  .ecosystem-devices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:13px 0}
  .ecosystem-device{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 5px 8px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.055)}
  .ecosystem-device svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .ecosystem-device span{font-size:8px;font-weight:750;color:rgba(255,255,255,.78)}
  .ecosystem-device i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(48,209,88,.8)}
  .ecosystem-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
  .ecosystem-progress{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
  .ecosystem-progress span{display:block;width:92%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0a84ff,#64d2ff,#bf5af2)}
  .shortcut-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:13px}
  .shortcut-action{display:flex;align-items:center;gap:9px;min-height:53px;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.06);color:#fff;text-decoration:none;transition:transform .2s,background .2s,border-color .2s}
  .shortcut-action:hover{transform:translateY(-2px);background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2)}
  .shortcut-icon{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:9px;background:var(--shortcut-color,#0a84ff);box-shadow:0 6px 15px color-mix(in srgb,var(--shortcut-color,#0a84ff) 35%,transparent)}
  .shortcut-icon svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .shortcut-copy{min-width:0;display:flex;flex-direction:column}
  .shortcut-copy strong{font-size:9px;color:#fff;line-height:1.2}
  .shortcut-copy small{margin-top:2px;color:rgba(255,255,255,.55);font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .play-release{display:flex;align-items:center;gap:12px;margin:13px 0}
  .play-release-ring{width:68px;height:68px;flex:0 0 68px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#34a853 0 94%,rgba(255,255,255,.1) 94%);box-shadow:0 0 22px rgba(52,168,83,.22)}
  .play-release-ring::before{content:"";position:absolute;width:52px;height:52px;border-radius:50%;background:#18372c}
  .play-release-ring strong{position:relative;color:#fff;font-size:15px}
  .play-release-copy{display:flex;flex-direction:column;gap:5px}
  .play-release-copy strong{color:#fff;font-size:12px}
  .play-release-copy span{color:rgba(255,255,255,.62);font-size:8.5px;line-height:1.35}
  .play-tracks{display:flex;gap:5px;margin-top:auto}
  .play-track{flex:1;padding:5px 3px;border-radius:7px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.58);font-size:7px;font-weight:750;text-align:center}
  .play-track.active{background:rgba(52,168,83,.18);color:#62dc82}
  .android-device-row{display:flex;align-items:flex-end;justify-content:center;gap:13px;margin:12px 0 10px}
  .android-device-shape{position:relative;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
  .android-device-shape.phone{width:34px;height:66px;border-radius:9px}
  .android-device-shape.fold{width:62px;height:58px;border-radius:8px}
  .android-device-shape.tablet{width:66px;height:48px;border-radius:8px}
  .android-device-shape::after{content:"";width:5px;height:5px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px rgba(61,220,132,.7)}
  .android-device-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;color:rgba(255,255,255,.62);font-size:7.5px;font-weight:750;text-align:center}

  /* Live widget motion */
  .home-content>.stats .mac-widget::before{animation:widgetSheen 7s ease-in-out infinite}
  .home-content>.stats .mac-widget::after{animation:widgetGlow 6s ease-in-out infinite alternate}
  .home-content>.stats .mac-widget:nth-child(2n)::before{animation-delay:-2.2s}
  .home-content>.stats .mac-widget:nth-child(3n)::after{animation-delay:-3.4s}
  .widget-weather .widget-sparkline path:not(.area){stroke-dasharray:12 7;animation:widgetLineFlow 3.2s linear infinite}
  .widget-weather .widget-sparkline circle{animation:widgetBeacon 1.7s ease-in-out infinite}
  .widget-weather > div:nth-child(2) > svg{animation:weatherSun 9s linear infinite}
  .widget-calendar .widget-day{animation:calendarPulse 3.6s ease-in-out infinite}
  .widget-calendar .widget-day:nth-child(3n){animation-delay:-1.2s}
  .widget-calendar .widget-day:nth-child(4n){animation-delay:-2.4s}
  .widget-rings .ring-visual svg{animation:ringOrbit 14s linear infinite}
  .widget-rings .ring-center{animation:widgetBeacon 2.4s ease-in-out infinite}
  .widget-system .system-chart path:first-child{stroke-dasharray:18 8;animation:widgetLineFlow 2.6s linear infinite}
  .widget-system #widget-cpu-bar{box-shadow:0 0 10px rgba(48,209,88,.7)}
  .widget-ecosystem .ecosystem-device{animation:deviceSync 3.8s ease-in-out infinite}
  .widget-ecosystem .ecosystem-device:nth-child(2){animation-delay:-.7s}
  .widget-ecosystem .ecosystem-device:nth-child(3){animation-delay:-1.4s}
  .widget-ecosystem .ecosystem-device:nth-child(4){animation-delay:-2.1s}
  .widget-ecosystem .ecosystem-progress span{background-size:200% 100%;animation:progressFlow 2.8s linear infinite}
  .widget-shortcuts .shortcut-icon{animation:shortcutPulse 3.5s ease-in-out infinite}
  .widget-shortcuts .shortcut-action:nth-child(2) .shortcut-icon{animation-delay:-.8s}
  .widget-shortcuts .shortcut-action:nth-child(3) .shortcut-icon{animation-delay:-1.6s}
  .widget-shortcuts .shortcut-action:nth-child(4) .shortcut-icon{animation-delay:-2.4s}
  .widget-play-console .play-release-ring{animation:playHealth 2.8s ease-in-out infinite}
  .widget-play-console .play-track.active{animation:trackLive 2.4s ease-in-out infinite}
  .widget-play-console .play-track:nth-child(2){animation-delay:-.8s}
  .widget-play-console .play-track:nth-child(4){animation-delay:-1.6s}
  .widget-android-device .android-device-shape{overflow:hidden;animation:androidDevice 4s ease-in-out infinite}
  .widget-android-device .android-device-shape:nth-child(2){animation-delay:-1.2s}
  .widget-android-device .android-device-shape:nth-child(3){animation-delay:-2.4s}
  .widget-android-device .android-device-shape::before{content:"";position:absolute;left:3px;right:3px;height:12px;top:-14px;background:linear-gradient(180deg,transparent,rgba(61,220,132,.28),transparent);animation:deviceScan 2.8s linear infinite}
  @keyframes widgetSheen{0%,100%{transform:translateX(-18%);opacity:.22}50%{transform:translateX(18%);opacity:.58}}
  @keyframes widgetGlow{from{transform:scale(.9);opacity:.32}to{transform:scale(1.13);opacity:.62}}
  @keyframes widgetLineFlow{to{stroke-dashoffset:-38}}
  @keyframes widgetBeacon{0%,100%{transform:scale(1);opacity:.78}50%{transform:scale(1.08);opacity:1}}
  @keyframes weatherSun{to{transform:rotate(360deg)}}
  @keyframes calendarPulse{0%,100%{filter:brightness(.78);transform:scale(.94)}50%{filter:brightness(1.25);transform:scale(1)}}
  @keyframes ringOrbit{to{transform:rotate(360deg)}}
  @keyframes deviceSync{0%,100%{transform:translateY(0);border-color:rgba(255,255,255,.09)}50%{transform:translateY(-4px);border-color:rgba(100,210,255,.32)}}
  @keyframes progressFlow{to{background-position:-200% 0}}
  @keyframes shortcutPulse{0%,100%{transform:scale(1);filter:brightness(.94)}50%{transform:scale(1.08);filter:brightness(1.18)}}
  @keyframes playHealth{0%,100%{transform:scale(1);box-shadow:0 0 18px rgba(52,168,83,.18)}50%{transform:scale(1.05);box-shadow:0 0 30px rgba(52,168,83,.38)}}
  @keyframes trackLive{0%,100%{filter:brightness(.85)}50%{filter:brightness(1.3);box-shadow:0 0 10px rgba(52,168,83,.18)}}
  @keyframes androidDevice{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  @keyframes deviceScan{to{top:calc(100% + 14px)}}
  @media(max-width:560px){
    .home-content>.stats .mac-widget{min-height:160px!important}
    .home-content>.stats .widget-ecosystem,
    .home-content>.stats .widget-shortcuts,
    .home-content>.stats .widget-play-console,
    .home-content>.stats .widget-android-device{grid-column:1/-1}
    .widget-week{gap:3px}
    .ecosystem-devices{gap:5px}
    .ecosystem-device{padding:8px 2px 7px}
    .ecosystem-device span{font-size:7px}
    .shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
    .shortcut-action{min-height:42px;padding:6px}
  }
  /* ===================================================
     MACOS CONTROL CENTER & STATUS BAR
  =================================================== */
  .mac-status-bar { display: flex; align-items: center; gap: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-weight: 500; color: var(--text); }
  .status-icon { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; transition: background 0.2s; }
  .status-icon:hover { background: rgba(255,255,255,0.1); }
  .status-icon svg { width: 16px; height: 16px; }
  .control-center { position: fixed; top: 60px; right: 20px; width: 320px; background: rgba(30, 30, 30, 0.75); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); z-index: 9999; opacity: 0; transform: translateY(-10px) scale(0.95); pointer-events: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: top right; }
  .control-center.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
  .cc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  .cc-title { font-size: 14px; font-weight: 600; color: var(--text); }
  .cc-grid { display: grid; gap: 12px; }
  .cc-module { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 12px; }
  .cc-module-title { font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.5px; }
  .cc-btn-group { display: flex; flex-direction: column; gap: 6px; }
  .cc-btn { background: rgba(255,255,255,0.08); border: none; color: var(--text); padding: 8px 12px; border-radius: 8px; font-size: 13px; text-align: left; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; gap: 8px; }
  .cc-btn:hover { background: rgba(255,255,255,0.15); }
  .cc-btn.active { background: var(--mac-blue); color: #fff; }
  .cc-toggle { display: flex; align-items: center; cursor: pointer; gap: 10px; }
  .cc-toggle input { display: none; }
  .cc-slider { position: relative; width: 36px; height: 20px; background: rgba(255,255,255,0.1); border-radius: 20px; transition: 0.3s; }
  .cc-slider::before { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; left: 2px; bottom: 2px; background: white; transition: 0.3s; }
  .cc-toggle input:checked + .cc-slider { background: var(--green); }
  .cc-toggle input:checked + .cc-slider::before { transform: translateX(16px); }

  /* ===================================================
     SPOTLIGHT SEARCH
  =================================================== */
  .spotlight-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10000; display: flex; justify-content: center; align-items: flex-start; padding-top: 15vh; opacity: 1; transition: opacity 0.2s; }
  .spotlight-window { width: 100%; max-width: 680px; background: rgba(30, 30, 30, 0.85); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); overflow: hidden; transform: scale(1); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
  .spotlight-search { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .spotlight-search svg { width: 24px; height: 24px; color: var(--text-muted); margin-right: 12px; }
  .spotlight-search input { flex: 1; background: transparent; border: none; color: var(--text); font-size: 22px; font-weight: 300; outline: none; }
  .spotlight-search input::placeholder { color: var(--text-muted); }
  .spotlight-results { max-height: 400px; overflow-y: auto; padding: 8px 0; }
  .spotlight-results::-webkit-scrollbar { width: 6px; }
  .spotlight-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
  .spotlight-item { display: flex; align-items: center; padding: 10px 20px; cursor: pointer; text-decoration: none; color: var(--text); transition: background 0.1s; }
  .spotlight-item:hover, .spotlight-item.active { background: var(--mac-blue); color: #fff; }
  .spotlight-item-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border-radius: 6px; margin-right: 16px; font-size: 16px; }
  .spotlight-item-content { flex: 1; overflow: hidden; }
  .spotlight-item-title { font-size: 15px; font-weight: 500; margin-bottom: 2px; }
  .spotlight-item-desc { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .spotlight-item.active .spotlight-item-desc { color: rgba(255,255,255,0.8); }

  /* ===================================================
     NOTIFICATIONS
  =================================================== */
  .mac-notification-container { position: fixed; top: 70px; right: 20px; z-index: 10001; display: flex; flex-direction: column; gap: 10px; width: 340px; max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; pointer-events: none; }
  .mac-notification-container.notification-center-open { pointer-events: auto; padding: 2px 4px 14px; }
  .mac-notification-container::-webkit-scrollbar { width: 6px; }
  .mac-notification-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; }
  .mac-notification { background: rgba(30, 30, 30, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 16px; display: flex; align-items: flex-start; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); pointer-events: all; animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; position: relative; cursor: pointer; transition: transform 0.2s, background 0.2s; }
  .mac-notification:hover { background: rgba(40, 40, 40, 0.9); transform: translateX(-2px); }
  .mac-notification.hide { animation: fadeOutRight 0.3s ease forwards; }
  .mac-notif-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
  .mac-notif-content { flex: 1; }
  .mac-notif-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--text); display: flex; justify-content: space-between; align-items: center; }
  .mac-notif-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
  .mac-notif-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 4px; line-height: 1; display: flex; align-items: center; justify-content: center; margin-left: 8px; transition: color 0.2s; border-radius: 4px; }
  .mac-notif-close:hover { color: var(--text); background: rgba(255,255,255,0.1); }
  @keyframes slideInRight { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  @keyframes fadeOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

  /* ===================================================
     REDUCE MOTION
  =================================================== */
  body.reduce-motion * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html.reduce-motion{scroll-behavior:auto!important}
  @media (prefers-reduced-motion: reduce) {
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
    body::before,.marquee-inner,.np,.cursor,.notification-count{animation:none!important}
  }

  /* ===================================================
     LIGHT THEME OVERRIDES
  =================================================== */
  html[data-theme="light"] body {
    background: #ffffff;
    color: #1c1c1e;
  }
  html[data-theme="light"] body::before {
    background: 
      radial-gradient(circle at 10% 20%, rgba(255, 159, 10, 0.04), transparent 45%),
      radial-gradient(circle at 90% 10%, rgba(191, 90, 242, 0.03), transparent 45%),
      radial-gradient(circle at 50% 80%, rgba(255, 45, 85, 0.03), transparent 50%),
      radial-gradient(circle at 80% 90%, rgba(10, 132, 255, 0.03), transparent 45%),
      radial-gradient(circle at 5% 75%, rgba(50, 215, 75, 0.02), transparent 40%);
  }
  html[data-theme="light"] {
    --text: #1c1c1e;
    --text-dim: #242426;
    --text-muted: #59595e;
    --bg: #ffffff;
    --bg2: rgba(255, 255, 255, 0.8);
    --bg3: rgba(242, 242, 247, 0.9);
    --bg4: rgba(229, 229, 234, 0.9);
    --border: rgba(0, 0, 0, 0.1);
    --purple-glow: rgba(191, 90, 242, 0.1);
    --green-glow: rgba(48, 209, 88, 0.1);
    --cyan-glow: rgba(90, 200, 245, 0.1);
  }
  html[data-theme="light"] #top-header { background: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(0,0,0,0.08); }
  html[data-theme="light"] .top-brand .tb-text { color: #1c1c1e; }
  html[data-theme="light"] .mac-status-bar { color: #1c1c1e; }
  html[data-theme="light"] .status-icon:hover { background: rgba(0,0,0,0.06); }
  html[data-theme="light"] .control-center { background: rgba(255, 255, 255, 0.85); border-color: rgba(0,0,0,0.1); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
  html[data-theme="light"] .cc-module { background: rgba(0,0,0,0.03); }
  html[data-theme="light"] .cc-btn { background: transparent; color: #1c1c1e; }
  html[data-theme="light"] .cc-btn:hover { background: rgba(0,0,0,0.05); }
  html[data-theme="light"] .cc-btn.active { background: var(--mac-blue); color: #fff; }
  html[data-theme="light"] .cc-title { color: #1c1c1e; }
  html[data-theme="light"] .cc-module-title { color: #8e8e93; }
  html[data-theme="light"] .cc-slider { background: rgba(0,0,0,0.1); }
  html[data-theme="light"] .spotlight-window { background: rgba(255, 255, 255, 0.9); border-color: rgba(0,0,0,0.15); box-shadow: 0 30px 60px rgba(0,0,0,0.15); }
  html[data-theme="light"] .spotlight-item { color: #1c1c1e; }
  html[data-theme="light"] .spotlight-item:hover, html[data-theme="light"] .spotlight-item.active { background: var(--mac-blue); color: #fff; }
  html[data-theme="light"] .spotlight-item.active .spotlight-item-desc { color: rgba(255,255,255,0.9); }
  html[data-theme="light"] .spotlight-item-icon { background: rgba(0,0,0,0.05); }
  html[data-theme="light"] .mac-notification { background: rgba(255, 255, 255, 0.9); border-color: rgba(0,0,0,0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.1); color: #1c1c1e; }
  html[data-theme="light"] .mac-notif-title { color: #1c1c1e; }
  html[data-theme="light"] .mac-notif-desc { color: #3a3a3c; }
  html[data-theme="light"] .mac-notif-icon { background: rgba(0,0,0,0.05); }
  html[data-theme="light"] .mac-notif-close { color: #8e8e93; }
  html[data-theme="light"] .mac-notif-close:hover { color: #1c1c1e; background: rgba(0,0,0,0.05); }
  html[data-theme="light"] .mac-dock { background: rgba(255, 255, 255, 0.75); border-color: rgba(0,0,0,0.1); box-shadow: 0 12px 50px rgba(0,0,0,0.15); }
  html[data-theme="light"] .mac-item { color: #fff; filter: saturate(0.85) brightness(0.95); }
  html[data-theme="light"] .mac-item:hover { filter: saturate(1) brightness(1.1); border-color: rgba(255,255,255,0.4); }
  html[data-theme="light"] .dock-sub-menu { background: rgba(255, 255, 255, 0.85); border-color: rgba(191, 90, 242, 0.3); box-shadow: 0 15px 50px rgba(0,0,0,0.15); }
  html[data-theme="light"] .dsm-item { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.05); color: #1c1c1e; }
  html[data-theme="light"] .dsm-item:hover { background: #fff; border-color: var(--purple); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
  html[data-theme="light"] .dock-fade { background: linear-gradient(to top, rgba(255,255,255,0.95), transparent); }
  
  /* Form Inputs Light Mode */
  html[data-theme="light"] .spotlight-search input { color: #1c1c1e; }
  html[data-theme="light"] .spotlight-search input::placeholder { color: #8e8e93; }
  html[data-theme="light"] .form-input, html[data-theme="light"] .form-select, html[data-theme="light"] .form-textarea { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: #1c1c1e; }
  html[data-theme="light"] .form-input:focus, html[data-theme="light"] .form-select:focus, html[data-theme="light"] .form-textarea:focus { background: #fff; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(191, 90, 242, 0.1); }
  html[data-theme="light"] .form-label { color: #3a3a3c; }

  /* Project Grid Light Mode */
  html[data-theme="light"] .proj-card { background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.05); box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
  html[data-theme="light"] .proj-card:hover { background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
  html[data-theme="light"] .pc-desc { color: #3a3a3c; }
  html[data-theme="light"] .pc-title { color: #1c1c1e; }
  html[data-theme="light"] .service-card { background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.05); box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
  html[data-theme="light"] .service-card:hover { background: #fff; border-color: var(--border-green); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
  html[data-theme="light"] .sc-desc { color: #3a3a3c; }
  html[data-theme="light"] .sc-title { color: #1c1c1e; }
  html[data-theme="light"] .post-card { background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.05); }
  html[data-theme="light"] .post-card:hover { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
  html[data-theme="light"] .post-title { color: #1c1c1e; }
  html[data-theme="light"] .post-desc { color: #3a3a3c; }

  /* Finder Light Mode */
  html[data-theme="light"] .finder-sidebar { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
  html[data-theme="light"] .sidebar-item { color: #3a3a3c; }
  html[data-theme="light"] .sidebar-item:hover { background: rgba(0,0,0,0.04); color: #1c1c1e; }
  html[data-theme="light"] .sidebar-item.active { background: rgba(191,90,242,0.08); color: var(--purple); }
  html[data-theme="light"] .finder-search { border-color: rgba(0,0,0,0.1); }
  html[data-theme="light"] .finder-search input { color: #1c1c1e; }
  html[data-theme="light"] .finder-search input::placeholder { color: #8e8e93; }
  html[data-theme="light"] .finder-search:focus-within { border-color: var(--purple); }
  html[data-theme="light"] .finder-table th { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.08); }
  html[data-theme="light"] .finder-table td { color: #3a3a3c; border-color: rgba(0,0,0,0.05); }
  html[data-theme="light"] .finder-row-item:hover { background: rgba(0,0,0,0.03); }
  html[data-theme="light"] .finder-item-name { color: #3a3a3c; }
  html[data-theme="light"] .finder-item-sub { color: #8e8e93; }
  html[data-theme="light"] .finder-view-btn { color: #8e8e93; }
  html[data-theme="light"] .finder-view-btn.active { background: rgba(0,0,0,0.08); color: #1c1c1e; }
  html[data-theme="light"] .finder-nav-btn { color: #8e8e93; }
  html[data-theme="light"] .finder-nav-btn:hover { background: rgba(0,0,0,0.06); color: #1c1c1e; }
  html[data-theme="light"] .view-btn { color: #8e8e93; }
  html[data-theme="light"] .view-btn:hover { color: #1c1c1e; }
  html[data-theme="light"] .view-btn.active { background: rgba(0,0,0,0.08); color: #1c1c1e; }
  html[data-theme="light"] .table-desc-cell { color: #3a3a3c; }
  html[data-theme="light"] .platform-pill { border-color: rgba(0,0,0,0.1); }
  html[data-theme="light"] .finder-search .search-icon { stroke: #8e8e93; }

  /* ===================================================
     COMPLETE MACOS DESIGN SYSTEM
  =================================================== */
  :root{
    --mac-surface:rgba(30,30,32,.78);
    --mac-surface-strong:rgba(38,38,41,.92);
    --mac-stroke:rgba(255,255,255,.16);
    --mac-shadow:0 24px 70px rgba(0,0,0,.38),0 2px 10px rgba(0,0,0,.24);
    --mac-radius:22px;
  }
  body{
    background:#09090b;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
    font-weight:450;
  }
  body::before{
    background:
      radial-gradient(circle at 14% 8%,rgba(10,132,255,.28),transparent 30%),
      radial-gradient(circle at 88% 18%,rgba(175,82,222,.25),transparent 34%),
      radial-gradient(circle at 48% 92%,rgba(255,55,95,.18),transparent 36%),
      linear-gradient(145deg,#11131a 0%,#09090b 46%,#16111c 100%);
  }
  #top-header{
    height:52px;
    padding:0 24px;
    background:rgba(18,18,20,.72);
    border-bottom:1px solid rgba(255,255,255,.13);
    box-shadow:0 1px 0 rgba(0,0,0,.25);
  }
  .top-brand img{width:32px;height:32px;border-radius:9px;box-shadow:0 5px 14px rgba(0,0,0,.28)}
  .top-brand .tb-text{font-size:14px;letter-spacing:.08em}
  .top-brand .tb-sub{font-size:9px;letter-spacing:.08em;color:var(--text-muted)}
  .mac-status-bar{font-size:13px;font-weight:600}
  .status-icon{border-radius:7px}
  .pw{max-width:1240px;padding:88px 34px 86px}

  .ph{
    margin-bottom:30px;
    padding:28px 30px;
    border:1px solid var(--mac-stroke);
    border-radius:var(--mac-radius);
    background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
    backdrop-filter:blur(34px) saturate(145%);
    -webkit-backdrop-filter:blur(34px) saturate(145%);
    box-shadow:var(--mac-shadow);
    overflow:hidden;
  }
  .ph::before{
    content:"";
    display:block;
    width:12px;height:12px;
    margin-bottom:24px;
    border-radius:50%;
    background:#ff5f57;
    box-shadow:20px 0 #febc2e,40px 0 #28c840;
  }
  .ph::after{display:none}
  .ph-bc{font-size:12px;text-transform:none;letter-spacing:0;color:var(--text-muted);margin-bottom:10px}
  .ph-title{
    font-size:clamp(28px,3.8vw,46px);
    font-weight:750;
    line-height:1.05;
    letter-spacing:-.035em;
    color:var(--text);
    background:none;
    -webkit-background-clip:initial;
    -webkit-text-fill-color:currentColor;
  }
  .ph-sub{font-size:15px;line-height:1.65;color:var(--text-dim);margin-top:12px}
  .ph-sub::first-letter{color:inherit}

  .tc,.blog-card,.featured-card,.service-card,.proc-item,.mac-widget{
    border:1px solid var(--mac-stroke);
    background:var(--mac-surface);
    backdrop-filter:blur(28px) saturate(140%);
    -webkit-backdrop-filter:blur(28px) saturate(140%);
    box-shadow:var(--mac-shadow);
  }
  .tc,.featured-card,.service-card,.proc-item,.mac-widget{border-radius:var(--mac-radius)}
  .blog-card,.proj-card{border-radius:18px}
  .tc:hover,.blog-card:hover,.featured-card:hover,.service-card:hover,.proj-card:hover{
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.28);
    box-shadow:0 28px 74px rgba(0,0,0,.44),0 0 0 1px rgba(10,132,255,.12);
  }
  .th{
    position:relative;
    min-height:48px;
    padding:0 18px;
    gap:8px;
    background:rgba(255,255,255,.045);
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .dot{width:12px;height:12px;box-shadow:none}
  .tt{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    max-width:58%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    font-weight:650;
    color:var(--text-dim);
    letter-spacing:0;
  }
  .tb{padding:26px}
  .sec-lbl{
    margin-bottom:18px;
    color:var(--text-muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
  }
  .sec-lbl::before{width:18px;height:3px;border-radius:4px;background:var(--mac-blue);box-shadow:none}

  .hero-title{font-weight:780;letter-spacing:-.045em;line-height:1.02}
  .hero-title .ap,.hero-title .ag{
    background:linear-gradient(120deg,#64d2ff,#0a84ff 48%,#bf5af2);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .hero-slogan{border-left-color:var(--mac-blue);color:var(--text-dim)}
  .hero-overline{color:#64d2ff;font-size:12px;letter-spacing:.1em}
  .hero-overline::before{background:#64d2ff;border-radius:4px}
  .typing-line{padding:10px 14px;border:1px solid var(--mac-stroke);border-radius:10px;background:rgba(0,0,0,.24)}
  .cb{
    background:rgba(0,0,0,.36);
    border-color:rgba(255,255,255,.12);
    border-radius:13px;
    color:var(--text-dim);
  }

  .btn,.fsubmit,.bf{
    border-radius:10px;
    min-height:40px;
    font-family:var(--fh);
    font-weight:650;
    letter-spacing:0;
    text-transform:none;
  }
  .btn-p,.btn-g,.btn-c,.fsubmit{
    background:#0066cc;
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 8px 22px rgba(0,122,255,.30);
  }
  .btn-g:hover,.btn-c:hover,.fsubmit:hover{
    background:#1687ff;
    color:#fff;
    box-shadow:0 10px 28px rgba(0,122,255,.38);
  }
  .btn-ghost,.bf{background:rgba(255,255,255,.08);border:1px solid var(--mac-stroke);color:var(--text)}
  .bf.active{background:var(--mac-blue);border-color:var(--mac-blue);color:#fff}
  .blog-filters .bf.active{background:#0066cc;border-color:#0066cc;color:#fff;font-weight:700}

  .stats{gap:16px}
  .stat{border-radius:16px;background:var(--mac-surface);border-color:var(--mac-stroke);box-shadow:var(--mac-shadow)}
  .stat::before{background:var(--mac-blue);box-shadow:none}
  .sv,.s-name,.proj-name,.bc-title,.fc-title,.proc-title,.t-name{color:var(--text)}
  .mac-widget{min-height:142px;padding:18px}
  .home-content>.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .home-content>.stats .mac-widget{min-height:176px;padding:22px}

  .services-grid{gap:20px}
  .services-grid .tb{grid-template-columns:200px 1fr}
  .service-subtitle{margin:18px 0 10px;font-size:11px;font-weight:750;color:var(--text);letter-spacing:.04em}
  .service-subgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .service-subitem{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:38px;
    padding:9px 11px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:10px;
    background:rgba(255,255,255,.05);
    color:var(--text-dim);
    font-size:12px;
    line-height:1.35;
    text-decoration:none;
    transition:background .2s,border-color .2s,transform .2s;
  }
  .service-subitem:hover{background:rgba(10,132,255,.14);border-color:rgba(100,210,255,.48);transform:translateY(-1px)}
  .service-subitem-name{display:flex;align-items:center;gap:8px;min-width:0}
  .service-subitem-name::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mac-blue);box-shadow:0 0 8px rgba(10,132,255,.55);flex:0 0 auto}
  .service-subitem-action{flex:0 0 auto;color:#64d2ff;font-size:10px;font-weight:750;white-space:nowrap}
  .service-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
  .service-detail-panel{padding:20px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.05)}
  .service-detail-panel h3{margin:0 0 14px!important;font-size:18px!important}
  .service-detail-panel ul{list-style:none;margin:0!important;padding:0!important}
  .service-detail-panel li{position:relative;margin:0 0 10px!important;padding-left:20px}
  .service-detail-panel li::before{content:"✓";position:absolute;left:0;color:#32d74b;font-weight:800}
  .service-detail-request{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:10px;
    color:var(--text-dim)!important;
    text-decoration:none!important;
  }
  .service-detail-request:hover{background:rgba(10,132,255,.13);border-color:rgba(100,210,255,.45)}
  .service-detail-request span{color:#64d2ff;font-size:11px;font-weight:750;white-space:nowrap}
  .subcategory-details{margin-top:34px}
  .subcategory-details-title{margin:0 0 18px!important;font-size:25px!important}
  .subcategory-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .subcategory-detail-card{padding:22px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.055)}
  .subcategory-detail-card h3{margin:0 0 10px!important;font-size:18px!important;line-height:1.3}
  .subcategory-detail-card p{margin:0 0 16px!important;font-size:14px!important;line-height:1.7!important}
  .subcategory-tech-title,.subcategory-seo-title{margin:14px 0 8px;font-size:11px;font-weight:800;color:var(--text);letter-spacing:.04em}
  .subcategory-tags{display:flex;flex-wrap:wrap;gap:7px}
  .subcategory-tag{display:inline-flex;padding:6px 9px;border:1px solid rgba(100,210,255,.24);border-radius:999px;background:rgba(10,132,255,.09);color:#8ad8ff;font-size:10px;font-weight:700}
  .subcategory-keyword{border-color:rgba(191,90,242,.24);background:rgba(191,90,242,.09);color:#dca8f7}
  .subcategory-cta{margin-top:18px;display:inline-flex}
  .s-icon,.t-avatar,.ci-icon,.blog-content-body .card-icon{border-radius:12px}
  .feat-list li,.principle-list li{
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.055);
    border-radius:10px;
  }
  .feat-list li::before,.principle-list li::before{content:"✓";color:#32d74b}
  .tech-stack{border-top-color:rgba(255,255,255,.12)}
  .tp,.sk,.tag,.tech-badge{border-radius:999px!important}

  .proj-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .proj-card{overflow:hidden;background:var(--mac-surface);border:1px solid var(--mac-stroke);box-shadow:var(--mac-shadow)}
  .proj-img{height:150px;border-radius:0}
  .proj-badge{padding:5px 9px;border-radius:999px;background:rgba(20,20,22,.76)}
  .proj-body{padding:20px}
  .proj-name{font-size:17px;letter-spacing:-.01em}
  .proj-desc{font-size:13px;line-height:1.65}
  .project-status{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:7px 10px;border-radius:9px;font-size:10px;font-weight:800;line-height:1.1;letter-spacing:.02em}
  .project-status-live{color:#fff;background:rgba(10,132,255,.17);border:1px solid rgba(100,210,255,.34)}
  .project-status-dev{color:#ffd68a;background:rgba(255,159,10,.12);border:1px solid rgba(255,159,10,.32);box-shadow:inset 0 0 18px rgba(255,159,10,.05)}
  .project-loader{width:12px;height:12px;border:2px solid rgba(255,214,138,.25);border-top-color:#ffd68a;border-radius:50%;animation:projectSpin .85s linear infinite;flex:0 0 auto}
  .app-store-mark{width:15px;height:15px;display:block;fill:currentColor}
  @keyframes projectSpin{to{transform:rotate(360deg)}}

  .blog-filters{gap:10px}
  .blog-card{overflow:hidden}
  .bc-img{height:118px;background:rgba(255,255,255,.06)}
  .bc-body{padding:20px}
  .bc-title{font-size:16px;line-height:1.45}
  .bc-excerpt,.fc-desc{font-size:13px;line-height:1.65}
  .featured-card{border-color:var(--mac-stroke)}
  .fc-title{font-size:22px;letter-spacing:-.02em}
  .fc-badge{border:0;background:rgba(10,132,255,.18);color:#64d2ff}

  .fi,.fs,.ft{
    background:rgba(255,255,255,.075);
    border:1px solid rgba(255,255,255,.16);
    border-radius:10px;
    color:var(--text);
    font-family:var(--fh);
    font-size:14px;
  }
  .fi:focus,.fs:focus,.ft:focus{
    background:rgba(255,255,255,.10);
    border-color:#0a84ff;
    box-shadow:0 0 0 4px rgba(10,132,255,.22);
    color:var(--text);
  }
  .fl{font-family:var(--fh);font-size:11px;letter-spacing:.06em;color:var(--text-dim)}
  .ci-item{border-bottom-color:rgba(255,255,255,.10)}
  .faq-item{border-bottom-color:rgba(255,255,255,.12)}
  .faq-trigger{color:var(--text);font-family:var(--fh)}
  .faq-trigger:hover{background:rgba(255,255,255,.055)}
  .faq-icon{color:#64d2ff}

  .blog-content-body{font-size:16px;line-height:1.8;color:var(--text-dim)}
  .blog-content-body h1,.blog-content-body h2,.blog-content-body h3,.blog-content-body h4{
    color:var(--text);
    letter-spacing:-.02em;
  }
  .blog-content-body h2{font-size:25px;border-bottom-color:rgba(255,255,255,.13)}
  .blog-content-body h3{font-size:20px}
  .blog-content-body .glass-card,.blog-content-body .service-card,.blog-content-body .card,.blog-content-body .section.bg-alt{
    border-radius:16px;
    background:rgba(255,255,255,.055);
    border-color:rgba(255,255,255,.13);
  }
  .blog-content-body th{background:rgba(255,255,255,.08);color:var(--text)}
  .blog-content-body a{color:#64d2ff;border-bottom-color:#64d2ff}
  .blog-lead{font-size:18px!important;line-height:1.75!important;color:var(--text)!important}
  .blog-summary-box{margin:22px 0;padding:18px 20px;border:1px solid rgba(100,210,255,.28);border-radius:14px;background:rgba(10,132,255,.09);color:var(--text-dim);line-height:1.7}
  .blog-summary-box strong{color:#8ad8ff}
  .blog-checklist{margin-left:0!important;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .blog-checklist li{margin:0!important;padding:15px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.045)}
  .blog-checklist strong{color:#64d2ff;margin-right:5px}
  .blog-tech-list{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0 22px}
  .blog-faq{padding:18px 20px;border-radius:14px;background:rgba(191,90,242,.08);border:1px solid rgba(191,90,242,.24)}
  .blog-faq h3{margin:0 0 8px!important}
  .blog-faq p{margin:0!important}
  .blog-article-cta{margin-top:30px;padding:22px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-radius:16px;background:linear-gradient(135deg,rgba(10,132,255,.14),rgba(191,90,242,.12));border:1px solid rgba(100,210,255,.24)}
  .blog-article-cta div{display:flex;flex-direction:column;gap:5px}
  .blog-article-cta strong{color:var(--text);font-size:16px}
  .blog-article-cta span{color:var(--text-dim);font-size:13px}

  .mac-dock{
    gap:18px;
    padding:10px 18px;
    bottom:16px;
    background:linear-gradient(180deg,rgba(68,68,72,.72),rgba(35,35,38,.74));
    backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    border-color:rgba(255,255,255,.28);
    border-radius:23px;
    box-shadow:0 20px 60px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.20);
    isolation:isolate;
  }
  .mac-dock::before{
    content:"";
    position:absolute;
    inset:1px;
    z-index:-1;
    border-radius:21px;
    background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 48%);
    pointer-events:none;
  }
  .mac-item{
    width:52px;
    height:52px;
    border-radius:13px;
  }
  .mac-item.has-sub:hover,
  .mac-item.has-sub.submenu-open{
    transform:translateY(-3px)!important;
    z-index:30!important;
  }
  .mac-item.has-sub.submenu-open .dock-sub-menu{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  .dock-sub-menu{
    bottom:calc(100% + 14px);
    left:-66px;
    width:272px;
    margin-bottom:0;
    padding:9px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:16px;
    background:linear-gradient(180deg,rgba(58,58,62,.92),rgba(31,31,34,.94));
    box-shadow:0 22px 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.14);
    transform:translateX(0) translateY(8px);
  }
  .mac-item.has-sub:hover .dock-sub-menu,
  .mac-item.has-sub.submenu-open .dock-sub-menu,
  .dock-sub-menu:hover{
    transform:translateX(0) translateY(0);
  }
  .dock-sub-menu::before{
    bottom:-28px;
    left:52px;
    width:100px;
    height:32px;
  }
  .dsm-list{
    flex-direction:column;
    gap:5px;
  }
  .dsm-item{
    width:100%;
    min-height:38px;
    padding:9px 11px;
    border-radius:10px;
    font-size:12px;
    border-color:transparent;
    background:rgba(255,255,255,.045);
  }
  .dsm-item + .dsm-item{margin-top:1px}
  .dsm-item:hover{
    transform:none;
    background:rgba(10,132,255,.26);
    border-color:rgba(100,210,255,.28);
    box-shadow:none;
  }
  .mac-label{font-family:var(--fh);font-weight:650;letter-spacing:0}
  .mac-notification-container{top:66px;right:18px;width:min(390px,calc(100vw - 24px));gap:12px}
  .mac-notification{
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 28px;
    gap:12px;
    padding:12px;
    border-radius:18px;
    background:rgba(35,35,38,.88);
    backdrop-filter:blur(36px) saturate(165%);
    -webkit-backdrop-filter:blur(36px) saturate(165%);
    border:1px solid rgba(255,255,255,.20);
    box-shadow:0 18px 55px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.10);
  }
  .mac-notif-icon{
    width:46px;height:46px;
    border-radius:12px;
    background:linear-gradient(145deg,#0a84ff,#5e5ce6);
    box-shadow:0 8px 20px rgba(10,132,255,.28),inset 0 1px 0 rgba(255,255,255,.30);
    font-size:23px;
  }
  .mac-notif-content{min-width:0}
  .mac-notif-meta{display:flex;align-items:center;gap:7px;margin-bottom:3px;font-size:10px;font-weight:750;color:var(--text-muted)}
  .notification-group-title{pointer-events:none;padding:8px 10px 3px;color:var(--text-muted);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.35)}
  .mac-notif-app{color:var(--text);letter-spacing:.02em}
  .mac-notif-time{margin-left:auto;font-weight:550}
  .mac-notif-title{display:block;margin:0 0 3px;font-size:14px;font-weight:750;line-height:1.25;color:var(--text)}
  .mac-notif-desc{
    display:-webkit-box;
    overflow:hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    font-size:12px;
    line-height:1.42;
    color:var(--text-dim);
  }
  .mac-notif-action{display:inline-block;margin-top:7px;color:#64d2ff;font-size:11px;font-weight:700}
  .mac-notif-close{
    align-self:start;
    width:26px;height:26px;
    margin:0;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:var(--text-dim);
    font-size:13px;
  }
  .notification-status-icon{position:relative}
  .notification-status-icon::after{display:none}
  .notification-count{
    position:absolute;
    z-index:4;
    top:-7px;
    right:-8px;
    min-width:18px;
    height:18px;
    padding:0 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid rgba(18,18,20,.96);
    border-radius:999px;
    background:#ff3b30;
    color:#fff;
    font-size:9px;
    font-weight:800;
    line-height:1;
    letter-spacing:-.02em;
    box-shadow:0 3px 9px rgba(0,0,0,.38);
    transform-origin:center;
    animation:notificationBadgePulse 1.8s ease-in-out infinite;
  }
  .notification-count[hidden]{display:none}
  @keyframes notificationBadgePulse{
    0%,78%,100%{transform:scale(1)}
    84%{transform:scale(1.12)}
    90%{transform:scale(1)}
    96%{transform:scale(1.08)}
  }
  body.reduce-motion .notification-count{animation:none}
  html[data-theme="light"] .notification-count{border-color:rgba(255,255,255,.96)}
  .control-center,.spotlight-window,.mac-notification,.modal-wrapper .tc{
    background:rgba(34,34,37,.88);
    border-color:rgba(255,255,255,.18);
    box-shadow:var(--mac-shadow);
  }
  html[data-theme="light"] .modal-overlay{background:rgba(217,221,230,.74)}
  html[data-theme="light"] .modal-wrapper .tc{
    background:rgba(255,255,255,.97);
    border-color:rgba(0,0,0,.14);
    color:#1d1d1f;
    box-shadow:0 28px 80px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.95);
  }
  html[data-theme="light"] .modal-wrapper .th{
    background:rgba(246,246,248,.97);
    border-bottom-color:rgba(0,0,0,.1);
  }
  html[data-theme="light"] .modal-wrapper .tt,
  html[data-theme="light"] .modal-wrapper .modal-body-scroll,
  html[data-theme="light"] .modal-wrapper .modal-body-scroll p,
  html[data-theme="light"] .modal-wrapper .modal-body-scroll li{color:#2c2c2e!important}
  html[data-theme="light"] .modal-wrapper .modal-body-scroll strong,
  html[data-theme="light"] .modal-wrapper .modal-body-scroll h2,
  html[data-theme="light"] .modal-wrapper .modal-body-scroll h3{color:#111114!important}
  html[data-theme="light"] .modal-wrapper .btn-ghost{
    background:#f2f2f7;
    border-color:rgba(0,0,0,.14);
    color:#1d1d1f;
  }
  html[data-theme="light"] .modal-wrapper .btn-ghost:hover{background:#e8e8ed}

  html[data-theme="light"]{
    --mac-surface:rgba(255,255,255,.82);
    --mac-surface-strong:rgba(255,255,255,.94);
    --mac-stroke:rgba(0,0,0,.12);
    --mac-shadow:0 24px 70px rgba(41,45,62,.14),0 2px 8px rgba(41,45,62,.08);
  }
  html[data-theme="light"] body{background:#eef1f7}
  html[data-theme="light"] body::before{
    background:
      radial-gradient(circle at 12% 10%,rgba(10,132,255,.20),transparent 32%),
      radial-gradient(circle at 90% 14%,rgba(175,82,222,.16),transparent 34%),
      linear-gradient(145deg,#f7f9fc,#e9edf5);
  }
  html[data-theme="light"] .ph,
  html[data-theme="light"] .tc,
  html[data-theme="light"] .blog-card,
  html[data-theme="light"] .featured-card,
  html[data-theme="light"] .proj-card,
  html[data-theme="light"] .service-card,
  html[data-theme="light"] .proc-item{color:#1c1c1e}
  html[data-theme="light"] .ph-title,
  html[data-theme="light"] .sv,
  html[data-theme="light"] .s-name,
  html[data-theme="light"] .proj-name,
  html[data-theme="light"] .bc-title,
  html[data-theme="light"] .fc-title,
  html[data-theme="light"] .proc-title,
  html[data-theme="light"] .t-name,
  html[data-theme="light"] .blog-content-body h1,
  html[data-theme="light"] .blog-content-body h2,
  html[data-theme="light"] .blog-content-body h3,
  html[data-theme="light"] .blog-content-body h4{color:#1c1c1e}
  html[data-theme="light"] .cb{background:rgba(28,28,30,.92);color:#fff}
  html[data-theme="light"] .fi,
  html[data-theme="light"] .fs,
  html[data-theme="light"] .ft{background:rgba(255,255,255,.86);border-color:rgba(0,0,0,.16);color:#1c1c1e}
  html[data-theme="light"] .mac-dock{background:rgba(255,255,255,.74)}
  html[data-theme="light"] .home-content>.stats .mac-widget{
    border-color:rgba(29,29,31,.11)!important;
    box-shadow:0 12px 30px rgba(48,55,72,.11),inset 0 1px 0 rgba(255,255,255,.9);
  }
  html[data-theme="light"] .widget-weather{background:linear-gradient(145deg,#d9edff,#e5e7ff 58%,#f0e3ff)!important}
  html[data-theme="light"] .widget-calendar{background:linear-gradient(145deg,#fff1ee,#f8f1f2)!important}
  html[data-theme="light"] .widget-rings{background:linear-gradient(145deg,#f0e8ff,#eef1fb)!important}
  html[data-theme="light"] .widget-system{background:linear-gradient(145deg,#e6f7ef,#edf4f2)!important}
  html[data-theme="light"] .widget-ecosystem{background:linear-gradient(145deg,#e1efff,#eee8ff)!important}
  html[data-theme="light"] .widget-shortcuts{background:linear-gradient(145deg,#fff0e3,#f4ecf6)!important}
  html[data-theme="light"] .widget-play-console{background:linear-gradient(145deg,#e3f6e9,#eaf2ed)!important}
  html[data-theme="light"] .widget-android-device{background:linear-gradient(145deg,#e5efff,#eeeafd)!important}
  html[data-theme="light"] .mac-widget,
  html[data-theme="light"] .mac-widget div,
  html[data-theme="light"] .mac-widget strong,
  html[data-theme="light"] .mac-widget [style*="color:#fff"]{color:#202124!important}
  html[data-theme="light"] .mac-widget [style*="var(--text-muted)"],
  html[data-theme="light"] .play-release-copy span,
  html[data-theme="light"] .android-device-labels,
  html[data-theme="light"] .shortcut-copy small{color:#5f6368!important}
  html[data-theme="light"] .widget-weather svg:not(.widget-sparkline),
  html[data-theme="light"] .ecosystem-device svg,
  html[data-theme="light"] .shortcut-icon svg{stroke:#202124}
  html[data-theme="light"] .widget-weather .widget-sparkline path:not(.area){stroke:#2374d8}
  html[data-theme="light"] .widget-weather .widget-sparkline .area{fill:#2374d8}
  html[data-theme="light"] .ecosystem-device,
  html[data-theme="light"] .shortcut-action,
  html[data-theme="light"] .play-track,
  html[data-theme="light"] .android-device-shape{background:rgba(255,255,255,.52);border-color:rgba(0,0,0,.1)}
  html[data-theme="light"] .shortcut-copy strong,
  html[data-theme="light"] .shortcut-icon svg{color:#fff!important;stroke:#fff}
  html[data-theme="light"] .play-release-ring::before{background:#eef8f1}
  html[data-theme="light"] .widget-section-status{color:#0066cc}

  /* APPDEVELOPER desktop: macOS-inspired, brand-owned workspace */
  .top-menu-nav{display:flex;align-items:center;gap:2px;margin-left:18px}
  .top-menu-link{padding:5px 9px;border-radius:7px;color:var(--text-dim);font-size:12px;font-weight:620;line-height:1;text-decoration:none;transition:background .18s,color .18s}
  .top-menu-link:hover,.top-menu-link.active{background:rgba(255,255,255,.11);color:#fff}
  @media(min-width:901px){
    .top-menu-nav{
      gap:2px;
      padding:3px;
      border:1px solid rgba(255,255,255,.12);
      border-radius:11px;
      background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 14px rgba(0,0,0,.12);
    }
    .top-menu-link{
      --menu-rgb:100,210,255;
      display:inline-flex;
      align-items:center;
      gap:6px;
      position:relative;
      overflow:hidden;
      padding:6px 10px;
      border:1px solid transparent;
      background:transparent;
      color:rgba(255,255,255,.78);
      font-weight:680;
      white-space:nowrap;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
      transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s;
    }
    .top-menu-link::before{
      content:"";
      position:absolute;
      top:-45%;
      bottom:-45%;
      left:-34%;
      width:28%;
      border-radius:50%;
      background:linear-gradient(90deg,transparent,rgba(var(--menu-rgb),.34),rgba(255,255,255,.42),transparent);
      pointer-events:none;
      opacity:0;
      transform:skewX(-18deg);
      transition:left .48s cubic-bezier(.2,.75,.25,1),opacity .16s ease;
    }
    .top-menu-link>svg,.top-menu-link>span{position:relative;z-index:1}
    .top-menu-link svg{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:rgb(var(--menu-rgb));stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(var(--menu-rgb),.28))}
    .top-menu-home{--menu-rgb:10,132,255}
    .top-menu-services{--menu-rgb:191,90,242}
    .top-menu-projects{--menu-rgb:90,200,245}
    .top-menu-blog{--menu-rgb:255,159,10}
    .top-menu-contact{--menu-rgb:48,209,88}
    .top-menu-link:hover,.top-menu-link:focus-visible{
      background:rgba(var(--menu-rgb),.19);
      border-color:rgba(var(--menu-rgb),.58);
      color:#fff;
      box-shadow:0 0 14px rgba(var(--menu-rgb),.18),inset 0 1px 0 rgba(255,255,255,.12);
      outline:none;
    }
    .top-menu-link:hover::before,.top-menu-link:focus-visible::before{left:108%;opacity:1}
    .top-menu-link.active{
      background:rgba(var(--menu-rgb),.24);
      border-color:rgba(var(--menu-rgb),.68);
      color:#fff;
      box-shadow:0 0 16px rgba(var(--menu-rgb),.22),inset 0 1px 0 rgba(255,255,255,.13);
    }
    .top-menu-link.active svg{stroke:#fff;filter:drop-shadow(0 0 5px rgba(var(--menu-rgb),.78))}
    .top-brand img{width:27px;height:27px;filter:brightness(1.18) saturate(1.18) contrast(1.04);box-shadow:0 0 0 1px rgba(100,210,255,.28),0 0 13px rgba(10,132,255,.32),0 4px 12px rgba(0,0,0,.28);transition:filter .2s,box-shadow .2s,transform .2s}
    .top-brand .tb-text{color:#fff;text-shadow:0 0 10px rgba(100,210,255,.2)}
    .top-brand:hover img,.top-brand:focus-visible img{filter:brightness(1.28) saturate(1.24) contrast(1.06);box-shadow:0 0 0 1px rgba(100,210,255,.42),0 0 17px rgba(10,132,255,.42),0 5px 14px rgba(0,0,0,.32);transform:translateY(-1px)}
  }
  @media(min-width:1180px){
    #top-header .top-brand{min-width:184px;gap:11px}
    #top-header .top-brand .tb-text{font-size:14px;letter-spacing:.095em;white-space:nowrap}
    #top-header .top-menu-nav{margin-left:12px}
  }
  @media(min-width:901px) and (max-width:1439px){
    .header-legal-links{display:flex;gap:3px;margin-right:2px}
    #top-header .header-legal-link{width:31px;height:26px;padding:0;font-size:0;text-align:center}
    #top-header .header-legal-link::before{font:800 8px/1 var(--fc);letter-spacing:.02em;color:inherit}
    #top-header .header-legal-link:nth-child(1)::before{content:"GZL"}
    #top-header .header-legal-link:nth-child(2)::before{content:"KVK"}
    #top-header .header-legal-link:nth-child(3)::before{content:"ŞRT"}
    .mac-status-bar{flex:0 0 auto}
  }
  @media(min-width:901px) and (max-width:1050px){
    #top-header .top-brand{min-width:148px;gap:7px}
    #top-header .top-brand>div{display:block}
    #top-header .top-brand .tb-text{font-size:12px;letter-spacing:.045em;white-space:nowrap}
    #top-header .top-menu-nav{margin-left:6px}
    .top-menu-link{gap:4px;padding-left:7px;padding-right:7px;font-size:11px}
  }
  @media(min-width:901px) and (max-width:980px){
    .header-legal-links{display:none}
  }
  @media(min-width:901px) and (prefers-reduced-motion:reduce){.top-menu-link::before{display:none}.top-brand img{transition:none}}
  .top-header-left{display:flex;align-items:center;min-width:0}
  .workspace-windowbar{position:absolute;top:0;left:0;right:0;height:48px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);z-index:4}
  .workspace-lights{display:flex;align-items:center;gap:0}
  .workspace-light{width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent!important;box-shadow:none;cursor:pointer;position:relative;display:grid;place-items:center}
  .workspace-light::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--window-light);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
  .workspace-light:hover::after,.workspace-light:focus-visible::after{content:attr(data-symbol);position:absolute;inset:0;display:grid;place-items:center;color:rgba(0,0,0,.62);font:900 8px/1 var(--fh)}
  .workspace-light.close{--window-light:#ff5f57}.workspace-light.minimize{--window-light:#febc2e}.workspace-light.zoom{--window-light:#28c840}
  .workspace-nav{display:flex;align-items:center;gap:3px;margin-left:18px}
  .workspace-nav-button{width:27px;height:27px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--text-muted);font-size:18px;cursor:pointer;transition:background .16s,color .16s}
  .workspace-nav-button:hover{background:rgba(255,255,255,.09);color:var(--text)}
  .workspace-nav-button:disabled{opacity:.28;cursor:default}
  .workspace-title{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:12px;font-weight:650;white-space:nowrap}
  .workspace-title img{width:18px;height:18px;border-radius:5px;box-shadow:0 3px 10px rgba(0,0,0,.28)}
  .workspace-toolbar{margin-left:auto;display:flex;align-items:center;gap:8px}
  .workspace-pill{display:flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.045);color:var(--text-muted);font-size:10px;font-weight:650}
  .workspace-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(48,209,88,.65)}
  .desktop-shortcuts{position:fixed;top:86px;left:18px;z-index:6;display:flex;flex-direction:column;gap:18px}
  .desktop-shortcut{width:82px;display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;text-decoration:none;text-align:center;font-size:11px;font-weight:650;line-height:1.2;text-shadow:0 2px 7px rgba(0,0,0,.75)}
  button.desktop-shortcut{padding:0;border:0;background:transparent;font-family:var(--fh);cursor:pointer}
  .desktop-shortcut-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.07));box-shadow:0 12px 28px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.28);backdrop-filter:blur(18px);transition:transform .2s,box-shadow .2s}
  .desktop-shortcut-icon svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:1.6}
  .desktop-shortcut:hover .desktop-shortcut-icon{transform:translateY(-3px) scale(1.04);box-shadow:0 15px 32px rgba(0,0,0,.32),0 0 20px rgba(100,210,255,.2)}
  .desktop-shortcut-group{position:relative;width:82px;display:flex;flex-direction:column;align-items:center}
  .desktop-service-list{width:82px;display:flex;flex-direction:column;gap:2px;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.14)}
  .desktop-service-link{display:flex;align-items:center;gap:6px;width:100%;min-height:24px;padding:5px 6px;border-radius:8px;background:rgba(255,255,255,.055);color:rgba(255,255,255,.86);text-decoration:none;text-align:left;text-shadow:0 1px 4px rgba(0,0,0,.55);font-size:8px;font-weight:750;line-height:1.15;transition:background .16s,transform .16s,color .16s}
  .desktop-service-link::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--service-color,#64d2ff);box-shadow:0 0 9px color-mix(in srgb,var(--service-color,#64d2ff) 65%,transparent)}
  .desktop-service-link:hover,.desktop-service-link:focus-visible{background:rgba(255,255,255,.13);color:#fff;transform:translateX(3px);outline:none}
  .language-picker{position:relative}
  .desktop-language-picker{width:82px}
  .language-trigger{border:0;color:inherit;font-family:var(--fh);cursor:pointer}
  .desktop-language-trigger{width:82px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;background:transparent;color:#fff;text-align:center;font-size:11px;font-weight:650;line-height:1.2;text-shadow:0 2px 7px rgba(0,0,0,.75)}
  .language-icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:linear-gradient(145deg,rgba(10,132,255,.62),rgba(94,92,230,.35));box-shadow:0 12px 28px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.28);backdrop-filter:blur(18px);transition:transform .2s,box-shadow .2s}
  .language-icon svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.6}
  .desktop-language-trigger:hover .language-icon,.desktop-language-trigger[aria-expanded="true"] .language-icon{transform:translateY(-3px) scale(1.04);box-shadow:0 15px 32px rgba(0,0,0,.32),0 0 22px rgba(100,210,255,.32)}
  .language-current{display:flex;align-items:center;gap:4px}
  .language-current::after{content:"⌄";font-size:10px;transform:translateY(-1px)}
  .language-menu{position:absolute;display:none;padding:7px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(29,29,34,.92);box-shadow:0 20px 55px rgba(0,0,0,.46);backdrop-filter:blur(24px);z-index:20020}
  .language-picker.open .language-menu{display:block;animation:languageMenuIn .18s ease-out}
  .desktop-language-menu{top:0;left:calc(100% + 10px);width:174px}
  .language-option{width:100%;display:flex;align-items:center;gap:9px;padding:8px 9px;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.88);font:650 11px/1.2 var(--fh);text-align:left;cursor:pointer}
  .language-option:hover,.language-option:focus-visible{background:#0a84ff;color:#fff;outline:none}
  .language-option.active{background:rgba(10,132,255,.18);color:#64d2ff}
  .language-code{width:25px;color:inherit;font-size:9px;font-weight:850;letter-spacing:.08em}
  .mobile-language-picker{display:none}
  .mobile-language-trigger{min-width:34px;height:30px;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 7px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.06);color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em}
  .mobile-language-trigger svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7}
  .mobile-language-menu{top:calc(100% + 10px);right:0;width:178px}
  html[data-theme="light"] .language-menu{
    background:rgba(255,255,255,.96);
    border-color:rgba(0,0,0,.12);
    box-shadow:0 20px 55px rgba(48,55,72,.2);
  }
  html[data-theme="light"] .language-option{color:#1d1d1f}
  html[data-theme="light"] .language-option.active{
    background:rgba(10,132,255,.12);
    color:#0066cc;
  }
  html[data-theme="light"] .language-option:hover,
  html[data-theme="light"] .language-option:focus-visible{background:#0a84ff;color:#fff}
  html.language-loading .pw,html.language-loading #top-header,html.language-loading .desktop-shortcuts{opacity:.72}
  .pw,#top-header,.desktop-shortcuts{transition:opacity .22s ease}
  @keyframes languageMenuIn{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}
  .workspace-restore{position:fixed;right:22px;bottom:92px;z-index:10000;display:none;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(28,28,32,.82);color:#fff;box-shadow:0 14px 38px rgba(0,0,0,.38);backdrop-filter:blur(24px);cursor:pointer;font:700 11px/1 var(--fh)}
  .workspace-restore.visible{display:flex}
  .workspace-restore img{width:22px;height:22px;border-radius:6px}
  .pw.workspace-maximized{max-width:calc(100vw - 34px)!important;width:calc(100vw - 34px);min-height:calc(100vh - 96px);margin:56px 17px 40px!important;border-radius:16px}
  .pw.workspace-minimized,.pw.workspace-closed{opacity:0;transform:translateY(45vh) scale(.08);pointer-events:none;transition:opacity .34s,transform .42s cubic-bezier(.4,0,.2,1)}
  body.page-leaving .pw{opacity:0;transform:translateX(-24px) scale(.985);transition:opacity .18s,transform .18s}
  .desktop-context-menu{position:fixed;z-index:20000;display:none;min-width:190px;padding:7px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(30,30,34,.9);box-shadow:0 22px 60px rgba(0,0,0,.45);backdrop-filter:blur(24px)}
  .desktop-context-menu.open{display:block}
  .context-menu-title{padding:5px 9px 7px;color:var(--text-muted);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
  .context-menu-action{width:100%;padding:8px 9px;border:0;border-radius:8px;background:transparent;color:var(--text);font:650 11px/1.2 var(--fh);text-align:left;cursor:pointer}
  .context-menu-action:hover,.context-menu-action:focus-visible{background:#0a84ff;color:#fff;outline:none}
  body[data-wallpaper="morning"]::before{filter:saturate(.88) brightness(1.16)}
  body[data-wallpaper="day"]::before{filter:saturate(1.04) brightness(1.03)}
  body[data-wallpaper="evening"]::before{filter:saturate(1.16) hue-rotate(-8deg) brightness(.9)}
  body[data-wallpaper="night"]::before{filter:saturate(.94) brightness(.64)}
  .desktop-shortcuts.is-dragging{cursor:grabbing;user-select:none}
  .desktop-menu-restore{display:none}
  .desktop-menu-hide:focus-visible,.desktop-menu-restore:focus-visible{outline:2px solid #64d2ff;outline-offset:4px}
  @media(min-width:901px){
    .desktop-menu-hide{border:0;font-family:var(--fh);cursor:pointer}
    html.desktop-menu-hidden .mac-dock{
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transform:translateX(-50%) translateY(28px) scale(.9);
      transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s;
    }
    html.desktop-menu-hidden .mac-dock[data-dock-position="left"],
    html.desktop-menu-hidden .mac-dock[data-dock-position="right"]{transform:translateY(28px) scale(.9)}
    html.desktop-menu-hidden .desktop-menu-restore{display:flex}
    .home-content>.stats .mac-widget{cursor:grab}
    .home-content>.stats .mac-widget.widget-dragging{opacity:.48;cursor:grabbing;transform:scale(.98)}
    .home-content>.stats .mac-widget.widget-drop-target{outline:2px solid rgba(100,210,255,.65);outline-offset:3px}
  }

  @media(min-width:901px){
    #top-header{height:40px;padding:0 18px;background:rgba(20,20,23,.7);box-shadow:0 1px 0 rgba(255,255,255,.08)}
    .top-brand{gap:8px}
    .top-brand img{border-radius:6px}
    .top-brand .tb-text{font-size:13px;letter-spacing:.05em}
    .top-brand .tb-sub{display:none}
    .mac-status-bar{gap:8px;font-size:12px}
    .header-legal-link{padding:4px 7px;font-size:9px}
    .status-icon{width:25px;height:25px}
    #mac-clock{min-width:104px;font-size:12px}
    body::before{
      background:
        radial-gradient(ellipse at 16% 14%,rgba(10,132,255,.32),transparent 36%),
        radial-gradient(ellipse at 78% 12%,rgba(191,90,242,.30),transparent 34%),
        radial-gradient(ellipse at 56% 86%,rgba(255,55,95,.20),transparent 39%),
        linear-gradient(145deg,#07111f 0%,#171126 46%,#090d17 100%);
    }
    .pw{
      position:relative;
      width:auto;
      max-width:none;
      margin:76px 18px 60px 120px;
      padding:78px 36px 96px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:22px;
      background:linear-gradient(145deg,rgba(19,20,27,.86),rgba(13,14,20,.76));
      box-shadow:0 38px 100px rgba(0,0,0,.5),0 4px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.09);
      backdrop-filter:blur(38px) saturate(135%);
      -webkit-backdrop-filter:blur(38px) saturate(135%);
    }
    .ph{border-radius:18px;background:linear-gradient(135deg,rgba(10,132,255,.1),rgba(191,90,242,.08));border:1px solid rgba(255,255,255,.09);padding:28px;margin-bottom:34px;overflow:hidden}
    .ph::after{left:28px;width:100px}
    .mac-dock{bottom:14px;padding:9px 13px;gap:13px;border-radius:21px;background:rgba(31,31,36,.58);box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.13)}
    .mac-item{width:46px;height:46px}
    .mac-dock[data-dock-position="left"]{left:24px;right:auto;transform:none}
    .mac-dock[data-dock-position="right"]{left:auto;right:24px;transform:none}
  }
  html[data-theme="light"] .top-menu-link{color:#2c2c2e}
  html[data-theme="light"] .top-menu-link:hover,
  html[data-theme="light"] .top-menu-link.active{background:rgba(0,0,0,.075);color:#111}
  @media(min-width:901px){
    html[data-theme="light"] .top-menu-link{background:rgba(var(--menu-rgb),.09);border-color:rgba(var(--menu-rgb),.27);color:#242428}
    html[data-theme="light"] .top-menu-link:hover,
    html[data-theme="light"] .top-menu-link:focus-visible{background:rgba(var(--menu-rgb),.18);border-color:rgba(var(--menu-rgb),.52);color:#111;box-shadow:0 0 13px rgba(var(--menu-rgb),.15)}
    html[data-theme="light"] .top-menu-link.active{background:rgba(var(--menu-rgb),.22);border-color:rgba(var(--menu-rgb),.62);color:#111;box-shadow:0 0 15px rgba(var(--menu-rgb),.18)}
    html[data-theme="light"] .top-menu-nav{border-color:rgba(0,0,0,.12);background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42));box-shadow:inset 0 1px 0 #fff,0 4px 13px rgba(48,55,72,.1)}
    html[data-theme="light"] .top-menu-link:not(.active){background:transparent;border-color:transparent;color:#3a3a3c}
  }
  html[data-theme="light"] .workspace-windowbar{background:rgba(247,247,249,.72);border-bottom-color:rgba(0,0,0,.1)}
  html[data-theme="light"] .workspace-title,
  html[data-theme="light"] .workspace-pill{color:#3a3a3c}
  html[data-theme="light"] .workspace-pill{background:rgba(0,0,0,.035);border-color:rgba(0,0,0,.1)}
  @media(min-width:901px){
    html[data-theme="light"] #top-header{background:rgba(246,247,250,.78);box-shadow:0 1px 0 rgba(0,0,0,.09)}
    html[data-theme="light"] body::before{
      background:
        radial-gradient(ellipse at 14% 14%,rgba(10,132,255,.25),transparent 36%),
        radial-gradient(ellipse at 80% 12%,rgba(191,90,242,.19),transparent 35%),
        radial-gradient(ellipse at 58% 86%,rgba(255,55,95,.12),transparent 40%),
        linear-gradient(145deg,#dce8f7,#ede5f4 48%,#dfe8f1);
    }
    html[data-theme="light"] .pw{background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(244,246,251,.8));border-color:rgba(0,0,0,.12);box-shadow:0 38px 100px rgba(51,58,75,.2),0 4px 18px rgba(51,58,75,.1),inset 0 1px 0 #fff}
    html[data-theme="light"] .ph{background:linear-gradient(135deg,rgba(10,132,255,.08),rgba(191,90,242,.06));border-color:rgba(0,0,0,.09)}
    html[data-theme="light"] .desktop-shortcut{color:#1d1d1f;text-shadow:0 1px 3px rgba(255,255,255,.8)}
    html[data-theme="light"] .desktop-shortcut-icon{background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.5));border-color:rgba(0,0,0,.1)}
    html[data-theme="light"] .desktop-shortcut-icon svg{stroke:#1d1d1f}
    html[data-theme="light"] .desktop-service-list{border-top-color:rgba(0,0,0,.13)}
    html[data-theme="light"] .desktop-service-link{background:rgba(255,255,255,.58);color:#2c2c2e;text-shadow:none;box-shadow:0 3px 9px rgba(48,55,72,.08)}
    html[data-theme="light"] .desktop-service-link:hover,
    html[data-theme="light"] .desktop-service-link:focus-visible{background:rgba(0,0,0,.06);color:#111}
    html[data-theme="light"] .desktop-language-trigger{color:#1d1d1f;text-shadow:0 1px 3px rgba(255,255,255,.8)}
    html[data-theme="light"] .language-icon{border-color:rgba(0,0,0,.1)}
    html[data-theme="light"] .workspace-nav-button:hover{background:rgba(0,0,0,.06)}
    html[data-theme="light"] .workspace-restore,
    html[data-theme="light"] .desktop-context-menu{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.12);color:#1d1d1f;box-shadow:0 22px 60px rgba(48,55,72,.2)}
    html[data-theme="light"] .context-menu-action{color:#1d1d1f}
    html[data-theme="light"] .context-menu-action:hover{color:#fff}
  }

  @media(max-width:900px){
    .top-menu-nav,.desktop-shortcuts,.workspace-windowbar,.desktop-menu-hide{display:none!important}
    #mac-clock{display:none}
    #top-header{
      height:56px;
      padding:0 12px;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      column-gap:8px;
    }
    .pw{padding:78px 14px 126px}
    .ph{padding:22px 20px;border-radius:18px}
    .ph::before{margin-bottom:20px}
    .ph-title{font-size:clamp(25px,8vw,38px)}
    .ph-sub{font-size:14px}
    .services-grid .tb{grid-template-columns:1fr}
    #main{padding-bottom:130px}
    .mac-dock{left:8px;right:8px;width:auto;max-width:none;transform:none;bottom:8px;padding:7px 5px 6px;gap:3px;border-radius:20px}
    .mac-notification-container{top:64px;right:12px;width:calc(100vw - 24px)}
    .top-header-left{min-width:0;max-width:none;overflow:hidden}
    .top-brand{min-width:0;width:100%;gap:7px;overflow:hidden}
    .top-brand>div{min-width:0;overflow:hidden}
    .top-brand img{width:28px;height:28px;flex:0 0 28px}
    .top-brand .tb-text{
      display:block;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:12px;
      letter-spacing:.055em;
    }
    .mac-status-bar{flex:0 0 auto;gap:4px;min-width:0}
    .mobile-language-picker{display:block}
    html[data-theme="light"] .mobile-language-trigger{background:rgba(0,0,0,.045);border-color:rgba(0,0,0,.12);color:#1d1d1f}
    html[data-theme="light"] .mobile-language-menu{box-shadow:0 16px 40px rgba(48,55,72,.18)}
    .notification-status-icon{
      width:34px;
      height:32px;
      margin-right:3px;
      overflow:visible;
      isolation:isolate;
    }
    .notification-status-icon svg{width:17px;height:17px}
    .notification-count{
      top:-5px!important;
      right:-2px!important;
      min-width:17px;
      height:17px;
      padding:0 3px;
      border-width:2px;
      font-size:8px;
    }
    .mac-item{min-width:0;padding:2px 1px 4px;overflow:hidden;gap:0}
    .mac-item svg{width:35px;height:35px;padding:7px}
    .mac-label{display:block!important;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:8px;line-height:1.15;color:rgba(255,255,255,.94);letter-spacing:-.02em;margin:-3px 0 5px}
    .mac-label-full{display:none}
    .mac-label-short{display:inline}
    html[data-theme="light"] .mac-label{color:#2c2c2e}
    .mac-item.active .mac-label{color:#64d2ff;text-shadow:none}
    .tb{padding:20px}
    .service-detail-grid{grid-template-columns:1fr}
    .subcategory-detail-grid{grid-template-columns:1fr}
    .blog-checklist{grid-template-columns:1fr}
    .blog-article-cta{align-items:stretch;flex-direction:column}
  }
  @media(max-width:560px){
    .home-content>.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .mac-widget{min-height:128px;padding:14px}
    .home-content>.stats .mac-widget{min-height:142px;padding:14px}
    .proj-grid{grid-template-columns:1fr}
    .blog-grid{grid-template-columns:1fr}
    .contact-grid,.about-grid{gap:16px}
    .service-subgrid{grid-template-columns:1fr}
    .tt{max-width:55%;font-size:11px}
  }
  @media(max-width:380px){
    .home-content>.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .mac-label{font-size:8px}
    .mac-item svg{width:32px;height:32px}
    #top-header{padding:0 9px;column-gap:5px}
    .top-brand{gap:5px}
    .top-brand img{width:26px;height:26px;flex-basis:26px}
    .top-brand .tb-text{font-size:10.5px;letter-spacing:.035em}
    .mac-status-bar{gap:2px}
    .status-icon{width:26px;height:28px}
    .notification-status-icon{width:31px;height:30px;margin-right:2px}
    .mobile-language-trigger{min-width:42px;height:29px;padding:0 6px}
  }

  .regional-location-list,.regional-intent-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0;padding:0;list-style:none}
  .regional-location-list li,.regional-intent-list li{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text-dim)}
  .regional-intent-list code{white-space:normal;color:var(--cyan);font-family:var(--fm)}
  .regional-sector-grid,.regional-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 28px}
  .regional-sector-card,.regional-service-link{display:flex;flex-direction:column;gap:9px;padding:18px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,var(--surface),transparent)}
  .regional-sector-card h3{margin:0;color:var(--text);font-size:16px}
  .regional-sector-card p{margin:0!important}
  .regional-service-link{color:var(--text);text-decoration:none;transition:border-color .2s ease,transform .2s ease}
  .regional-service-link:hover{border-color:var(--cyan);transform:translateY(-2px)}
  .regional-service-link span{color:var(--text-dim);line-height:1.6}
  .regional-service-link b{color:var(--cyan);font-size:12px}
  @media(max-width:700px){
    .regional-location-list,.regional-intent-list,.regional-sector-grid,.regional-service-grid{grid-template-columns:1fr}
  }

  /* Blog reading and discovery refinements */
  .blog-card{min-height:390px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 14px 34px rgba(0,0,0,.18)}
  .blog-card:focus-visible,.featured-card:focus-visible,.bf:focus-visible,.blog-page-link:focus-visible{outline:3px solid rgba(100,210,255,.55);outline-offset:3px}
  .blog-card .bc-body{padding:20px 20px 17px}
  .blog-card .bc-footer{padding:14px 20px;background:rgba(0,0,0,.08)}
  .featured-card{border-radius:20px;background:linear-gradient(135deg,rgba(10,132,255,.12),rgba(191,90,242,.08));box-shadow:0 18px 44px rgba(0,0,0,.2)}
  .featured-card .fc-img{background:radial-gradient(circle,rgba(100,210,255,.13),transparent 64%)}
  .blog-detail-hero{max-width:1050px;margin-left:auto;margin-right:auto}
  .blog-detail-hero .ph-title{max-width:900px;font-size:clamp(30px,4.4vw,54px);line-height:1.12}
  .blog-detail-deck{max-width:820px;margin:18px 0 0;color:var(--text-dim);font-size:17px;line-height:1.7}
  .blog-meta-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
  .blog-meta-row span{display:inline-flex;align-items:center;min-height:32px;padding:7px 11px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.06);color:var(--text-dim);font-size:11px;font-weight:700}
  .blog-detail-actions{max-width:980px;margin:0 auto 18px}
  .blog-back-link{padding:9px 16px;display:inline-flex;align-items:center;gap:8px}
  .blog-reader-shell{max-width:980px;margin-left:auto;margin-right:auto;border-radius:22px}
  .blog-reader-shell>.tb{padding:clamp(26px,5vw,58px)}
  .blog-reader-shell .blog-content-body{max-width:790px;margin:0 auto;font-size:17px;line-height:1.88;color:var(--text-dim)}
  .blog-reader-shell .blog-content-body p{margin-bottom:24px}
  .blog-reader-shell .blog-content-body h2{margin-top:48px;margin-bottom:18px;padding-bottom:12px;font-size:clamp(24px,3vw,30px);line-height:1.28}
  .blog-reader-shell .blog-content-body h3{margin-top:34px;font-size:21px;line-height:1.35}
  .blog-reader-shell .blog-content-body li{margin-bottom:11px;line-height:1.75}
  .blog-reader-shell .blog-content-body table{display:block;max-width:100%;overflow-x:auto;margin:28px 0;border-radius:12px}
  .blog-reader-shell .blog-content-body th,.blog-reader-shell .blog-content-body td{min-width:160px;padding:14px;line-height:1.55}
  html[data-theme="light"] .blog-toolbar{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.1)}
  html[data-theme="light"] .blog-meta-row span{background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.1);color:#48484a}
  @media(max-width:1100px){
    .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(max-width:820px){
    .blog-toolbar{align-items:stretch;flex-direction:column;padding:10px;gap:11px}
    .blog-filters{flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
    .blog-filters .bf{flex:0 0 auto;white-space:nowrap}
    .blog-count{padding:0 4px}
    .blog-reader-shell>.tb{padding:28px 22px}
  }
  @media(max-width:620px){
    .blog-grid{grid-template-columns:1fr;gap:16px}
    .blog-card{min-height:0}
    .blog-detail-hero .ph-title{font-size:clamp(27px,8vw,38px)}
    .blog-detail-deck{font-size:15px;line-height:1.65}
    .blog-reader-shell .blog-content-body{font-size:16px;line-height:1.78}
    .blog-reader-shell .blog-content-body h2{margin-top:38px;font-size:23px}
    .blog-reader-shell>.tb{padding:24px 17px}
    .blog-reader-shell .th{padding-left:14px;padding-right:14px}
    .blog-reader-shell .tt{max-width:65%}
  }

  /* Compact editorial list view */
  .blog-list{display:flex;flex-direction:column;gap:12px}
  .blog-list .blog-card{display:grid;grid-template-columns:132px minmax(0,1fr) 150px;min-height:166px;border-radius:17px}
  .blog-list .bc-img{height:auto;min-height:166px;border:0;border-right:1px solid var(--border);font-size:40px}
  .blog-list .bc-body{justify-content:center;padding:19px 24px}
  .blog-list .bc-cat{margin-bottom:7px}
  .blog-list .bc-title{margin-bottom:7px;font-size:18px;line-height:1.35}
  .blog-list .bc-excerpt{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;flex:none;font-size:13px;line-height:1.65;visibility:visible;opacity:1}
  .blog-list .bc-footer{align-items:flex-end;justify-content:center;flex-direction:column;gap:12px;padding:18px 20px;border-top:0;border-left:1px solid var(--border);background:rgba(0,0,0,.07)}
  .blog-list .bc-read{font-size:10px}
  .blog-topic-icon{width:62px;height:62px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.055));box-shadow:0 12px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.22);color:#64d2ff}
  .blog-svg-icon{width:31px;height:31px!important;display:block;fill:none;stroke:currentColor}
  .blog-topic-maliyet{color:#ffd60a;background:linear-gradient(145deg,rgba(255,214,10,.22),rgba(255,159,10,.08))}
  .blog-topic-teknoloji{color:#64d2ff;background:linear-gradient(145deg,rgba(100,210,255,.22),rgba(10,132,255,.08))}
  .blog-topic-kurumsal{color:#bf5af2;background:linear-gradient(145deg,rgba(191,90,242,.22),rgba(94,92,230,.08))}
  .blog-topic-guvenlik{color:#32d74b;background:linear-gradient(145deg,rgba(50,215,75,.2),rgba(48,209,88,.07))}
  .blog-topic-bolgesel{color:#ff9f0a;background:linear-gradient(145deg,rgba(255,159,10,.22),rgba(255,69,58,.07))}
  .blog-topic-hizmet{color:#64d2ff;background:linear-gradient(145deg,rgba(10,132,255,.24),rgba(191,90,242,.09))}
  .blog-detail-topic{display:flex;align-items:center;gap:11px;margin:14px 0 15px;color:var(--text-dim);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
  .blog-detail-topic .blog-topic-icon{width:44px;height:44px;border-radius:13px}
  .blog-detail-topic .blog-svg-icon{width:23px;height:23px!important}
  html[data-theme="light"] .blog-topic-icon{border-color:rgba(0,0,0,.08);box-shadow:0 10px 24px rgba(48,55,72,.13),inset 0 1px 0 rgba(255,255,255,.8)}
  @media(max-width:780px){
    .blog-list .blog-card{grid-template-columns:88px minmax(0,1fr);min-height:0}
    .blog-list .bc-img{min-height:120px;font-size:30px}
    .blog-list .bc-body{padding:16px 17px}
    .blog-list .bc-title{font-size:16px}
    .blog-list .bc-excerpt{-webkit-line-clamp:2;font-size:12px}
    .blog-list .bc-footer{grid-column:1/-1;align-items:center;justify-content:space-between;flex-direction:row;padding:11px 15px;border-top:1px solid var(--border);border-left:0}
    .blog-list .blog-topic-icon{width:48px;height:48px;border-radius:14px}
    .blog-list .blog-svg-icon{width:25px;height:25px!important}
  }
  @media(max-width:440px){
    .blog-list .blog-card{grid-template-columns:70px minmax(0,1fr)}
    .blog-list .bc-img{min-height:112px;font-size:27px}
    .blog-list .bc-body{padding:14px}
    .blog-list .bc-title{font-size:15px}
  }

  .blog-feed-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin:34px 0 18px;padding:0 4px}
  .blog-feed-heading h2{margin:7px 0 0;color:var(--text);font-family:var(--fh);font-size:clamp(21px,2.6vw,30px);line-height:1.25;letter-spacing:-.025em}
  .blog-feed-heading p{max-width:310px;margin:0;color:var(--text-muted);font-size:12px;line-height:1.6;text-align:right}
  .blog-feed-kicker{display:inline-flex;align-items:center;gap:8px;color:#64d2ff;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
  .blog-feed-kicker i{width:8px;height:8px;border-radius:50%;background:#ff453a;box-shadow:0 0 12px rgba(255,69,58,.75)}
  .blog-feed-loader{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;min-height:116px;margin:18px 0 8px;color:var(--text-muted);font-size:12px;text-align:center}
  .blog-feed-spinner{display:none;width:24px;height:24px;border:2px solid rgba(100,210,255,.18);border-top-color:#64d2ff;border-radius:50%;animation:blogFeedSpin .8s linear infinite}
  .blog-feed-loader.loading .blog-feed-spinner{display:block}
  .blog-feed-loader.complete .blog-feed-spinner,.blog-feed-loader.complete .blog-load-more{display:none}
  .blog-load-more{min-width:190px;justify-content:center}
  .blog-feed-enabled .blog-pagination{display:none}
  .blog-card.feed-added{animation:blogFeedReveal .48s cubic-bezier(.2,.75,.25,1) both}
  @keyframes blogFeedSpin{to{transform:rotate(360deg)}}
  @keyframes blogFeedReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  @media(prefers-reduced-motion:reduce){.blog-card.feed-added{animation:none}.blog-feed-spinner{animation-duration:1.8s}}
  @media(max-width:700px){
    .blog-feed-heading{align-items:flex-start;flex-direction:column;gap:8px;margin-top:27px}
    .blog-feed-heading p{text-align:left}
  }

  /* Service chooser: clear color identities with Safari-safe solid fallbacks */
  .service-ios{--service-accent:#0a84ff;--service-rgb:10,132,255}
  .service-android{--service-accent:#32d74b;--service-rgb:50,215,75}
  .service-flutter{--service-accent:#64d2ff;--service-rgb:100,210,255}
  .service-saas{--service-accent:#bf5af2;--service-rgb:191,90,242}
  .service-uiux{--service-accent:#ff375f;--service-rgb:255,55,95}
  .service-eticaret{--service-accent:#ff9f0a;--service-rgb:255,159,10}
  .service-danismanlik{--service-accent:#ffd60a;--service-rgb:255,214,10}
  .service-picker{margin:0 0 34px;padding:22px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:#15161d;background:linear-gradient(145deg,rgba(28,29,38,.96),rgba(17,18,25,.96));box-shadow:0 18px 48px rgba(0,0,0,.24)}
  .service-picker-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:17px}
  .service-picker-heading h2{margin:5px 0 0;color:var(--text);font-family:var(--fh);font-size:clamp(21px,2.5vw,30px);line-height:1.2;letter-spacing:-.025em}
  .service-picker-heading p{max-width:470px;margin:0;color:var(--text-muted);font-size:13px;line-height:1.6;text-align:right}
  .service-picker-kicker{color:#64d2ff;font-size:10px;font-weight:850;letter-spacing:.15em}
  .service-picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .service-picker-card{display:grid;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:10px;min-height:76px;padding:12px;border:1px solid rgba(var(--service-rgb),.34);border-radius:15px;background:rgba(var(--service-rgb),.105);color:var(--text);text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.07);transition:transform .2s,border-color .2s,background-color .2s,box-shadow .2s}
  .service-picker-card:hover{transform:translateY(-2px);border-color:rgba(var(--service-rgb),.78);background:rgba(var(--service-rgb),.19);box-shadow:0 12px 28px rgba(var(--service-rgb),.13),inset 0 1px 0 rgba(255,255,255,.1)}
  .service-picker-card:focus-visible{outline:3px solid rgba(var(--service-rgb),.48);outline-offset:3px}
  .service-picker-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(var(--service-rgb),.4);border-radius:12px;background:rgba(var(--service-rgb),.17);color:var(--service-accent)}
  .service-picker-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .service-picker-copy{display:flex;min-width:0;flex-direction:column;gap:4px}
  .service-picker-copy strong{font-size:12px;line-height:1.35}
  .service-picker-copy small{overflow:hidden;color:var(--text-muted);font-size:9px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
  .service-picker-arrow{color:var(--service-accent);font-size:18px;font-weight:800;text-align:center}
  .service-card-window{scroll-margin-top:76px;border-color:rgba(var(--service-rgb),.4)!important;background:#15161d!important;background:linear-gradient(145deg,rgba(var(--service-rgb),.13),rgba(22,23,30,.97) 42%)!important;box-shadow:0 18px 48px rgba(0,0,0,.25),inset 4px 0 0 var(--service-accent)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .service-card-window:hover{border-color:rgba(var(--service-rgb),.78)!important;box-shadow:0 24px 62px rgba(0,0,0,.34),0 0 28px rgba(var(--service-rgb),.11),inset 4px 0 0 var(--service-accent)!important}
  .service-card-window .th{background:rgba(var(--service-rgb),.105);border-bottom-color:rgba(var(--service-rgb),.24)}
  .service-card-window .tt,.service-card-window .s-name a{color:var(--service-accent)}
  .service-card-window .s-name{margin:0 0 14px;font-size:17px;line-height:1.3;letter-spacing:0;text-transform:none}
  .service-card-window .s-name a{text-decoration:none}
  .service-card-window .s-name a:hover{text-decoration:underline;text-underline-offset:4px}
  .service-card-window .s-icon{border:1px solid rgba(var(--service-rgb),.38);background:rgba(var(--service-rgb),.16)!important;color:var(--service-accent)!important}
  .service-card-window .feat-list li{border:1px solid rgba(var(--service-rgb),.12);background:rgba(var(--service-rgb),.055)}
  .service-card-window .feat-list li::before,.service-card-window .service-subitem-action{color:var(--service-accent)}
  .service-card-window .service-subitem:hover{border-color:rgba(var(--service-rgb),.5);background:rgba(var(--service-rgb),.13)}
  .service-card-window .service-subitem-name::before{background:var(--service-accent);box-shadow:0 0 8px rgba(var(--service-rgb),.6)}
  .service-card-window .tp.a{border-color:rgba(var(--service-rgb),.55);color:var(--service-accent)}
  .service-detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}

  /* Conversion-oriented service blog articles */
  .blog-card[data-filter="hizmet"]{border-color:rgba(100,210,255,.32);background:linear-gradient(145deg,rgba(10,132,255,.12),rgba(191,90,242,.06),rgba(255,255,255,.025))}
  .blog-card[data-filter="hizmet"] .bc-cat{color:#64d2ff}
  .blog-card[data-filter="hizmet"] .bc-open{color:#64d2ff}
  .service-blog-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0 0 34px;padding:20px;border:1px solid rgba(var(--service-rgb),.38);border-radius:18px;background:rgba(var(--service-rgb),.11);box-shadow:inset 4px 0 0 var(--service-accent)}
  .service-blog-cta>div{display:flex;min-width:0;flex-direction:column;gap:5px}
  .service-blog-cta span{color:var(--service-accent);font-size:9px;font-weight:850;letter-spacing:.14em}
  .service-blog-cta strong{color:var(--text);font-family:var(--fh);font-size:20px;line-height:1.3}
  .service-blog-cta small{color:var(--text-muted);font-size:12px;line-height:1.55}
  .service-blog-cta .btn{flex:0 0 auto}
  .service-blog-audience{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0!important;list-style:none!important}
  .service-blog-audience li{position:relative;margin:0!important;padding:13px 14px 13px 35px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.035)}
  .service-blog-audience li::before{content:"→";position:absolute;left:14px;color:#64d2ff;font-weight:850}
  .service-blog-outcomes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0!important;list-style:none!important}
  .service-blog-outcomes li{display:flex;align-items:center;gap:10px;margin:0!important;padding:14px;border:1px solid rgba(50,215,75,.2);border-radius:12px;background:rgba(50,215,75,.055)}
  .service-blog-outcomes li span{color:#32d74b;font-weight:900}
  .service-blog-section{margin-top:42px}
  .service-blog-section>ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:18px 0 0!important;padding:0!important;list-style:none!important}
  .service-blog-section>ul li{position:relative;margin:0!important;padding:11px 12px 11px 31px;border-left:2px solid #64d2ff;background:rgba(10,132,255,.055)}
  .service-blog-section>ul li::before{content:"✓";position:absolute;left:12px;color:#64d2ff;font-weight:850}
  .service-blog-decisions{display:grid;gap:9px;padding:0!important;list-style:none!important}
  .service-blog-decisions li{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;gap:9px;margin:0!important;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.035)}
  .service-blog-decisions strong{color:#bf5af2}
  .service-blog-final-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding-top:24px;border-top:1px solid var(--border)}
  html[data-theme="light"] .service-blog-cta{background:rgba(var(--service-rgb),.09)}
  html[data-theme="light"] .blog-card[data-filter="hizmet"]{background:linear-gradient(145deg,rgba(10,132,255,.1),rgba(191,90,242,.05),rgba(255,255,255,.9))}
  @media(max-width:700px){
    .service-blog-cta{align-items:stretch;flex-direction:column;padding:17px}
    .service-blog-cta .btn{justify-content:center}
    .service-blog-audience,.service-blog-outcomes,.service-blog-section>ul{grid-template-columns:1fr}
    .service-blog-final-actions{flex-direction:column}
    .service-blog-final-actions .btn{justify-content:center}
  }

  /* Large blurred layers are expensive in Safari and during scrolling. */
  .tc,.blog-card,.featured-card,.service-card,.proc-item,.mac-widget{backdrop-filter:none;-webkit-backdrop-filter:none}
  @media(min-width:901px){.pw{backdrop-filter:none;-webkit-backdrop-filter:none}}
  @supports(content-visibility:auto){
    .services-grid .service-card-window{content-visibility:auto;contain-intrinsic-size:auto 640px}
    .blog-list .blog-card{content-visibility:auto;contain-intrinsic-size:auto 166px}
    .proc-row .proc-item{content-visibility:auto;contain-intrinsic-size:auto 150px}
  }
  html[data-theme="light"] .service-picker{border-color:rgba(0,0,0,.1);background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(243,245,250,.95));box-shadow:0 16px 42px rgba(48,55,72,.12)}
  html[data-theme="light"] .service-picker-card{border-color:rgba(var(--service-rgb),.3);background:rgba(var(--service-rgb),.09)}
  html[data-theme="light"] .service-card-window{background:linear-gradient(145deg,rgba(var(--service-rgb),.13),rgba(255,255,255,.96) 44%)!important;box-shadow:0 18px 44px rgba(48,55,72,.13),inset 4px 0 0 var(--service-accent)!important}
  @media(max-width:980px){.service-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:620px){
    .service-picker{padding:17px;margin-bottom:28px}
    .service-picker-heading{align-items:flex-start;flex-direction:column;gap:8px}
    .service-picker-heading p{text-align:left}
    .service-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .service-picker-card{grid-template-columns:34px minmax(0,1fr);gap:8px;min-height:72px;padding:9px}
    .service-picker-icon{width:34px;height:34px;border-radius:10px}
    .service-picker-icon svg{width:19px;height:19px}
    .service-picker-copy strong{font-size:10.5px;line-height:1.25}
    .service-picker-copy small{font-size:7.5px}
    .service-picker-arrow{display:none}
    .services-grid .tb{padding:20px}
  }