/* ── CSS Variables ─────────────────────────────────────── */
    :root {
      --background: hsl(230, 25%, 5%);
      --foreground: hsl(0, 0%, 100%);
      --border: hsl(230, 20%, 15%);
      --card: hsl(230, 25%, 8%);
      --primary: hsl(188, 100%, 50%);
      --primary-dim: hsla(188, 100%, 50%, 0.1);
      --primary-glow: hsla(188, 100%, 50%, 0.15);
      --primary-dark: hsl(230, 30%, 10%);
      --secondary: hsl(213, 100%, 48%);
      --muted: hsl(230, 20%, 12%);
      --muted-fg: hsl(230, 10%, 70%);
      --input-bg: hsl(230, 20%, 18%);
      --font-sans: 'Inter', sans-serif;
      --font-display: 'Space Grotesk', sans-serif;
      --font-mono: Menlo, monospace;
      --radius: 0.5rem;
    }

    /* ── Reset & Base ──────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; color-scheme: dark; }
    body {
      background: var(--background);
      color: var(--foreground);
      font-family: var(--font-sans);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      min-height: 100dvh;
    }
    h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); letter-spacing: -0.02em; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }
    ul { list-style: none; }
    button { cursor: pointer; border: none; background: none; font: inherit; }

    /* ── Utilities ─────────────────────────────────────────── */
    .container { width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 1.5rem; }
    .text-primary { color: var(--primary); }
    .text-secondary { color: var(--secondary); }
    .text-muted { color: var(--muted-fg); }
    .text-glow { text-shadow: 0 0 20px hsla(188, 100%, 50%, 0.5); }
    .box-glow { box-shadow: 0 0 30px var(--primary-glow); }
    .grad-text {
      background: linear-gradient(90deg, var(--secondary), var(--primary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .grad-text-rev {
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── Scroll-reveal animations ──────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.from-left  { transform: translateX(-28px); }
    .reveal.from-right { transform: translateX(28px); }
    .reveal.scale-in   { transform: scale(0.85); }
    .reveal.visible {
      opacity: 1;
      transform: none;
    }
    /* stagger children */
    .stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; }
    .stagger.visible > *:nth-child(1)  { opacity:1; transform:none; transition-delay: 0.00s; }
    .stagger.visible > *:nth-child(2)  { opacity:1; transform:none; transition-delay: 0.05s; }
    .stagger.visible > *:nth-child(3)  { opacity:1; transform:none; transition-delay: 0.10s; }
    .stagger.visible > *:nth-child(4)  { opacity:1; transform:none; transition-delay: 0.15s; }
    .stagger.visible > *:nth-child(5)  { opacity:1; transform:none; transition-delay: 0.20s; }
    .stagger.visible > *:nth-child(6)  { opacity:1; transform:none; transition-delay: 0.25s; }
    .stagger.visible > *:nth-child(7)  { opacity:1; transform:none; transition-delay: 0.30s; }
    .stagger.visible > *:nth-child(8)  { opacity:1; transform:none; transition-delay: 0.35s; }
    .stagger.visible > *:nth-child(9)  { opacity:1; transform:none; transition-delay: 0.40s; }
    .stagger.visible > *:nth-child(10) { opacity:1; transform:none; transition-delay: 0.45s; }
    .stagger.visible > *:nth-child(11) { opacity:1; transform:none; transition-delay: 0.50s; }
    .stagger.visible > *:nth-child(12) { opacity:1; transform:none; transition-delay: 0.55s; }
    .stagger.visible > *:nth-child(13) { opacity:1; transform:none; transition-delay: 0.60s; }
    .stagger.visible > *:nth-child(14) { opacity:1; transform:none; transition-delay: 0.65s; }
    .stagger.visible > *:nth-child(15) { opacity:1; transform:none; transition-delay: 0.70s; }
    .stagger.visible > *:nth-child(16) { opacity:1; transform:none; transition-delay: 0.75s; }
    /* hero animate-in on load */
    @keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
    .hero-anim-1 { animation: fadeUp 0.6s ease 0.1s both; }
    .hero-anim-2 { animation: fadeUp 0.6s ease 0.25s both; }
    .hero-anim-3 { animation: fadeUp 0.6s ease 0.4s both; }
    .hero-anim-4 { animation: fadeUp 0.6s ease 0.55s both; }
    .hero-anim-5 { animation: fadeUp 1s ease 1s both; }
    @keyframes scrollPulse { 0%,100%{opacity:0.3;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.3)} }

    /* ── Navbar ────────────────────────────────────────────── */
    #navbar {
      position: fixed; top:0; left:0; right:0; z-index:50;
      padding: 1.25rem 0;
      transition: background 0.3s, padding 0.3s, border-color 0.3s;
      border-bottom: 1px solid transparent;
    }
    #navbar.scrolled {
      background: hsla(230, 25%, 5%, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 0.75rem 0;
      border-color: var(--border);
    }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; }
    .nav-logo {
      display: flex; align-items: center; gap: 0.5rem;
      font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
      color: #fff; letter-spacing: -0.02em;
    }
    .nav-logo-icon {
      width: 32px; height: 32px; border-radius: 6px;
      background: var(--primary-dim); border: 1px solid hsla(188,100%,50%,0.3);
      display: flex; align-items: center; justify-content: center;
      transition: box-shadow 0.3s;
    }
    .nav-logo:hover .nav-logo-icon { box-shadow: 0 0 20px var(--primary-glow); }
    .nav-links { display: flex; align-items: center; gap: 2rem; }
    .nav-links a {
      font-size: 0.875rem; font-weight: 500; color: var(--muted-fg);
      transition: color 0.2s;
    }
    .nav-links a.btn-primary { color: #000; }
    .nav-links a:hover { color: #fff; }
    .btn-primary {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      background: var(--primary); color: #000;
      font-weight: 600; font-size: 0.875rem;
      padding: 0.5rem 1.25rem; border-radius: var(--radius);
      transition: background 0.2s, box-shadow 0.2s;
    }
    .btn-primary:hover { background: hsla(188,100%,50%,0.85); box-shadow: 0 0 25px var(--primary-glow); }
    .btn-outline {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      background: transparent; color: #fff;
      font-weight: 600; font-size: 0.875rem;
      padding: 0.5rem 1.25rem; border-radius: var(--radius);
      border: 1px solid var(--border);
      transition: background 0.2s, color 0.2s;
    }
    .btn-outline:hover { background: rgba(255,255,255,0.05); }
    /* hamburger */
    .nav-hamburger { display: none; color: #fff; padding: 0.5rem; }
    .nav-mobile {
      display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1.5rem;
      background: hsla(230,25%,5%,0.97); backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      overflow: hidden; max-height: 0;
      transition: max-height 0.35s ease, padding 0.35s ease;
    }
    .nav-mobile.open { max-height: 400px; padding: 1rem 1.5rem 1.5rem; }
    .nav-mobile a { font-size: 1rem; font-weight: 500; color: var(--muted-fg); padding: 0.5rem; transition: color 0.2s; }
    .nav-mobile a:hover { color: #fff; }
    @media (max-width: 767px) {
      .nav-links, nav.nav-links { display: none !important; }
      .nav-hamburger { display: flex; }
    }

    /* ── Hero ──────────────────────────────────────────────── */
    #hero {
      position: relative; min-height: 100dvh;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; padding-top: 9rem;
    }
    @media (max-width: 767px) { #hero { padding-top: 8rem; } }
    .hero-bg-blob-1 {
      position: absolute; top:25%; left:25%;
      width: 500px; height: 500px; border-radius: 50%;
      background: hsla(188,100%,50%,0.2); filter: blur(120px);
      opacity: 0.5; mix-blend-mode: screen; pointer-events: none;
    }
    .hero-bg-blob-2 {
      position: absolute; bottom:25%; right:25%;
      width: 600px; height: 600px; border-radius: 50%;
      background: hsla(213,100%,48%,0.1); filter: blur(150px);
      opacity: 0.4; mix-blend-mode: screen; pointer-events: none;
    }
    .hero-grid {
      position: absolute; inset: 0; pointer-events: none;
      background-image: linear-gradient(to right, rgba(128,128,128,0.07) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(128,128,128,0.07) 1px, transparent 1px);
      background-size: 24px 24px;
      -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 70%, transparent 100%);
      mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 70%, transparent 100%);
    }
    .hero-content { position: relative; z-index:1; text-align: center; max-width: 1100px; margin: 0 auto; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.375rem 0.875rem; border-radius: 9999px;
      background: var(--primary-dim); border: 1px solid hsla(188,100%,50%,0.2);
      color: var(--primary); font-size: 0.875rem; font-weight: 500; margin-bottom: 2rem;
    }
    .hero-h1 {
      font-size: clamp(2.8rem, 8vw, 5.5rem); font-weight: 700;
      color: #fff; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1.5rem;
    }
    .hero-p { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--muted-fg); max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.7; }
    .hero-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
    .hero-btns .btn-primary, .hero-btns .btn-outline { height: 3.5rem; padding: 0 2rem; font-size: 1rem; }
    .hero-scroll {
      position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    }
    .hero-scroll span { font-size: 0.7rem; color: var(--muted-fg); text-transform: uppercase; letter-spacing: 0.15em; }
    .hero-scroll-line {
      width: 1px; height: 3rem;
      background: linear-gradient(to bottom, var(--primary), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }

    /* ── Section base ──────────────────────────────────────── */
    section { padding: 6rem 0; }
    .section-label { font-size: 0.875rem; font-weight: 500; color: var(--muted-fg); margin-bottom: 1rem; }
    .section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: #fff; margin-bottom: 1rem; }
    .section-sub { font-size: 1.1rem; color: var(--muted-fg); max-width: 560px; line-height: 1.7; text-align: center; margin: 0 auto; }

    /* ── Services ──────────────────────────────────────────── */
    #services { position: relative; overflow: hidden; }
    .services-grid-bg {
      position: absolute; inset:0; pointer-events:none; opacity:0.2;
      background-image: linear-gradient(to right,rgba(255,255,255,0.03) 1px,transparent 1px),
                        linear-gradient(to bottom,rgba(255,255,255,0.03) 1px,transparent 1px);
      background-size: 4rem 4rem;
    }
    .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 3.5rem; }
    .service-card {
      position: relative; background: var(--card); border: 1px solid var(--border);
      border-radius: 0.75rem; padding: 2rem;
      transition: border-color 0.3s;
      overflow: hidden;
    }
    .service-card::before {
      content:''; position:absolute; inset:0;
      background: linear-gradient(135deg, hsla(188,100%,50%,0.05), transparent);
      opacity:0; border-radius:inherit; transition:opacity 0.5s;
    }
    .service-card:hover { border-color: hsla(188,100%,50%,0.4); }
    .service-card:hover::before { opacity:1; }
    .service-icon {
      width: 3.5rem; height: 3.5rem; border-radius: 0.5rem;
      background: var(--background); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1.5rem; transition: box-shadow 0.3s;
    }
    .service-card:hover .service-icon { box-shadow: 0 0 20px var(--primary-glow); }
    .service-card h3 { font-size: 1.25rem; font-weight: 700; color:#fff; margin-bottom:0.75rem; }
    .service-card p { font-size: 0.9rem; color: var(--muted-fg); line-height: 1.7; margin-bottom: 1.5rem; }
    .service-features { margin-bottom: 2rem; }
    .service-features li { font-size: 0.875rem; color: rgba(255,255,255,0.8); display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; }
    .service-features li::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--primary); flex-shrink:0; }
    .service-cta { font-size:0.875rem; font-weight:500; color:var(--primary); display:inline-flex; align-items:center; gap:0.25rem; transition:color 0.2s; }
    .service-cta:hover { color:#fff; }

    /* ── Projects ──────────────────────────────────────────── */
    #projects { background: hsla(230,25%,5%,0.5); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
    .projects-header { display:flex; flex-direction:column; gap:1rem; margin-bottom:4rem; align-items:center; }
    @media(min-width:768px){ .projects-header { flex-direction:column; align-items:center; justify-content:center; } }
    .projects-list { display:flex; flex-direction:column; gap:3rem; }
    .project-card {
      border-radius:1rem; overflow:hidden; border:1px solid var(--border);
      background:var(--card); transition:border-color 0.5s;
      display:grid;
    }
    @media(min-width:768px){ .project-card { grid-template-columns:1fr 1fr; } }
    .project-card:hover { border-color: hsla(188,100%,50%,0.3); }
    .project-card.accent-secondary:hover { border-color: hsla(213,100%,48%,0.3); }
    .project-info { padding: 2.5rem 3rem; display:flex; flex-direction:column; justify-content:center; }
    .project-cat { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.7rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.15em; color:var(--muted-fg); margin-bottom:1rem; }
    .project-dot { width:8px; height:8px; border-radius:50%; background:var(--primary); }
    .project-dot.sec { background:var(--secondary); }
    .project-card h3 { font-size:1.75rem; font-weight:700; color:#fff; margin-bottom:1rem; transition:text-shadow 0.3s; }
    .project-card:hover h3 { text-shadow: 0 0 20px hsla(188,100%,50%,0.4); }
    .project-card p { font-size:0.95rem; color:var(--muted-fg); line-height:1.7; margin-bottom:2rem; }
    .project-tags { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
    .tag { padding:0.25rem 0.75rem; border-radius:4px; background:var(--background); border:1px solid var(--border); font-size:0.75rem; font-weight:500; color:rgba(255,255,255,0.7); }
    .project-link { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.875rem; font-weight:500; color:var(--primary); transition:color 0.2s; }
    .project-link:hover { color:var(--secondary); text-decoration:underline; }
    .project-image { position:relative; min-height:260px; background:var(--muted); border-left:1px solid hsla(0,0%,100%,0.05); overflow:hidden; }
    .project-image-bg { position:absolute; inset:0; background:linear-gradient(135deg,var(--background),var(--muted)); }
    .project-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.8; mix-blend-mode:screen; transition:transform 0.7s, opacity 0.7s; z-index:1; }
    .project-card:hover .project-image img { transform:scale(1.05); opacity:1; }
    .project-image-overlay { position:absolute; inset:0; z-index:2; mix-blend-mode:overlay; }
    .project-image-overlay.primary { background:hsla(188,100%,50%,0.2); }
    .project-image-overlay.secondary { background:hsla(213,100%,48%,0.2); }

    /* ── About ─────────────────────────────────────────────── */
    #about { position:relative; overflow:hidden; }
    .about-blob {
      position:absolute; top:0; right:0;
      width:500px; height:500px; border-radius:50%;
      background:hsla(188,100%,50%,0.05); filter:blur(100px); pointer-events:none;
    }
    .about-grid { display:grid; gap:4rem; align-items:center; }
    @media(min-width:1024px){ .about-grid { grid-template-columns:1fr 1fr; } }
    .about-text h2 { font-size:clamp(2rem,4vw,3rem); font-weight:700; color:#fff; margin-bottom:1.5rem; line-height:1.2; }
    .about-text p { font-size:1rem; color:var(--muted-fg); line-height:1.8; margin-bottom:1rem; }
    .values-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    .value-card {
      background:hsla(230,25%,8%,0.5); border:1px solid var(--border);
      border-radius:0.75rem; padding:1.5rem;
      backdrop-filter:blur(4px); transition:background 0.3s, border-color 0.3s;
    }
    .value-card:hover { background:var(--card); border-color:hsla(188,100%,50%,0.25); }
    .value-icon {
      width:2.5rem; height:2.5rem; border-radius:4px;
      background:var(--primary-dim); display:flex; align-items:center;
      justify-content:center; margin-bottom:1rem; color:var(--primary);
    }
    .value-card h4 { font-size:0.95rem; font-weight:700; color:#fff; margin-bottom:0.4rem; }
    .value-card p { font-size:0.82rem; color:var(--muted-fg); line-height:1.6; }

    /* ── Tech Stack ────────────────────────────────────────── */
    #tech { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(0,0,0,0.2); }
    .tech-header { text-align:center; margin-bottom:3rem; }
    .tech-header h2 { font-size:1.5rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.15em; color:var(--muted-fg); margin-bottom:1rem; }
    .tech-header p { font-size:1.1rem; color:#fff; max-width:600px; margin:0 auto; }
    .tech-grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1.5rem 2rem; max-width:900px; margin:0 auto; }
    .tech-item { width:80px; text-align:center;
      display:flex; flex-direction:column; align-items:center; gap:0.75rem;
      padding:1rem; border-radius:0.75rem; border:1px solid transparent;
      color:var(--muted-fg); cursor:default; min-width:80px;
      transition:border-color 0.3s, background 0.3s, color 0.3s, transform 0.3s;
    }
    .tech-item:hover { border-color:hsla(188,100%,50%,0.2); background:hsla(188,100%,50%,0.05); color:var(--primary); transform:translateY(-4px); }
    .tech-item img { width:2rem; height:2rem; opacity:0.7; transition: filter 0.3s, opacity 0.3s; }
    .tech-item:hover img { opacity:1; filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(155deg); }
    .tech-item span { font-size:0.72rem; font-weight:500; text-align:center; white-space:nowrap; }

    /* ── Contact ───────────────────────────────────────────── */
    #contact { position:relative; padding:8rem 0; }
    .contact-bg {
      position:absolute; inset:0; pointer-events:none;
      background:radial-gradient(ellipse at center, hsla(188,100%,50%,0.08) 0%, transparent 70%);
    }
    .contact-card {
      max-width:900px; margin:0 auto; background:var(--card);
      border:1px solid var(--border); border-radius:1.25rem; overflow:hidden;
      box-shadow:0 40px 80px rgba(0,0,0,0.4);
      display:grid;
    }
    @media(min-width:768px){ .contact-card { grid-template-columns:1fr 1fr; } }
    .contact-left { padding:2.5rem 3rem; background:hsla(230,20%,12%,0.4); display:flex; flex-direction:column; justify-content:space-between; }
    .contact-left h2 { font-size:clamp(1.75rem,3vw,2.25rem); font-weight:700; color:#fff; margin-bottom:1rem; line-height:1.25; }
    .contact-left p { color:var(--muted-fg); margin-bottom:2rem; }
    .contact-info { display:flex; flex-direction:column; gap:0.75rem; font-size:0.9rem; color:rgba(255,255,255,0.75); }
    .contact-info strong { color:#fff; }
    .contact-right { padding:2.5rem 3rem; }
    .form-group { margin-bottom:1rem; }
    .form-group label { display:block; font-size:0.875rem; font-weight:500; color:var(--foreground); margin-bottom:0.5rem; }
    .form-group input, .form-group textarea {
      width:100%; padding:0.625rem 0.875rem;
      background:var(--background); border:1px solid var(--border);
      border-radius:var(--radius); color:#fff; font:inherit; font-size:0.9rem;
      transition:border-color 0.2s, box-shadow 0.2s; outline:none;
    }
    .form-group input:focus, .form-group textarea:focus { border-color:var(--primary); box-shadow:0 0 0 2px hsla(188,100%,50%,0.15); }
    .form-group textarea { min-height:120px; resize:vertical; }
    .form-group input::placeholder, .form-group textarea::placeholder { color:var(--muted-fg); }
    .btn-submit {
      width:100%; margin-top:1rem; height:3rem;
      background:var(--primary); color:var(--primary-dark); font-weight:600;
      border-radius:var(--radius); display:flex; align-items:center; justify-content:center; gap:0.5rem;
      font-size:0.9rem; cursor:pointer; border:none; transition:background 0.2s, box-shadow 0.2s;
    }
    .btn-submit:hover { background:hsla(188,100%,50%,0.85); box-shadow:0 0 25px var(--primary-glow); }
    .btn-submit:disabled { opacity:0.7; cursor:not-allowed; }
    /* toast */
    #toast {
      position:fixed; bottom:2rem; right:2rem; z-index:100;
      background:var(--card); border:1px solid var(--border); border-radius:0.75rem;
      padding:1rem 1.5rem; max-width:320px; box-shadow:0 20px 40px rgba(0,0,0,0.5);
      transform:translateY(120%); opacity:0; transition:transform 0.4s ease, opacity 0.4s ease;
      pointer-events:none;
    }
    #toast.show { transform:translateY(0); opacity:1; }
    #toast strong { display:block; color:#fff; margin-bottom:0.25rem; }
    #toast p { font-size:0.85rem; color:var(--muted-fg); }

    /* ── Footer ────────────────────────────────────────────── */
    footer { border-top:1px solid var(--border); padding:3rem 0; background:var(--background); }
    .footer-inner { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
    @media(min-width:768px){ .footer-inner { flex-direction:row; justify-content:space-between; } }
    .footer-logo { display:flex; align-items:center; gap:0.5rem; font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:#fff; }
    .footer-logo-icon { width:32px; height:32px; border-radius:6px; background:var(--primary-dim); border:1px solid hsla(188,100%,50%,0.3); display:flex; align-items:center; justify-content:center; }
    .footer-links { display:flex; gap:1.5rem; }
    .footer-links a { font-size:0.875rem; font-weight:500; color:var(--muted-fg); transition:color 0.2s; }
    .footer-links a:hover { color:#fff; }
    .footer-bottom { display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; }
    @media(min-width:768px){ .footer-bottom { flex-direction:row; justify-content:center; text-align:center; } }
    .footer-bottom span, .footer-bottom a { font-size:0.75rem; color:hsla(230,10%,70%,0.5); }
    .footer-bottom a:hover { color:var(--muted-fg); }
    .footer-legal { display:flex; gap:1rem; }

    /* ── SVG Icons (inline) ─────────────────────────────────── */
    svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }