:root{
      --bg:#0a0d12;
      --panel:#111722;
      --panel-2:#0f141d;
      --line:rgba(255,255,255,.08);
      --text:#f5f7fb;
      --muted:#9ba7b7;
      --accent:#7dd3fc;
      --accent-2:#a78bfa;
      --success:#5ee6a8;
      --warning:#f4c95d;
      --shadow:0 20px 60px rgba(0,0,0,.35);
      --radius:24px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 15% 0%, rgba(125,211,252,.08), transparent 26%),
        radial-gradient(circle at 90% 10%, rgba(167,139,250,.08), transparent 24%),
        var(--bg);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height:1.6;
    }

    a{color:inherit;text-decoration:none}
    .wrap{width:min(1180px,calc(100% - 40px));margin:auto}

    .nav{
      position:sticky;top:0;z-index:20;
      backdrop-filter:blur(18px);
      background:rgba(10,13,18,.72);
      border-bottom:1px solid var(--line);
    }
    .nav-inner{
      min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px;
    }
    .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.02em}
    .brand-mark{
      width:36px;height:36px;border-radius:12px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      color:#081019;font-weight:900;
      box-shadow:0 8px 30px rgba(125,211,252,.18);
    }
    .nav-links{display:flex;gap:20px;color:var(--muted);font-size:14px}
    .nav-links a:hover{color:var(--text)}

    .hero{padding:110px 0 72px}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 12px;border:1px solid var(--line);border-radius:999px;
      color:#c8d4e3;background:rgba(255,255,255,.025);font-size:13px;
    }
    .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 6px rgba(94,230,168,.08)}
    h1{
      margin:24px 0 20px;
      font-size:clamp(48px,8vw,94px);
      line-height:.96;letter-spacing:-.055em;
      max-width:1000px;
    }
    .gradient-text{
      background:linear-gradient(90deg,#fff 0%,#bcd9ea 40%,#a78bfa 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .hero p{
      max-width:760px;font-size:20px;color:var(--muted);margin:0 0 30px;
    }
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      min-height:48px;padding:0 18px;border-radius:14px;border:1px solid var(--line);
      font-weight:700;font-size:14px;
    }
    .btn-primary{background:#f7f9fc;color:#0c1118;border-color:#f7f9fc}
    .btn-secondary{background:rgba(255,255,255,.03)}

    .stats{
      margin-top:58px;display:grid;grid-template-columns:repeat(4,1fr);
      border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.02)
    }
    .stat{padding:24px;border-right:1px solid var(--line)}
    .stat:last-child{border-right:0}
    .stat strong{font-size:28px;display:block}
    .stat span{font-size:13px;color:var(--muted)}

    section{padding:72px 0}
    .section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}
    .kicker{color:var(--accent);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.14em}
    h2{font-size:clamp(32px,4vw,52px);margin:8px 0 0;letter-spacing:-.04em;line-height:1.05}
    .section-head p{max-width:540px;color:var(--muted);margin:0}

    .services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .service{
      padding:24px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
      border:1px solid var(--line);
    }
    .service .num{font-size:12px;color:var(--muted);margin-bottom:34px}
    .service h3{font-size:19px;margin:0 0 8px}
    .service p{margin:0;color:var(--muted);font-size:14px}

    .projects{display:grid;gap:20px}
    .project{
      position:relative;overflow:hidden;
      display:grid;grid-template-columns:1.05fr .95fr;gap:34px;
      padding:34px;border-radius:var(--radius);
      background:
        linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
      border:1px solid var(--line);box-shadow:var(--shadow);
    }
    .project:after{
      content:"";position:absolute;right:-120px;top:-120px;width:300px;height:300px;border-radius:50%;
      background:radial-gradient(circle,rgba(125,211,252,.08),transparent 66%);pointer-events:none;
    }
    .project-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
    .tag{
      padding:7px 10px;border-radius:999px;border:1px solid var(--line);
      background:rgba(255,255,255,.025);font-size:12px;color:#c6d1de;
    }
    .status-live{color:#baf9da;border-color:rgba(94,230,168,.25);background:rgba(94,230,168,.06)}
    .status-dev{color:#ffe7a3;border-color:rgba(244,201,93,.28);background:rgba(244,201,93,.06)}
    .project h3{font-size:32px;margin:0 0 10px;letter-spacing:-.035em}
    .project .lead{font-size:16px;color:#c4ceda;margin:0 0 22px;max-width:620px}
    .stack{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
    .stack span{font-size:12px;color:var(--muted);padding:6px 9px;border-radius:10px;background:#0b1017;border:1px solid var(--line)}

    .project-link{
      display:inline-flex;align-items:center;gap:8px;margin-top:18px;
      font-size:13px;font-weight:800;color:#dff5ff;
      padding:9px 12px;border-radius:12px;border:1px solid rgba(125,211,252,.22);
      background:rgba(125,211,252,.06);
      transition:.2s ease;
    }
    .project-link:hover{
      transform:translateY(-1px);
      background:rgba(125,211,252,.10);
      border-color:rgba(125,211,252,.36);
    }

    .features{
      display:grid;grid-template-columns:1fr 1fr;gap:10px;
      align-content:start;padding-top:8px
    }
    .feature{
      min-height:94px;padding:16px;border-radius:16px;background:rgba(7,11,17,.55);border:1px solid var(--line)
    }
    .feature strong{display:block;font-size:14px;margin-bottom:5px}
    .feature span{font-size:12.5px;color:var(--muted)}

    .process{
      display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:28px
    }
    .process-item{
      padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)
    }
    .process-item b{font-size:12px;color:var(--accent)}
    .process-item p{font-size:13px;color:var(--muted);margin:8px 0 0}

    .cta{
      margin:48px 0 90px;padding:44px;border-radius:28px;border:1px solid var(--line);
      background:
        radial-gradient(circle at 85% 20%,rgba(167,139,250,.12),transparent 30%),
        radial-gradient(circle at 15% 0%,rgba(125,211,252,.1),transparent 32%),
        #0e141d;
      display:flex;justify-content:space-between;gap:30px;align-items:center;
    }
    .cta h3{font-size:34px;margin:0 0 10px;letter-spacing:-.03em}
    .cta p{margin:0;color:var(--muted);max-width:620px}

    footer{
      padding:26px 0 38px;border-top:1px solid var(--line);color:var(--muted);font-size:13px
    }


    /* Modern digital layer */
    body::before{
      content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
      background-image:
        linear-gradient(rgba(125,211,252,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(125,211,252,.025) 1px,transparent 1px);
      background-size:54px 54px;
      -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 82%);
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 82%);
    }

    .brand-copy{display:flex;flex-direction:column;line-height:1.05}
    .brand-copy small{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.08em;margin-top:4px}
    .author-chip{
      display:inline-flex;align-items:center;gap:9px;
      padding:7px 11px;border-radius:999px;border:1px solid var(--line);
      background:rgba(255,255,255,.025);color:#d8e3ef;font-size:12px;font-weight:700
    }
    .author-chip::before{
      content:"KY";width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
      background:linear-gradient(135deg,rgba(125,211,252,.18),rgba(167,139,250,.18));
      border:1px solid rgba(125,211,252,.18);font-size:9px;letter-spacing:.04em
    }

    .hero-layout{
      display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
      align-items:center;gap:56px;
    }
    .hero-copy{min-width:0}
    .hero-visual{
      position:relative;min-height:480px;border-radius:32px;overflow:hidden;
      border:1px solid rgba(255,255,255,.09);
      background:
        radial-gradient(circle at 50% 40%,rgba(125,211,252,.11),transparent 31%),
        radial-gradient(circle at 70% 72%,rgba(167,139,250,.09),transparent 27%),
        linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
      box-shadow:0 30px 90px rgba(0,0,0,.34);
    }
    .hero-visual::before{
      content:"";position:absolute;inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
      background-size:34px 34px;
      -webkit-mask-image:radial-gradient(circle at center,#000 25%,transparent 78%);
      mask-image:radial-gradient(circle at center,#000 25%,transparent 78%);
    }
    .digital-core{
      position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
      width:150px;height:150px;border-radius:38px;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      background:linear-gradient(145deg,rgba(125,211,252,.14),rgba(167,139,250,.10));
      border:1px solid rgba(153,220,250,.23);
      box-shadow:0 0 0 18px rgba(125,211,252,.025),0 24px 70px rgba(0,0,0,.35);
      backdrop-filter:blur(14px);
    }
    .digital-core strong{font-size:23px;letter-spacing:-.04em}
    .digital-core span{font-size:10px;text-transform:uppercase;letter-spacing:.19em;color:var(--muted);margin-top:5px}
    .orbit{
      position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
      border:1px solid rgba(125,211,252,.12);border-radius:50%;
    }
    .orbit.o1{width:270px;height:270px}
    .orbit.o2{width:390px;height:390px;border-color:rgba(167,139,250,.10)}
    .node{
      position:absolute;padding:9px 12px;border-radius:12px;
      background:rgba(9,14,22,.80);border:1px solid rgba(255,255,255,.09);
      color:#dce7f2;font-size:10px;font-weight:800;letter-spacing:.08em;
      box-shadow:0 12px 30px rgba(0,0,0,.24);backdrop-filter:blur(10px)
    }
    .node::before{
      content:"";width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:7px;
      background:var(--accent);box-shadow:0 0 12px rgba(125,211,252,.7)
    }
    .node.n1{left:8%;top:16%}.node.n2{right:7%;top:20%}.node.n3{left:5%;bottom:18%}
    .node.n4{right:8%;bottom:15%}.node.n5{left:50%;top:7%;transform:translateX(-50%)}
    .node.n6{left:50%;bottom:7%;transform:translateX(-50%)}
    .data-strip{
      position:absolute;left:22px;right:22px;bottom:22px;
      display:flex;justify-content:space-between;gap:8px;
      padding:10px 12px;border-radius:14px;border:1px solid var(--line);
      background:rgba(8,12,18,.72);font-size:9px;color:var(--muted);letter-spacing:.08em
    }
    .data-strip b{color:#dff7ff;font-size:10px}
    .pulse{
      position:absolute;width:8px;height:8px;border-radius:50%;background:var(--success);
      box-shadow:0 0 0 8px rgba(94,230,168,.05),0 0 24px rgba(94,230,168,.45);
      animation:pulse 2.8s ease-in-out infinite
    }
    .pulse.p1{left:27%;top:39%}.pulse.p2{right:25%;top:56%}
    @keyframes pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}


    /* Technology & experience */
    .capability-panel{
      position:relative;overflow:hidden;padding:34px;border:1px solid var(--line);
      border-radius:28px;background:
        radial-gradient(circle at 82% 18%,rgba(125,211,252,.07),transparent 28%),
        linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
    }
    .tech-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;position:relative;z-index:1}
    .tech-chip{
      padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.09);
      background:rgba(6,10,16,.62);font-size:12px;font-weight:800;color:#dce8f3;
      letter-spacing:.025em;white-space:nowrap
    }
    .experience-grid{
      display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;position:relative;z-index:1
    }
    .experience-box{
      padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02)
    }
    .experience-box strong{display:block;font-size:26px;letter-spacing:-.04em;margin-bottom:7px}
    .experience-box span{color:var(--muted);font-size:12px;line-height:1.55}

    /* Mobile hardening */
    img,svg{max-width:100%;height:auto}
    .wrap{width:min(1180px,calc(100% - 32px))}
    .project,.service,.stat,.mini-card,.experience-box{min-width:0}
    .project h3,.service h3,.section-head h2,.hero h1{overflow-wrap:anywhere}

    @media(max-width:760px){
      .wrap{width:min(100% - 22px,1180px)}
      header .wrap{min-height:64px}
      .brand-copy small{display:block}
      .hero{padding:52px 0 34px}
      .hero-layout{grid-template-columns:1fr;gap:28px}
      .hero h1{font-size:clamp(36px,11vw,54px);line-height:.98}
      .hero p{font-size:15px;line-height:1.7}
      .hero-actions{display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch}
      .hero-actions .btn,.author-chip{width:100%;justify-content:center;box-sizing:border-box}
      .hero-visual{min-height:330px}
      .node{font-size:8px;padding:7px 8px}
      .node.n1{left:4%;top:18%}.node.n2{right:4%;top:20%}
      .node.n3{left:3%;bottom:20%}.node.n4{right:3%;bottom:18%}
      .node.n5{top:6%}.node.n6{bottom:6%}
      .digital-core{width:116px;height:116px;border-radius:26px}
      .digital-core strong{font-size:18px}
      .orbit.o1{width:205px;height:205px}.orbit.o2{width:292px;height:292px}
      .data-strip{left:12px;right:12px;bottom:12px;gap:5px;overflow-x:auto}
      .stats{grid-template-columns:repeat(2,1fr);gap:10px}
      .stat{padding:16px}
      .stat strong{font-size:24px}
      .section-head{display:block}
      .section-head > p{margin-top:14px;max-width:none}
      .services,.projects,.process-grid,.feature-grid{grid-template-columns:1fr !important}
      .project{padding:22px}
      .project-top{display:block}
      .project-top .status{display:inline-flex;margin-top:12px}
      .project-footer{display:block}
      .project-footer .tags{margin-bottom:14px}
      .project-link{display:inline-flex}
      .capability-panel{padding:22px}
      .experience-grid{grid-template-columns:1fr}
      .tech-cloud{gap:8px}
      .tech-chip{font-size:11px;padding:9px 11px}
      .cta{padding:26px}
    }

    @media(max-width:430px){
      .stats{grid-template-columns:1fr}
      .hero-visual{min-height:300px}
      .orbit.o2{width:260px;height:260px}
      .orbit.o1{width:180px;height:180px}
      .node.n1,.node.n3{left:2%}
      .node.n2,.node.n4{right:2%}
      .project-index{font-size:24px}
      .project h3{font-size:28px}
    }

    .service,.project,.process-item,.cta{
      transition:transform .22s ease,border-color .22s ease,background .22s ease;
    }
    .service:hover,.process-item:hover{transform:translateY(-3px);border-color:rgba(125,211,252,.18)}
    .project:hover{transform:translateY(-2px);border-color:rgba(125,211,252,.16)}

    @media(max-width:900px){
      .nav-links{display:none}
      .hero-layout{grid-template-columns:1fr;gap:38px}
      .hero-visual{min-height:420px}
      .stats{grid-template-columns:1fr 1fr}
      .stat:nth-child(2){border-right:0}
      .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
      .services{grid-template-columns:1fr 1fr}
      .project{grid-template-columns:1fr}
      .process{grid-template-columns:1fr 1fr}
    }
    @media(max-width:600px){
      .wrap{width:min(100% - 24px,1180px)}
      .hero{padding:76px 0 52px}
      .hero-visual{min-height:350px;border-radius:24px}
      .orbit.o2{width:315px;height:315px}
      .orbit.o1{width:225px;height:225px}
      .digital-core{width:126px;height:126px;border-radius:30px}
      .node{padding:7px 9px;font-size:9px}
      h1{font-size:49px}
      .hero p{font-size:17px}
      .services,.features,.process{grid-template-columns:1fr}
      .project{padding:24px}
      .project h3{font-size:28px}
      .section-head{align-items:start;flex-direction:column}
      .cta{padding:28px;flex-direction:column;align-items:flex-start}
      .stats{grid-template-columns:1fr}
      .stat{border-right:0;border-bottom:1px solid var(--line)!important}
      .stat:last-child{border-bottom:0!important}
    }
  
    /* ===== Premium responsive visual system ===== */
    :root{
      --glass: rgba(10,15,24,.66);
      --glass-strong: rgba(12,18,28,.84);
      --ring: rgba(125,211,252,.18);
      --ring-2: rgba(167,139,250,.18);
      --shadow-xl: 0 30px 90px rgba(0,0,0,.42);
    }

    html{scroll-behavior:smooth}
    body{
      overflow-x:hidden;
      background:
        radial-gradient(circle at 12% 8%, rgba(56,189,248,.08), transparent 28%),
        radial-gradient(circle at 88% 16%, rgba(139,92,246,.08), transparent 28%),
        radial-gradient(circle at 50% 72%, rgba(34,197,94,.04), transparent 34%),
        var(--bg);
    }

    header{
      position:sticky;top:0;z-index:50;
      background:rgba(7,11,18,.72);
      backdrop-filter:blur(18px) saturate(140%);
      -webkit-backdrop-filter:blur(18px) saturate(140%);
      border-bottom:1px solid rgba(255,255,255,.055);
    }
    header::after{
      content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
      background:linear-gradient(90deg,transparent,rgba(125,211,252,.32),rgba(167,139,250,.28),transparent);
      opacity:.6;
    }

    .hero{position:relative;isolation:isolate;overflow:hidden}
    .hero::before{
      content:"";position:absolute;inset:-20% -10% auto;height:620px;z-index:-2;
      background:
        radial-gradient(circle at 22% 36%,rgba(56,189,248,.16),transparent 22%),
        radial-gradient(circle at 74% 32%,rgba(139,92,246,.14),transparent 23%);
      filter:blur(22px);
    }
    .hero::after{
      content:"";position:absolute;left:50%;top:4%;width:720px;height:720px;transform:translateX(-50%);z-index:-3;
      border-radius:50%;
      background:conic-gradient(from 30deg,transparent,rgba(125,211,252,.06),transparent,rgba(167,139,250,.07),transparent);
      filter:blur(10px);animation:spinSlow 24s linear infinite;
    }
    @keyframes spinSlow{to{transform:translateX(-50%) rotate(360deg)}}

    .eyebrow{
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
      backdrop-filter:blur(12px);
    }

    .hero h1{
      text-wrap:balance;
      text-shadow:0 0 40px rgba(125,211,252,.08);
    }
    .gradient-text{
      background-size:200% 200%;
      animation:gradientFlow 8s ease infinite;
    }
    @keyframes gradientFlow{
      0%,100%{background-position:0% 50%}
      50%{background-position:100% 50%}
    }

    .hero-visual{
      isolation:isolate;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 25px 80px rgba(0,0,0,.36),
        0 0 0 1px rgba(125,211,252,.03);
    }
    .hero-visual::after{
      content:"";position:absolute;inset:18px;border-radius:24px;
      border:1px solid rgba(255,255,255,.035);pointer-events:none;
    }

    .digital-core{
      animation:coreFloat 5s ease-in-out infinite;
      box-shadow:
        0 0 0 14px rgba(125,211,252,.018),
        0 0 52px rgba(125,211,252,.09),
        0 24px 70px rgba(0,0,0,.34);
    }
    @keyframes coreFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-8px)}}

    .orbit.o1{animation:orbitPulse 6s ease-in-out infinite}
    .orbit.o2{animation:orbitPulse 8s ease-in-out infinite reverse}
    @keyframes orbitPulse{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.025)}}

    .node{
      transition:transform .25s ease,border-color .25s ease,background .25s ease;
    }
    .node:hover{
      transform:translateY(-3px);
      border-color:rgba(125,211,252,.28);
      background:rgba(12,19,30,.94);
    }

    .stats{
      position:relative;
      border:1px solid rgba(255,255,255,.055);
      border-radius:24px;
      padding:10px;
      background:rgba(255,255,255,.015);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    }
    .stat{
      border-radius:18px;
      background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
      border:1px solid rgba(255,255,255,.045);
    }
    .stat strong{
      background:linear-gradient(135deg,#fff,#9edcff 62%,#c4b5fd);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

    section{position:relative}
    section + section::before{
      content:"";position:absolute;top:0;left:50%;width:min(1120px,calc(100% - 32px));height:1px;transform:translateX(-50%);
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
    }

    .service,.project,.process-item,.capability-panel,.cta{
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
    }
    .service:hover,.project:hover,.process-item:hover{
      box-shadow:0 20px 50px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.055);
    }

    .project{
      position:relative;overflow:hidden;
    }
    .project::before{
      content:"";position:absolute;inset:0 auto auto 0;width:100%;height:2px;
      background:linear-gradient(90deg,transparent,rgba(125,211,252,.44),rgba(167,139,250,.34),transparent);
      opacity:.34;
    }
    .project::after{
      content:"";position:absolute;right:-90px;top:-90px;width:220px;height:220px;border-radius:50%;
      background:radial-gradient(circle,rgba(125,211,252,.055),transparent 68%);
      pointer-events:none;
    }

    .project-index{
      font-variant-numeric:tabular-nums;
      color:rgba(255,255,255,.34);
      letter-spacing:.08em;
    }

    .status{
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
    }

    .mini-card{
      background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.012));
      transition:transform .2s ease,border-color .2s ease;
    }
    .mini-card:hover{transform:translateY(-2px);border-color:rgba(125,211,252,.16)}

    .tech-chip{
      transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
    }
    .tech-chip:hover{
      transform:translateY(-2px);
      border-color:rgba(125,211,252,.24);
      box-shadow:0 12px 28px rgba(0,0,0,.18);
    }

    .experience-box{
      position:relative;overflow:hidden;
    }
    .experience-box::after{
      content:"";position:absolute;right:-30px;bottom:-50px;width:120px;height:120px;border-radius:50%;
      background:radial-gradient(circle,rgba(167,139,250,.07),transparent 70%);
    }

    .cta{
      position:relative;overflow:hidden;
      background:
        radial-gradient(circle at 15% 20%,rgba(56,189,248,.11),transparent 28%),
        radial-gradient(circle at 88% 74%,rgba(139,92,246,.10),transparent 26%),
        linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
      box-shadow:var(--shadow-xl),inset 0 1px 0 rgba(255,255,255,.05);
    }

    .btn{
      position:relative;overflow:hidden;
      transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary:hover{box-shadow:0 14px 34px rgba(56,189,248,.16)}

    /* Scroll reveal */
    .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
    .reveal.is-visible{opacity:1;transform:none}

    /* Accessibility + reduced motion */
    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}
      .reveal{opacity:1;transform:none}
    }

    /* Tablet */
    @media(max-width:1024px){
      .hero-layout{grid-template-columns:1fr 1fr;gap:34px}
      .hero h1{font-size:clamp(46px,6vw,70px)}
      .services{grid-template-columns:repeat(2,1fr)}
      .projects{grid-template-columns:1fr}
      .process-grid{grid-template-columns:repeat(2,1fr)}
      .experience-grid{grid-template-columns:1fr 1fr}
    }

    /* Mobile */
    @media(max-width:760px){
      body{background-attachment:scroll}
      header{position:sticky}
      header .wrap{padding-left:0;padding-right:0}
      .brand{max-width:68%}
      .brand-copy span:first-child{font-size:14px}
      .brand-copy small{font-size:9px}
      .hero{padding-top:42px}
      .hero-layout{grid-template-columns:1fr}
      .hero-copy{text-align:left}
      .hero h1{font-size:clamp(38px,12vw,58px);line-height:.96;letter-spacing:-.055em}
      .hero p{font-size:15px}
      .eyebrow{font-size:10px;line-height:1.4;padding:8px 11px;max-width:100%}
      .hero-actions{display:flex;flex-direction:column;align-items:stretch}
      .hero-actions .btn,.author-chip{min-height:48px}
      .hero-visual{min-height:340px}
      .stats{grid-template-columns:1fr 1fr;padding:8px}
      .stat{padding:16px 14px}
      .stat strong{font-size:26px}
      .stat span{font-size:11px}
      .section-head h2{font-size:clamp(30px,9vw,44px);line-height:1}
      .section-head p{font-size:14px}
      .services,.projects,.process-grid,.feature-grid,.experience-grid{grid-template-columns:1fr !important}
      .service,.project,.process-item,.capability-panel,.cta{border-radius:22px}
      .service{padding:22px}
      .project{padding:22px 18px}
      .project h3{font-size:30px}
      .project-subtitle{font-size:16px}
      .project-description{font-size:14px;line-height:1.7}
      .mini-card{padding:16px}
      .project-footer{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
      .project-footer .tags{display:flex;flex-wrap:wrap;gap:7px}
      .project-link{width:100%;justify-content:center;box-sizing:border-box}
      .capability-panel{padding:20px}
      .tech-cloud{gap:7px}
      .tech-chip{font-size:10px;padding:8px 10px;border-radius:10px}
      .experience-box{padding:18px}
      .cta{padding:26px 20px}
      .cta h3{font-size:30px;line-height:1.02}
      footer .wrap{flex-direction:column;align-items:flex-start;gap:10px}
    }

    /* Small phones */
    @media(max-width:420px){
      .wrap{width:calc(100% - 18px)}
      .hero h1{font-size:36px}
      .stats{grid-template-columns:1fr}
      .hero-visual{min-height:310px}
      .digital-core{width:106px;height:106px}
      .digital-core strong{font-size:16px}
      .orbit.o1{width:175px;height:175px}
      .orbit.o2{width:245px;height:245px}
      .node{font-size:7px;padding:6px 7px}
      .data-strip{font-size:8px}
      .project h3{font-size:27px}
      .project-index{font-size:21px}
    }

    /* Large desktop */
    @media(min-width:1400px){
      .wrap{width:min(1280px,calc(100% - 80px))}
      .hero{padding-top:110px;padding-bottom:84px}
      .hero h1{font-size:82px}
      .hero-visual{min-height:540px}
      .services{grid-template-columns:repeat(4,1fr)}
    }


    /* ===== v7 Champagne / Bronze premium direction ===== */
    :root{
      --accent:#d6a86e;
      --accent-2:#f0c995;
      --accent-soft:rgba(214,168,110,.12);
      --accent-line:rgba(214,168,110,.22);
      --success:#b8d3bc;
    }

    body{
      background:
        radial-gradient(circle at 16% 8%, rgba(214,168,110,.085), transparent 25%),
        radial-gradient(circle at 84% 18%, rgba(132,95,59,.065), transparent 28%),
        radial-gradient(circle at 52% 76%, rgba(214,168,110,.035), transparent 34%),
        var(--bg);
    }

    body::before{
      background-image:
        linear-gradient(rgba(214,168,110,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(214,168,110,.018) 1px,transparent 1px);
    }

    header::after{
      background:linear-gradient(90deg,transparent,rgba(214,168,110,.34),rgba(240,201,149,.22),transparent);
    }

    .gradient-text{
      background:linear-gradient(105deg,#f4f1eb 0%,#f4f1eb 24%,#e5bd8a 56%,#f5d8ad 78%,#f4f1eb 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

    .eyebrow,.author-chip,.tech-chip,.status,.project-link{
      border-color:rgba(214,168,110,.16) !important;
    }

    .author-chip::before{
      background:linear-gradient(135deg,rgba(214,168,110,.18),rgba(240,201,149,.10));
      border-color:rgba(214,168,110,.20);
      color:#f1d1a8;
    }

    .btn-primary{
      color:#17120d;
      background:linear-gradient(135deg,#e3ba86,#c89157);
      border-color:rgba(240,201,149,.48);
      box-shadow:0 12px 34px rgba(150,102,56,.18);
    }
    .btn-primary:hover{box-shadow:0 16px 38px rgba(180,125,68,.24)}
    .btn-secondary:hover,.project-link:hover{border-color:rgba(214,168,110,.30) !important}

    .hero::before{
      background:
        radial-gradient(circle at 22% 36%,rgba(214,168,110,.13),transparent 22%),
        radial-gradient(circle at 75% 34%,rgba(123,88,53,.10),transparent 25%);
    }
    .hero::after{
      background:conic-gradient(from 30deg,transparent,rgba(214,168,110,.045),transparent,rgba(240,201,149,.035),transparent);
    }

    .hero-visual{
      background:
        radial-gradient(circle at 50% 40%,rgba(214,168,110,.09),transparent 31%),
        radial-gradient(circle at 70% 72%,rgba(119,82,49,.07),transparent 28%),
        linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
    }

    .digital-core{
      background:linear-gradient(145deg,rgba(214,168,110,.12),rgba(94,63,37,.10));
      border-color:rgba(214,168,110,.22);
      box-shadow:
        0 0 0 14px rgba(214,168,110,.018),
        0 0 54px rgba(214,168,110,.08),
        0 24px 70px rgba(0,0,0,.34);
    }
    .orbit{border-color:rgba(214,168,110,.11)}
    .orbit.o2{border-color:rgba(240,201,149,.08)}
    .node::before{background:#d6a86e;box-shadow:0 0 12px rgba(214,168,110,.55)}
    .node:hover{border-color:rgba(214,168,110,.26);}

    .stat strong{
      background:linear-gradient(135deg,#fff,#e5bd8a 62%,#f1d4ab);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }

    .project::before{
      background:linear-gradient(90deg,transparent,rgba(214,168,110,.40),rgba(240,201,149,.24),transparent);
    }
    .project::after{
      background:radial-gradient(circle,rgba(214,168,110,.045),transparent 68%);
    }

    .service:hover,.project:hover,.process-item:hover,
    .mini-card:hover,.tech-chip:hover{
      border-color:rgba(214,168,110,.18) !important;
    }

    .cta{
      background:
        radial-gradient(circle at 15% 20%,rgba(214,168,110,.09),transparent 28%),
        radial-gradient(circle at 88% 74%,rgba(104,70,42,.08),transparent 26%),
        linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.014));
    }

    /* Mobile-first premium composition inspired by the approved direction */
    .mobile-nav-toggle{
      display:none;width:42px;height:42px;border-radius:13px;border:1px solid rgba(214,168,110,.18);
      background:rgba(255,255,255,.025);color:#f4ede5;align-items:center;justify-content:center;
      cursor:pointer
    }
    .mobile-nav-toggle span,.mobile-nav-toggle span::before,.mobile-nav-toggle span::after{
      display:block;width:17px;height:1px;background:#e9dccd;position:relative;content:"";
    }
    .mobile-nav-toggle span::before{position:absolute;top:-6px}
    .mobile-nav-toggle span::after{position:absolute;top:6px}

    .mobile-menu{
      display:none;position:fixed;left:12px;right:12px;top:72px;z-index:80;
      padding:14px;border:1px solid rgba(214,168,110,.16);border-radius:20px;
      background:rgba(8,12,18,.96);box-shadow:0 25px 70px rgba(0,0,0,.48);
      backdrop-filter:blur(18px)
    }
    .mobile-menu.open{display:block}
    .mobile-menu a{
      display:flex;padding:13px 14px;color:#e7e1da;text-decoration:none;border-radius:12px;font-size:14px
    }
    .mobile-menu a:hover{background:rgba(214,168,110,.07);color:#f2cf9f}

    @media(max-width:760px){
      header .wrap{min-height:68px}
      .nav-links{display:none !important}
      .mobile-nav-toggle{display:flex}
      .hero{padding:38px 0 34px}
      .hero-layout{gap:22px}
      .hero h1{font-size:clamp(38px,12.5vw,56px);line-height:.95}
      .hero p{font-size:15px;line-height:1.75}
      .hero-actions{gap:10px}
      .hero-actions .btn{min-height:52px;font-weight:800}
      .author-chip{min-height:46px}

      .hero-visual{
        min-height:320px;border-radius:24px;
        background:
          radial-gradient(circle at 50% 45%,rgba(214,168,110,.11),transparent 30%),
          linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.009));
      }
      .data-strip{display:none}
      .node.n1{left:5%;top:19%}.node.n2{right:5%;top:22%}
      .node.n3{left:4%;bottom:18%}.node.n4{right:4%;bottom:19%}
      .node.n5{top:7%}.node.n6{bottom:7%}

      .stats{
        grid-template-columns:1fr;
        border-radius:22px;
        padding:0;
        overflow:hidden;
        background:rgba(255,255,255,.018);
      }
      .stat{
        display:grid;grid-template-columns:72px 1fr;align-items:center;
        border:0;border-bottom:1px solid rgba(255,255,255,.055);border-radius:0;
        padding:18px 16px;
      }
      .stat:last-child{border-bottom:0}
      .stat strong{font-size:29px}
      .stat span{font-size:12px}

      .section-head{margin-bottom:22px}
      .section-head h2{font-size:clamp(31px,9vw,42px)}
      .services,.projects{gap:12px}
      .service,.project{border-radius:20px}
      .project{padding:18px}
      .project-head,.project-top{gap:10px}
      .project h3{font-size:27px}
      .project-subtitle{font-size:15px;line-height:1.45}
      .project-description{font-size:14px}
      .feature-grid{gap:9px !important}
      .mini-card{border-radius:14px;padding:14px}
      .mini-card strong{font-size:13px}
      .mini-card span{font-size:12px}
      .project-footer .tags{gap:6px}
      .project-footer .tags span{font-size:10px;padding:7px 9px}
      .project-link{min-height:44px}

      .tech-cloud{
        display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px
      }
      .tech-chip{
        width:100%;box-sizing:border-box;text-align:left;padding:11px 12px;font-size:11px;
      }

      .experience-box{border-radius:16px}
      .experience-box strong{font-size:24px}

      .cta{
        border-radius:20px;padding:22px 18px
      }
      .cta .btn{width:100%;justify-content:center}

      footer{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
    }

    @media(max-width:390px){
      .hero h1{font-size:34px}
      .hero-visual{min-height:295px}
      .digital-core{width:98px;height:98px}
      .digital-core strong{font-size:15px}
      .orbit.o1{width:164px;height:164px}
      .orbit.o2{width:228px;height:228px}
      .node{font-size:6.8px}
      .project h3{font-size:25px}
      .tech-cloud{grid-template-columns:1fr 1fr}
    }


    /* ===== Mobile sticky bottom navigation ===== */
    .mobile-bottom-nav{
      display:none;
    }

    @media(max-width:760px){
      body{
        padding-bottom:calc(78px + env(safe-area-inset-bottom));
      }

      .mobile-bottom-nav{
        position:fixed;
        left:10px;
        right:10px;
        bottom:calc(8px + env(safe-area-inset-bottom));
        z-index:120;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:6px;
        padding:8px;
        border-radius:20px;
        border:1px solid rgba(214,168,110,.18);
        background:rgba(8,12,18,.88);
        box-shadow:
          0 18px 45px rgba(0,0,0,.48),
          inset 0 1px 0 rgba(255,255,255,.04);
        backdrop-filter:blur(18px) saturate(130%);
        -webkit-backdrop-filter:blur(18px) saturate(130%);
      }

      .mobile-bottom-nav a{
        min-height:54px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        border-radius:14px;
        color:#8f979f;
        text-decoration:none;
        font-size:9px;
        font-weight:800;
        letter-spacing:.02em;
        transition:
          background .2s ease,
          color .2s ease,
          transform .2s ease,
          border-color .2s ease;
        border:1px solid transparent;
      }

      .mobile-bottom-nav a svg{
        width:19px;
        height:19px;
        stroke:currentColor;
        stroke-width:1.7;
        fill:none;
      }

      .mobile-bottom-nav a.active{
        color:#f1c58f;
        background:linear-gradient(180deg,rgba(214,168,110,.11),rgba(214,168,110,.045));
        border-color:rgba(214,168,110,.16);
      }

      .mobile-bottom-nav a:active{
        transform:scale(.96);
      }

      /* Reduce vertical travel on mobile */
      section{
        padding-top:54px !important;
        padding-bottom:54px !important;
      }

      .hero{
        padding-top:34px !important;
        padding-bottom:28px !important;
      }

      .section-head{
        margin-bottom:18px;
      }

      .services,.projects,.process-grid{
        gap:10px !important;
      }

      .service{
        padding:18px;
      }

      .project{
        padding:18px 16px;
      }

      .feature-grid{
        gap:8px !important;
      }

      .mini-card{
        padding:13px;
      }

      .capability-panel{
        padding:18px;
      }

      .experience-grid{
        gap:9px;
      }

      .experience-box{
        padding:16px;
      }

      .cta{
        margin-bottom:6px;
      }

      footer{
        padding-bottom:18px !important;
      }
    }


    /* ===== v9 Multilingual + Modern Elite ===== */
    .lang-switch{
      display:inline-flex;
      align-items:center;
      gap:4px;
      padding:4px;
      border-radius:999px;
      border:1px solid rgba(214,168,110,.16);
      background:rgba(255,255,255,.018);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    }
    .lang-switch button{
      border:0;
      background:transparent;
      color:#8f979f;
      min-width:34px;
      height:30px;
      border-radius:999px;
      font-size:10px;
      font-weight:900;
      letter-spacing:.08em;
      cursor:pointer;
      transition:all .2s ease;
    }
    .lang-switch button.active{
      color:#15110d;
      background:linear-gradient(135deg,#e6bd89,#c9955b);
      box-shadow:0 8px 20px rgba(158,107,58,.16);
    }

    .nav-actions{
      display:flex;align-items:center;gap:10px
    }

    .brand-mark{
      position:relative;
    }
    .brand-mark::after{
      content:"";position:absolute;inset:-8px;border-radius:18px;
      background:radial-gradient(circle,rgba(214,168,110,.09),transparent 68%);
      z-index:-1;pointer-events:none
    }

    .service,.project,.capability-panel,.cta,.stats{
      border-color:rgba(255,255,255,.065);
    }

    .service,.project{
      background:
        linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.010));
    }

    .service::before,.project::before{
      opacity:.28;
    }

    .project h3,.service h3,.section-head h2,.cta h3{
      letter-spacing:-.035em;
    }

    .kicker{
      letter-spacing:.18em;
      color:#c6a47c;
      font-size:10px;
      font-weight:900;
      text-transform:uppercase;
    }

    .section-head p{
      color:#8f98a2;
    }

    .project-link{
      color:#e7c08f;
    }

    .mobile-bottom-nav a.active{
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    }

    .mobile-lang-floating{
      display:none;
    }

    @media(max-width:760px){
      .desktop-lang{display:none}
      .mobile-lang-floating{
        display:flex;
        position:fixed;
        right:14px;
        top:78px;
        z-index:115;
        padding:4px;
        border-radius:999px;
        border:1px solid rgba(214,168,110,.16);
        background:rgba(8,12,18,.86);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
        box-shadow:0 14px 34px rgba(0,0,0,.28);
      }
      .mobile-lang-floating button{
        border:0;background:transparent;color:#8f979f;
        height:28px;min-width:31px;border-radius:999px;
        font-size:9px;font-weight:900;letter-spacing:.08em;
      }
      .mobile-lang-floating button.active{
        color:#15110d;
        background:linear-gradient(135deg,#e6bd89,#c9955b);
      }

      .hero-copy{padding-top:8px}
      .hero-visual{box-shadow:0 20px 54px rgba(0,0,0,.34)}
      .service,.project,.capability-panel,.cta{
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.03),
          0 14px 36px rgba(0,0,0,.12);
      }
      .project-description{
        color:#a1a8b0;
      }
    }


    /* ===== v10 identity + contact UX fix ===== */
    #services, #technology, #projects, #contact, #top{
      scroll-margin-top:88px;
    }

    .professional-identity{
      display:flex;
      align-items:center;
      gap:12px;
      margin-top:18px;
      margin-bottom:2px;
      padding:10px 0;
    }
    .identity-name{
      color:#f3ede5;
      font-size:13px;
      font-weight:900;
      letter-spacing:.01em;
      white-space:nowrap;
    }
    .identity-role{
      color:#9ca3ab;
      font-size:11px;
      line-height:1.5;
      padding-left:12px;
      border-left:1px solid rgba(214,168,110,.20);
    }

    .contact-highlight{
      animation:contactGlow 1.2s ease;
    }
    @keyframes contactGlow{
      0%{box-shadow:0 0 0 rgba(214,168,110,0)}
      35%{box-shadow:0 0 0 5px rgba(214,168,110,.08),0 18px 50px rgba(0,0,0,.34)}
      100%{box-shadow:0 0 0 rgba(214,168,110,0)}
    }

    @media(max-width:760px){
      #services, #technology, #projects, #contact, #top{
        scroll-margin-top:78px;
      }

      .professional-identity{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
        margin-top:14px;
        padding:0;
      }
      .identity-name{
        font-size:13px;
      }
      .identity-role{
        padding-left:0;
        border-left:0;
        font-size:10px;
        color:#939aa2;
      }

      /* Ensure the contact section is not hidden behind the bottom nav */
      #contact{
        padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important;
      }
    }


    /* ===== v11 verified navigation fixes ===== */
    .nav-right{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      flex:0 0 auto;
    }

    .nav-inner{
      gap:18px;
    }

    .lang-switch{
      flex:0 0 auto;
      position:relative;
      z-index:5;
    }

    @media(max-width:760px){
      .nav-inner{
        min-height:66px;
        gap:10px;
      }

      .brand{
        min-width:0;
        flex:1 1 auto;
      }

      .brand-copy{
        min-width:0;
      }

      .brand-copy small{
        display:block;
        max-width:180px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }

      .nav-links{
        display:none !important;
      }

      .nav-right{
        display:flex !important;
        margin-left:auto;
      }

      .lang-switch{
        display:inline-flex !important;
        padding:3px;
        background:rgba(8,12,18,.78);
        border-color:rgba(214,168,110,.22);
      }

      .lang-switch button{
        min-width:32px;
        height:29px;
      }
    }

    @media(max-width:390px){
      .brand-copy small{
        max-width:135px;
        font-size:8px;
      }
      .brand-mark{
        width:34px;
        height:34px;
      }
    }
    .tech-group{
  position:relative;
}

.tech-group + .tech-group{
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.055);
}

.tech-group-title{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px;

  color:#d6a86e;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.tech-group-title::before{
  content:"";
  width:5px;
  height:5px;
  flex:0 0 auto;
  border-radius:50%;
  background:#d6a86e;
  box-shadow:0 0 12px rgba(214,168,110,.45);
}

.tech-group .tech-cloud{
  margin-top:0;
}

/* Static multi-page */
.page-hero{padding:96px 0 42px}.page-hero .eyebrow{margin-bottom:14px}.page-hero h1{max-width:900px;margin:0 0 18px;font-size:clamp(36px,6vw,72px);line-height:.98;letter-spacing:-.045em}.page-hero p{max-width:760px;margin:0;color:var(--muted);font-size:16px;line-height:1.8}.section-actions{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}.text-link{display:inline-flex;align-items:center;gap:8px;color:#e2b77e;text-decoration:none;font-size:12px;font-weight:900;letter-spacing:.05em}.text-link:hover{opacity:.82}.page-nav-current{color:#f1c58f!important}.home-preview .project:nth-child(n+4),.home-preview .service:nth-child(n+5){display:none}.page-section{padding-top:34px}.back-home{display:inline-flex;margin-bottom:18px}@media(max-width:760px){.page-hero{padding:58px 0 24px}.page-hero p{font-size:14px}}