:root {
      --bg: #09080d;
      --bg2: #17101d;
      --panel: rgba(255,255,255,.075);
      --panel-strong: rgba(255,255,255,.12);
      --line: rgba(255,255,255,.16);
      --text: #f7f7fb;
      --muted: #aeb4c6;
      --soft: rgba(255,255,255,.64);
      --a: #f59e0b;
      --b: #ef4444;
      --c: #a855f7;
      --shadow: 0 24px 80px rgba(0,0,0,.38);
      --radius: 28px;
      --max: 1180px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--a) 26%, transparent), transparent 30rem),
        radial-gradient(circle at 85% 22%, color-mix(in srgb, var(--b) 22%, transparent), transparent 30rem),
        radial-gradient(circle at 50% 90%, color-mix(in srgb, var(--c) 18%, transparent), transparent 38rem),
        linear-gradient(145deg, var(--bg), var(--bg2));
      min-height: 100vh;
      overflow-x: hidden;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .08;
      background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(circle at 50% 18%, black, transparent 70%);
      z-index: -2;
    }
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px);
      background-size: 3px 3px;
      opacity: .16;
      z-index: -1;
    }
    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }
    img { max-width: 100%; display: block; }
    .container { width: min(var(--max), calc(100% - 42px)); margin: 0 auto; }
    .header .container, .hero .container { width:min(1680px, calc(100% - 88px)); max-width:1680px; }
    .skip-link { position: fixed; left: 1rem; top: -100px; z-index: 999; background: #fff; color: #000; padding: .8rem 1rem; border-radius: 999px; }
    .skip-link:focus { top: 1rem; }
    .progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: linear-gradient(90deg, var(--a), var(--b), var(--c)); box-shadow: 0 0 18px var(--a); }
    .cursor-glow { position: fixed; width: 34rem; height: 34rem; border-radius: 999px; left: var(--mx, 50%); top: var(--my, 25%); transform: translate(-50%,-50%); pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--a) 18%, transparent), transparent 65%); filter: blur(10px); opacity: .72; z-index: -1; transition: opacity .2s ease; }
    .header { position: fixed; top: 14px; left: 0; right: 0; z-index: 100; }
    .nav { height: 82px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); background: rgba(8, 9, 18, .68); backdrop-filter: blur(24px); border-radius: 999px; padding: 0 24px; box-shadow: 0 18px 70px rgba(0,0,0,.26); }
    .brand { display: inline-flex; align-items: center; gap: 16px; font-weight: 900; letter-spacing: -.04em; font-size:1.08rem; }
    .brand-mark { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); color: white; box-shadow: 0 14px 34px color-mix(in srgb, var(--a) 35%, transparent); font-size: .9rem; }
    .nav-links { display: flex; align-items: center; gap: 18px; }
    .nav-links a { color: var(--muted); padding: 13px 15px; border-radius: 999px; font-weight: 750; font-size: 1rem; transition: .25s ease; }
    .nav-links a:hover, .nav-links a:focus { color: white; background: rgba(255,255,255,.08); }
    .nav-cta { background: rgba(255,255,255,.1); border: 1px solid var(--line); color: white !important; }
    .menu-btn { display:none; width: 44px; height:44px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.06); color:white; }
    .section { padding: 118px 0; position: relative; }
    .hero { min-height: 100vh; display: grid; align-items: center; padding: 156px 0 92px; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .92fr); gap: 86px; align-items: center; }
    .hero-grid > * { min-width: 0; }
    .eyebrow { display:inline-flex; align-items:center; gap:10px; color: var(--soft); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; margin:0 0 18px; }
    .eyebrow::before { content:""; width:34px; height:2px; border-radius:999px; background: linear-gradient(90deg, var(--a), var(--b)); }
    h1, h2, h3 { margin: 0; letter-spacing: -.055em; line-height: .95; }
    h1 { font-size: clamp(3.1rem, 8vw, 7.8rem); max-width: 920px; }
    h2 { font-size: clamp(2.2rem, 5vw, 5.2rem); max-width: 920px; }
    h3 { font-size: 1.55rem; line-height: 1.05; }
    .gradient-text { background: linear-gradient(90deg, #fff, var(--a), var(--b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .hero-copy h2 { font-size:clamp(4.25rem, 6.3vw, 7.15rem); max-width:660px; line-height:.93; }
    .hero-intro { color: var(--muted); font-size: clamp(1.12rem, 1.55vw, 1.36rem); line-height: 1.78; max-width: 700px; margin: 34px 0 0; }
    .actions { display:flex; flex-wrap:wrap; gap:18px; margin-top: 42px; }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height: 62px; border-radius:999px; padding: 0 30px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color:white; font-weight:850; font-size:1.02rem; cursor:pointer; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
    .btn:hover { transform: translateY(-3px); background: rgba(255,255,255,.12); }
    .btn-primary { border:0; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 18px 44px color-mix(in srgb, var(--a) 34%, transparent); }
    .btn-primary:hover { background: linear-gradient(135deg, var(--b), var(--c)); }
    .stats { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 56px; max-width: 820px; }
    .stat { border: 1px solid var(--line); background: rgba(255,255,255,.055); backdrop-filter: blur(18px); border-radius: 26px; padding: 24px 26px; min-height:126px; }
    .stat strong { display:block; font-size: 2.3rem; letter-spacing: -.06em; }
    .stat span { display:block; color: var(--muted); margin-top: 8px; font-size: 1.02rem; line-height:1.35; }
    .visual { position: relative; min-height: 700px; display:grid; place-items:center; perspective: 1200px; }
    .portrait-wrap { width: min(530px, 42vw); border-radius: 38px; padding: 1px; background: linear-gradient(145deg, rgba(255,255,255,.45), rgba(255,255,255,.06), color-mix(in srgb, var(--a) 34%, transparent)); box-shadow: var(--shadow); position: relative; }
    .portrait { overflow: hidden; border-radius: 35px; background: #111827; position: relative; transform: translateZ(0); }
    .portrait img { width:100%; aspect-ratio: .82/1; object-fit: cover; filter: saturate(1.05) contrast(1.05); }
    .portrait::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 46%, rgba(0,0,0,.72)); pointer-events:none; }
    .portrait-caption { position:absolute; left:20px; right:20px; bottom:20px; z-index:2; display:flex; justify-content:space-between; gap:18px; align-items:end; border:1px solid rgba(255,255,255,.16); border-radius:26px; padding:18px 20px; background:rgba(0,0,0,.36); backdrop-filter: blur(18px); }
    .portrait-caption span { color:var(--muted); font-size:.94rem; }
    .portrait-caption strong { display:block; margin-top:7px; font-size:1.08rem; }
    .orb { position:absolute; border-radius:999px; filter: blur(10px); opacity:.88; animation: float 7s ease-in-out infinite; }
    .orb.one { width:170px; height:170px; background:color-mix(in srgb, var(--a) 62%, transparent); top: 55px; right: 28px; }
    .orb.two { width:120px; height:120px; background:color-mix(in srgb, var(--b) 52%, transparent); bottom: 95px; left: 36px; animation-delay: -2s; }
    .float-card { position:absolute; border:1px solid var(--line); background:rgba(255,255,255,.08); backdrop-filter: blur(18px); border-radius:22px; padding:16px 18px; box-shadow:0 18px 50px rgba(0,0,0,.25); font-weight:800; animation: float 6s ease-in-out infinite; }
    .float-card small { display:block; color:var(--muted); font-weight:650; margin-top:4px; }
    .fc1 { left: 4%; top: 22%; } .fc2 { right: 1%; bottom: 22%; animation-delay:-1.5s; }
    @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
    .section-head { margin-bottom: 44px; }
    .section-head.center { text-align:center; display:grid; justify-items:center; }
    .section-head p:not(.eyebrow) { color:var(--muted); max-width:700px; line-height:1.7; margin:20px 0 0; }
    .split { display:grid; grid-template-columns: .9fr 1.1fr; gap:54px; align-items:start; }
    .about-side { min-width:0; }
    .copy { color:var(--muted); font-size:1.04rem; line-height:1.82; }
    .copy p:first-child { margin-top: 0; color: #d9deec; }
    .about-mini { margin-top:24px; display:grid; grid-template-columns: 116px 1fr; gap:18px; align-items:center; padding:14px; }
    .about-mini img { border-radius:22px; aspect-ratio: 1; object-fit:cover; }
    .about-orbit { width:min(390px, 100%); aspect-ratio:1; margin-top:30px; border-radius:50%; position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.11), rgba(255,255,255,.045) 56%, rgba(255,255,255,.025)); }
    .about-orbit::before { content:""; position:absolute; inset:18px; border-radius:50%; border:1px solid rgba(255,255,255,.12); }
    .about-orbit-ring { position:absolute; inset:58px; border-radius:50%; border:1px dashed color-mix(in srgb, var(--a) 48%, rgba(255,255,255,.2)); opacity:.85; animation: orbitSpin 34s linear infinite; }
    .about-orbit-center { width:44%; min-width:142px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; align-content:center; gap:6px; padding:18px; text-align:center; border:1px solid rgba(255,255,255,.14); background:rgba(7,8,15,.64); box-shadow:0 18px 52px rgba(0,0,0,.28); position:relative; top:18px; z-index:2; }
    .about-orbit-center span { font-size:2rem; line-height:1; filter:saturate(1.08); }
    .about-orbit-center strong { color:#fff; font-size:.98rem; line-height:1.1; }
    .about-orbit-center p { margin:0; color:var(--muted); font-size:.72rem; line-height:1.35; }
    .about-orbit-node { position:absolute; z-index:3; width:118px; min-height:74px; display:grid; place-items:center; gap:4px; padding:10px 12px; border-radius:22px; border:1px solid var(--line); background:rgba(255,255,255,.065); color:#fff; cursor:pointer; box-shadow:0 16px 38px rgba(0,0,0,.22); transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; }
    .about-orbit-node span { font-size:1.7rem; line-height:1; }
    .about-orbit-node strong { font-size:.82rem; line-height:1.1; }
    .about-orbit-node:hover, .about-orbit-node:focus-visible, .about-orbit-node.active { transform:translateY(-4px) scale(1.04); border-color:color-mix(in srgb, var(--a) 70%, white); background:linear-gradient(135deg, color-mix(in srgb, var(--a) 34%, rgba(255,255,255,.08)), color-mix(in srgb, var(--b) 22%, rgba(255,255,255,.06))); box-shadow:0 20px 52px color-mix(in srgb, var(--a) 22%, rgba(0,0,0,.22)); }
    .about-orbit-node:focus-visible { outline:2px solid color-mix(in srgb, var(--a) 80%, white); outline-offset:4px; }
    .about-orbit-node.node-0 { top:18px; left:50%; transform:translateX(-50%); }
    .about-orbit-node.node-1 { top:50%; left:16px; transform:translateY(-50%); }
    .about-orbit-node.node-2 { top:50%; right:16px; transform:translateY(-50%); }
    .about-orbit-node.node-3 { bottom:18px; left:50%; transform:translateX(-50%); }
    .about-orbit-node.node-0:hover, .about-orbit-node.node-0:focus-visible, .about-orbit-node.node-0.active { transform:translateX(-50%) translateY(-4px) scale(1.04); }
    .about-orbit-node.node-1:hover, .about-orbit-node.node-1:focus-visible, .about-orbit-node.node-1.active,
    .about-orbit-node.node-2:hover, .about-orbit-node.node-2:focus-visible, .about-orbit-node.node-2.active { transform:translateY(-50%) translateY(-4px) scale(1.04); }
    .about-orbit-node.node-3:hover, .about-orbit-node.node-3:focus-visible, .about-orbit-node.node-3.active { transform:translateX(-50%) translateY(-4px) scale(1.04); }
    @keyframes orbitSpin { to { transform:rotate(360deg); } }
    .glass { border:1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045)); backdrop-filter: blur(18px); box-shadow:0 18px 60px rgba(0,0,0,.23); border-radius: var(--radius); }
    .grid-4 { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
    .skill { padding:24px; min-height:260px; position:relative; overflow:hidden; }
    .skill::before { content:""; position:absolute; width:130px; height:130px; border-radius:999px; right:-55px; top:-45px; background:color-mix(in srgb, var(--a) 22%, transparent); filter: blur(4px); }
    .skill .num { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid var(--line); color:#fff; font-weight:900; margin-bottom:32px; }
    .skill p { color:var(--muted); line-height:1.65; }
    .meter { height:8px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:20px; }
    .meter span { display:block; height:100%; width: var(--level); border-radius:99px; background:linear-gradient(90deg,var(--a),var(--b)); transform-origin:left; transform: scaleX(0); transition: 1.2s cubic-bezier(.2,.8,.2,1); }
    .reveal.visible .meter span, .skill.visible .meter span { transform: scaleX(1); }
    .filters { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
    .filter { border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--muted); border-radius:999px; padding:11px 15px; cursor:pointer; font-weight:800; transition:.25s ease; }
    .filter.active, .filter:hover { color:#fff; background:linear-gradient(135deg, color-mix(in srgb, var(--a) 50%, transparent), color-mix(in srgb, var(--b) 40%, transparent)); }
    .projects { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
    .project-card { overflow:hidden; background:rgba(255,255,255,.065); border:1px solid var(--line); border-radius: 28px; box-shadow:0 18px 60px rgba(0,0,0,.22); transition:.25s ease; }
    .project-card:hover { transform: translateY(-8px); border-color:rgba(255,255,255,.28); }
    .project-card.hide { display:none; }
    .project-media { height:170px; position:relative; overflow:hidden; display:flex; align-items:end; padding:18px; }
    .project-media::before { content:""; position:absolute; inset:-40%; background: conic-gradient(from 180deg, var(--a), var(--b), var(--c), var(--a)); animation: spin 8s linear infinite; opacity:.9; }
    .project-media::after { content:""; position:absolute; inset:1px; border-radius:23px; background:rgba(0,0,0,.28); backdrop-filter: blur(4px); }
    .project-media span { position:relative; z-index:2; font-weight:900; letter-spacing:.12em; font-size:.75rem; padding:8px 11px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); }
    .g2::before { animation-delay:-1s; } .g3::before { animation-delay:-2s; } .g4::before { animation-delay:-3s; } .g5::before { animation-delay:-4s; } .g6::before { animation-delay:-5s; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .project-body { padding:24px; }
    .project-body p { color:var(--a); text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; font-weight:900; margin:0 0 12px; }
    .project-body span { display:block; color:var(--muted); line-height:1.62; margin:14px 0 22px; }
    .project-open { background:transparent; color:#fff; border:0; padding:0; font-weight:900; cursor:pointer; }
    .timeline { display:grid; gap:16px; max-width:920px; margin:0 auto; position:relative; }
    .timeline::before { content:""; position:absolute; top:0; bottom:0; left:18px; width:2px; background:linear-gradient(var(--a),var(--b),transparent); }
    .timeline-item { position:relative; padding-left:62px; }
    .timeline-dot { position:absolute; left:6px; top:26px; width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--a),var(--b)); box-shadow:0 0 0 8px rgba(255,255,255,.06); }
    .timeline-card { padding:24px; }
    .timeline-card time { color:var(--a); font-weight:900; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }
    .timeline-card p { color:var(--muted); line-height:1.7; margin-bottom:0; }
    .values { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
    .value { padding:28px; }
    .value strong { display:block; font-size:2.4rem; letter-spacing:-.08em; background:linear-gradient(90deg,var(--a),var(--b)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:14px; }
    .value p { color:var(--muted); line-height:1.7; margin-bottom:0; }
    .contact-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:24px; }
    .contact-info { padding:30px; }
    .contact-info p { color:var(--muted); line-height:1.75; }
    .contact-status { display:grid; gap:10px; margin:24px 0 4px; }
    .contact-status span { display:flex; align-items:center; gap:10px; width:max-content; max-width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.06); color:#eef0f7; font-weight:850; line-height:1.25; }
    .contact-status span span { display:inline; padding:0; border:0; background:none; width:auto; }
    .socials { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
    .socials a { border:1px solid var(--line); border-radius:999px; padding:11px 14px; color:var(--muted); font-weight:800; transition:.25s ease; }
    .socials a:hover { color:#fff; background:rgba(255,255,255,.08); }
    form { padding:30px; display:grid; gap:16px; }
    .field { display:grid; gap:8px; }
    label { color:#e8eaf4; font-weight:800; }
    input, textarea { width:100%; border:1px solid var(--line); border-radius:18px; background:rgba(0,0,0,.18); color:#fff; padding:14px 16px; outline:none; transition:.2s ease; }
    textarea { min-height:140px; resize:vertical; }
    input:focus, textarea:focus { border-color: color-mix(in srgb, var(--a) 65%, white); box-shadow:0 0 0 4px color-mix(in srgb, var(--a) 18%, transparent); }
    .form-status { min-height:24px; color:var(--muted); }
    footer { border-top:1px solid var(--line); padding:34px 0; color:var(--muted); }
    .footer-inner { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
    .modal { position: fixed; inset:0; z-index:250; display:none; place-items:center; padding:22px; background:rgba(0,0,0,.62); backdrop-filter: blur(12px); }
    .modal.open { display:grid; }
    .modal-card { width:min(680px,100%); padding:28px; border-radius:30px; border:1px solid var(--line); background:rgba(13,14,24,.92); box-shadow:var(--shadow); }
    .modal-head { display:flex; justify-content:space-between; gap:20px; align-items:start; }
    .modal-close { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.06); color:white; cursor:pointer; }
    .modal-card p { color:var(--muted); line-height:1.7; }
    .pill-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
    .pill { min-width:0; max-width:100%; border:1px solid var(--line); background:rgba(255,255,255,.07); border-radius:999px; padding:8px 10px; color:#fff; font-size:.85rem; font-weight:800; overflow-wrap:anywhere; }
    .reveal { opacity:0; transform: translateY(26px); transition: opacity .75s ease, transform .75s ease; }
    .reveal.visible { opacity:1; transform: translateY(0); }
    .tilt { transform-style: preserve-3d; }
    @media (max-width: 980px) {
      .header .container, .hero .container { width:min(var(--max), calc(100% - 42px)); }
      .hero-grid, .split, .contact-grid { grid-template-columns:1fr; }
      .hero-copy h2 { font-size:clamp(3.4rem, 9vw, 5.8rem); max-width:760px; }
      .hero-intro { max-width:680px; }
      .visual { min-height: 560px; }
      .portrait-wrap { width:min(500px, 72vw); }
      .about-orbit { margin-inline:auto; }
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .projects, .values { grid-template-columns: repeat(2, 1fr); }
      .nav-links { position:absolute; top:82px; right:20px; left:20px; display:none; flex-direction:column; align-items:stretch; padding:12px; border:1px solid var(--line); border-radius:26px; background:rgba(8,9,18,.94); backdrop-filter: blur(24px); }
      .nav-links.open { display:flex; }
      .nav-links a { text-align:center; }
      .menu-btn { display:grid; place-items:center; }
      .brand-text { display:none; }
    }
    @media (max-width: 640px) {
      .container { width:calc(100% - 28px); max-width:var(--max); }
      .header .container, .hero .container { width:calc(100% - 28px); }
      .header { top:12px; }
      .nav { height:68px; padding:0 14px; }
      .brand-mark { width:42px; height:42px; font-size:.8rem; }
      .section { padding: 82px 0; }
      .hero { padding-top: 130px; }
      .hero-copy h2 { font-size:clamp(2.55rem, 11.2vw, 4.2rem); line-height: .98; }
      .hero-intro { font-size:1.02rem; margin-top:26px; max-width:33ch; overflow-wrap:break-word; }
      .actions { gap:12px; margin-top:30px; }
      .btn { min-height:54px; padding:0 20px; font-size:.92rem; }
      .stats, .grid-4, .projects, .values { grid-template-columns:1fr; }
      .stats { gap:12px; margin-top:36px; }
      .stat { min-height:auto; padding:18px; }
      .visual { min-height: 500px; }
      .portrait-wrap { width:min(420px, 100%); }
      .float-card { display:none; }
      .portrait-caption { display:block; }
      .about-mini { grid-template-columns:1fr; }
      .about-orbit { width:min(340px, 100%); margin-top:26px; }
      .about-orbit::before { inset:14px; }
      .about-orbit-ring { inset:50px; }
      .about-orbit-center { width:41%; min-width:124px; padding:14px; top:12px; }
      .about-orbit-center span { font-size:1.65rem; }
      .about-orbit-center strong { font-size:.86rem; }
      .about-orbit-center p { font-size:.64rem; line-height:1.28; }
      .about-orbit-node { width:98px; min-height:66px; border-radius:18px; padding:8px 10px; }
      .about-orbit-node span { font-size:1.45rem; }
      .about-orbit-node strong { font-size:.74rem; }
      .about-orbit-node.node-0 { top:10px; }
      .about-orbit-node.node-1 { left:8px; }
      .about-orbit-node.node-2 { right:8px; }
      .about-orbit-node.node-3 { bottom:10px; }
      h1 { font-size: clamp(2.7rem, 14vw, 4.8rem); }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior:auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .reveal { opacity:1; transform:none; }
    }


/* AI Chatbot */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ai-chatbot { position:fixed; right:24px; bottom:24px; z-index:300; }
.chatbot-toggle { width:66px; height:66px; border:1px solid var(--line); border-radius:50%; color:white; font-weight:950; letter-spacing:-.04em; cursor:pointer; background:linear-gradient(135deg,var(--a),var(--b)); box-shadow:0 18px 55px color-mix(in srgb, var(--a) 35%, transparent); display:grid; place-items:center; position:relative; transition:transform .25s ease, box-shadow .25s ease; }
.chatbot-toggle:hover { transform:translateY(-4px) scale(1.03); box-shadow:0 24px 70px color-mix(in srgb, var(--b) 38%, transparent); }
.chatbot-pulse { position:absolute; inset:-8px; border-radius:50%; border:1px solid color-mix(in srgb, var(--a) 55%, transparent); animation:chatPulse 1.8s ease-out infinite; }
@keyframes chatPulse { 0% { transform:scale(.82); opacity:.9; } 100% { transform:scale(1.28); opacity:0; } }
.chatbot-panel { position:absolute; right:0; bottom:82px; width:min(390px, calc(100vw - 32px)); height:min(620px, calc(100vh - 130px)); display:none; grid-template-rows:auto 1fr auto auto; overflow:hidden; border-radius:30px; background:rgba(13,14,24,.86); box-shadow:var(--shadow); }
.chatbot-panel.open { display:grid; animation:chatIn .28s ease both; }
@keyframes chatIn { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.chatbot-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px; border-bottom:1px solid var(--line); background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }
.chatbot-kicker { margin:0 0 6px; color:var(--a); font-size:.72rem; font-weight:950; letter-spacing:.14em; text-transform:uppercase; }
.chatbot-header h3 { font-size:1.25rem; line-height:1.05; }
.chatbot-api-status { display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:6px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.055); font-size:.76rem; font-weight:850; }
.chatbot-api-status::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--a); box-shadow:0 0 14px var(--a); }
.chatbot-api-status[data-status="bezig"]::before { animation:typingDot 1s infinite ease-in-out; }
.chatbot-api-status[data-status="fout"]::before { background:var(--b); box-shadow:0 0 14px var(--b); }
.chatbot-close { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.07); color:white; cursor:pointer; font-size:1.35rem; }
.chatbot-messages { padding:18px; overflow:auto; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; }
.chat-message { max-width:86%; padding:12px 14px; border-radius:18px; line-height:1.55; font-size:.94rem; }
.chat-message.bot { align-self:flex-start; color:#e9ecf7; background:rgba(255,255,255,.08); border:1px solid var(--line); border-bottom-left-radius:6px; }
.chat-message.user { align-self:flex-end; color:white; background:linear-gradient(135deg,var(--a),var(--b)); border-bottom-right-radius:6px; box-shadow:0 12px 34px color-mix(in srgb, var(--a) 22%, transparent); }
.chat-message.typing { display:inline-flex; gap:5px; align-items:center; width:max-content; }
.chat-message.typing span { width:6px; height:6px; border-radius:50%; background:var(--muted); animation:typingDot 1s infinite ease-in-out; }
.chat-message.typing span:nth-child(2) { animation-delay:.15s; }
.chat-message.typing span:nth-child(3) { animation-delay:.3s; }
@keyframes typingDot { 0%,80%,100% { opacity:.35; transform:translateY(0); } 40% { opacity:1; transform:translateY(-4px); } }
.chatbot-suggestions { display:flex; gap:8px; overflow:auto; padding:0 18px 14px; }
.chatbot-suggestions button { flex:0 0 auto; border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--muted); border-radius:999px; padding:9px 11px; font-weight:850; cursor:pointer; }
.chatbot-suggestions button:hover { color:white; background:rgba(255,255,255,.11); }
.chatbot-form { display:grid; grid-template-columns:1fr 46px; gap:10px; padding:16px 18px 18px; border-top:1px solid var(--line); }
.chatbot-form input { border-radius:999px; }
.chatbot-form input:disabled { opacity:.65; cursor:not-allowed; }
.chatbot-form button { border:0; border-radius:50%; cursor:pointer; color:white; background:linear-gradient(135deg,var(--a),var(--b)); font-weight:950; }
.chatbot-form button:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width:640px) { .ai-chatbot { right:16px; bottom:16px; } .chatbot-panel { right:-2px; bottom:78px; width:calc(100vw - 28px); height:min(620px, calc(100vh - 110px)); } }


/* Case pages */
.case-hero { padding: 150px 0 62px; }
.case-back { display:inline-flex; align-items:center; gap:8px; margin-bottom:34px; color:var(--muted); font-weight:850; transition:.25s ease; }
.case-back:hover { color:#fff; transform:translateX(-3px); }
.case-hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:42px; align-items:center; }
.case-hero-grid > *, .case-body-grid > * { min-width:0; }
.case-copy, .case-summary, .case-story, .case-list, .case-nav-card { max-width:100%; }
.case-copy h1 { font-size:clamp(3rem, 7vw, 7rem); max-width:880px; }
.case-intro { color:var(--muted); font-size:clamp(1.04rem, 1.35vw, 1.22rem); line-height:1.78; max-width:52ch; margin:28px 0 0; overflow-wrap:break-word; }
.case-summary { padding:20px; overflow:hidden; }
.case-summary .project-media { height:230px; border-radius:24px; margin-bottom:20px; }
.case-summary-media { height:230px; border-radius:24px; margin-bottom:20px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.06); }
.case-summary-media.fit-contain { height:320px; }
.case-summary-media.ratio-wide { height:auto; aspect-ratio:16 / 9; }
.case-summary-media.ratio-landscape { height:auto; aspect-ratio:3 / 2; }
.case-summary-media img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.04) contrast(1.02); }
.case-summary-media.fit-contain img { object-fit:contain; background:rgba(0,0,0,.2); }
.case-summary-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.58)); pointer-events:none; }
.case-summary-media span { position:absolute; left:18px; bottom:18px; z-index:2; font-weight:900; letter-spacing:.12em; font-size:.75rem; padding:8px 11px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); }
.case-meta { display:grid; gap:14px; margin:0; }
.case-meta div { display:grid; gap:5px; padding:14px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.045); }
.case-meta dt { color:var(--a); font-size:.74rem; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }
.case-meta dd { margin:0; color:#eef0f7; line-height:1.55; font-weight:700; }
.case-section { padding-top:74px; }
.case-section-tight { padding:44px 0; }
.case-highlights { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.case-highlight { padding:24px; }
.case-highlight span { display:block; color:var(--muted); font-weight:850; margin-bottom:10px; }
.case-highlight strong { display:block; font-size:1.7rem; line-height:1.08; letter-spacing:-.045em; }
.case-gallery { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.case-image { margin:0; padding:12px; overflow:hidden; }
.case-image.featured { grid-column:1 / -1; }
.case-image img { width:100%; aspect-ratio:16 / 10; object-fit:cover; border-radius:22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.case-image.fit-contain img { object-fit:contain; background:rgba(0,0,0,.2); }
.case-image.featured img { aspect-ratio:16 / 8; }
.case-image.featured.fit-contain img { aspect-ratio:4 / 5; max-height:860px; }
.case-image.featured.ratio-wide img { aspect-ratio:16 / 9; max-height:none; }
.case-image.featured.ratio-landscape img { aspect-ratio:3 / 2; max-height:none; }
.case-image figcaption { color:var(--muted); line-height:1.55; padding:12px 4px 2px; font-size:.94rem; }
.case-body-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:start; }
.case-story h2 { font-size:clamp(2.1rem, 4.4vw, 4.6rem); }
.case-text-block { margin-top:34px; }
.case-text-block h3 { margin-bottom:12px; }
.case-text-block p { color:var(--muted); line-height:1.82; font-size:1.04rem; margin:0; }
.case-lists { display:grid; gap:18px; }
.case-list { padding:24px; }
.case-list h3 { margin-bottom:16px; }
.case-list ul { margin:0; padding-left:20px; color:var(--muted); line-height:1.75; }
.case-list li + li { margin-top:10px; }
.case-nav { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.case-nav-card { padding:22px; transition:.25s ease; }
.case-nav-card:hover { transform:translateY(-5px); border-color:rgba(255,255,255,.28); }
.case-nav-card span { display:block; color:var(--a); font-size:.76rem; font-weight:950; letter-spacing:.12em; text-transform:uppercase; margin-bottom:9px; }
.case-nav-card strong { display:block; font-size:1.35rem; line-height:1.08; }
.case-missing { padding:30px; }
.case-missing h1 { margin-bottom:26px; }

@media (max-width:980px) {
  .case-hero-grid, .case-body-grid { grid-template-columns:1fr; }
  .case-intro { max-width:34ch; }
  .case-highlights, .case-gallery, .case-nav { grid-template-columns:1fr; }
  .case-image.featured { grid-column:auto; }
  .case-image.featured img { aspect-ratio:16 / 10; }
  .case-image.featured.ratio-wide img { aspect-ratio:16 / 9; }
  .case-image.featured.ratio-landscape img { aspect-ratio:3 / 2; }
}

@media (max-width:640px) {
  .case-hero { padding:126px 0 42px; }
  .case-hero-grid, .case-body-grid, .case-highlights, .case-gallery, .case-nav { width:100%; max-width:100%; }
  .case-copy, .case-summary, .case-story, .case-highlight, .case-image, .case-list, .case-nav-card { width:100%; max-width:100%; }
  .case-intro { max-width:31ch; }
  .case-copy h1, .case-story h2, .case-meta dd, .case-highlight strong, .case-text-block p, .case-list li, .section-head p:not(.eyebrow) { overflow-wrap:anywhere; }
  .case-summary { padding:12px; border-radius:22px; }
  .case-summary .project-media, .case-summary-media { height:190px; }
  .case-summary-media { border-radius:18px; margin-bottom:14px; }
  .case-summary-media.fit-contain { height:210px; }
  .case-summary-media.ratio-wide { height:auto; aspect-ratio:16 / 9; }
  .case-summary-media.ratio-landscape { height:auto; aspect-ratio:3 / 2; }
  .case-summary-media span { left:12px; bottom:12px; font-size:.68rem; padding:7px 10px; }
  .pill-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:7px; }
  .pill { width:100%; padding:7px 9px; font-size:.78rem; line-height:1.15; text-align:center; }
  .case-meta div, .case-highlight, .case-list, .case-nav-card { padding:16px; border-radius:18px; }
  .case-image { padding:8px; border-radius:20px; }
  .case-image img { border-radius:16px; }
  .case-section { padding-top:52px; }
  .case-copy h1 { font-size:clamp(2.35rem, 11vw, 3.7rem); line-height:1; }
  .case-story h2 { font-size:clamp(2rem, 10vw, 3rem); }
}