// Direction 3: Soft Premium (Atmospheric)
// Geist throughout. Soft ambient gradients, rounded cards, glass tabs.

const { useState: useS3, useEffect: useE3, useRef: useR3 } = React;
const { Counter: C3, Marquee: M3, Aster: A3 } = window.LR;

const D3_CSS = `
  .d3 { --bg:#0A0A0E; --fg:#EFEEEC; --mute:rgba(239,238,236,.55); --line:rgba(239,238,236,.1);
        --accent:var(--lr-accent, #C5FF3D); --paper:#F2EFEA; --paper-fg:#0A0A0E;
        --grad-1: color-mix(in oklab, var(--accent) 22%, transparent);
        --grad-2: color-mix(in oklab, var(--accent) 10%, transparent);
        font-family:'Nexa', 'Geist', 'Manrope', sans-serif; background:var(--bg); color:var(--fg);
        -webkit-font-smoothing:antialiased; position:relative; overflow:hidden; }
  .d3.is-light { --bg:#F2EFEA; --fg:#0A0A0E; --mute:rgba(10,10,14,.6); --line:rgba(10,10,14,.1); --paper:#0A0A0E; --paper-fg:#F2EFEA; }
  .d3 .display { font-family:'Nexa', 'Geist', sans-serif; font-weight:300; letter-spacing:-.025em; line-height:1; font-style:normal; }
  .d3 .display em { font-style:italic; font-weight:300; font-feature-settings:'ss01'; }

  /* Ambient backdrop glow */
  .d3-glow { position:absolute; pointer-events:none; border-radius:50%; filter:blur(80px); opacity:.6; z-index:0; }
  .d3-glow.g1 { top:-100px; left:30%; width:600px; height:600px; background:radial-gradient(circle, var(--grad-1) 0%, transparent 60%); }
  .d3-glow.g2 { top:1400px; right:-150px; width:500px; height:500px; background:radial-gradient(circle, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 60%); }
  .d3-glow.g3 { top:3200px; left:-150px; width:520px; height:520px; background:radial-gradient(circle, color-mix(in oklab, #6B7CFF 25%, transparent) 0%, transparent 60%); }
  .d3-glow.g4 { top:5000px; right:20%; width:480px; height:480px; background:radial-gradient(circle, color-mix(in oklab, var(--accent) 16%, transparent) 0%, transparent 60%); }

  .d3 > *:not(.d3-glow) { position:relative; z-index:1; }

  /* Glass surface */
  .d3-glass { background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
        border:.5px solid rgba(255,255,255,.08); backdrop-filter:blur(20px); border-radius:24px; }
  .d3.is-light .d3-glass { background:linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.01)); border-color:rgba(0,0,0,.08); }

  /* Nav */
  .d3-nav { display:flex; align-items:center; justify-content:space-between;
        padding:18px 28px; margin:16px 24px; border-radius:999px;
        background:color-mix(in oklab, var(--bg) 60%, transparent); backdrop-filter:blur(18px);
        border:.5px solid var(--line); position:sticky; top:16px; z-index:50; }
  .d3-nav-logo { display:flex; align-items:center; gap:10px; font-family:'Nexa', 'Geist', sans-serif; font-size:20px; letter-spacing:-.01em; white-space:nowrap; }
  .d3-nav-logo span { white-space:nowrap; }
  .d3-nav-menu { display:flex; gap:6px; font-size:13px; color:var(--mute); }
  .d3-nav-menu a { padding:6px 14px; border-radius:999px; transition:all .2s; }
  .d3-nav-menu a:hover { background:var(--line); color:var(--fg); }
  .d3-cta { display:inline-flex; align-items:center; gap:10px; padding:10px 18px;
        background:var(--accent); color:#0A0A0E; border-radius:999px; font-size:13px;
        font-weight:500; border:0; cursor:pointer; transition:transform .2s, box-shadow .2s; }
  .d3-cta:hover { transform:translateY(-1px); box-shadow:0 8px 24px color-mix(in oklab, var(--accent) 35%, transparent); }
  .d3-cta.ghost { background:transparent; color:var(--fg); border:.5px solid var(--line); }
  .d3-cta.ghost:hover { background:var(--line); }
  .d3-lang { display:inline-flex; padding:3px; background:var(--line); border-radius:999px; font-size:11px; }
  .d3-lang span { padding:5px 9px; border-radius:999px; color:var(--mute); transition:all .2s; cursor:default; }
  .d3-lang span.on { background:var(--fg); color:var(--bg); }

  /* Hero */
  .d3-hero { padding: clamp(48px,7vw,112px) 56px clamp(48px,5vw,96px); position:relative; }
  .d3-hero-tag { display:inline-flex; align-items:center; gap:10px; padding:6px 14px;
        background:var(--line); border-radius:999px; font-size:12px; color:var(--mute); }
  .d3-hero-tag .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
  .d3-hero h1 { font-size: clamp(56px, 8vw, 124px); margin-top:32px; max-width:18ch; }
  .d3-hero h1 .swap { background:linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 40%, var(--fg)));
        -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic;
        padding-right:.18em; margin-right:-.12em; }
  .d3-hero-row { display:grid; grid-template-columns: 1.4fr 1fr; gap:64px; margin-top:64px; align-items:flex-end; }
  .d3-hero-sub { font-family:'Nexa', 'Geist', sans-serif; font-weight:300; font-size:24px; line-height:1.35; color:rgba(239,238,236,.75); max-width:34ch; font-style:italic; }
  .d3.is-light .d3-hero-sub { color:rgba(10,10,14,.7); }
  .d3-hero-cta-row { display:flex; gap:12px; align-items:center; }

  /* Floating preview card */
  .d3-hero-card { margin: 48px 56px 0; padding:32px; border-radius:32px;
        background:linear-gradient(160deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.01) 50%);
        border:.5px solid rgba(255,255,255,.08); position:relative; overflow:hidden; }
  .d3.is-light .d3-hero-card { background:linear-gradient(160deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.01) 50%); border-color:rgba(0,0,0,.08); }
  .d3-hero-card::before { content:''; position:absolute; inset:-2px; border-radius:32px;
        background:linear-gradient(135deg, var(--grad-1), transparent 60%); pointer-events:none; opacity:.5; }
  .d3-hero-card-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
  .d3-hero-card-cell { padding:24px; background:color-mix(in oklab, var(--bg) 70%, transparent); }
  .d3-hero-card-cell .l { font-size:11px; color:var(--mute); letter-spacing:.08em; text-transform:uppercase; }
  .d3-hero-card-cell .v { font-family:'Nexa', 'Geist', sans-serif; font-size:40px; font-weight:300; margin-top:8px; letter-spacing:-.02em; }
  .d3-hero-card-cell .v em { color:var(--accent); font-style:normal; }
  .d3-hero-card-cell .d { font-size:12px; color:var(--mute); margin-top:6px; }
  .d3-hero-card-bar { display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding:0 8px; }
  .d3-hero-card-bar .pill { display:inline-flex; gap:8px; padding:6px 12px; border-radius:999px; background:var(--line); font-size:11px; color:var(--mute); }
  .d3-hero-card-bar .pill .live { width:6px; height:6px; background:#7AEC8A; border-radius:50%; box-shadow:0 0 8px #7AEC8A; }

  /* Services */
  .d3-svc { padding: clamp(64px,8vw,128px) 56px clamp(40px,4vw,64px); }
  .d3-svc-head { text-align:center; max-width:54ch; margin:0 auto 56px; }
  .d3-svc-head h2 { font-size: clamp(40px,5vw,80px); }
  .d3-svc-head p { color:var(--mute); margin-top:20px; font-size:16px; line-height:1.5; }
  .d3-tabs { display:inline-flex; padding:5px; background:var(--line); border-radius:999px; margin:0 auto; gap:4px; }
  .d3-tab { padding:10px 22px; border-radius:999px; font-size:13px; color:var(--mute);
        background:transparent; border:0; cursor:pointer; transition:all .35s; }
  .d3-tab.is-on { background:var(--fg); color:var(--bg); }
  .d3-svc-body { margin-top:64px; padding:48px; border-radius:32px;
        background:linear-gradient(160deg, color-mix(in oklab, var(--accent) 6%, transparent), transparent 70%);
        border:.5px solid var(--line); }
  .d3-svc-top { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:flex-end; padding-bottom:40px; border-bottom:1px solid var(--line); }
  .d3-svc-top h3 { font-size:clamp(32px,4vw,56px); }
  .d3-svc-top p { color:var(--mute); font-size:16px; line-height:1.55; max-width:42ch; }
  .d3-svc-pillars { display:grid; grid-template-columns: repeat(4, 1fr); gap:1px; background:var(--line); margin-top:1px; }
  .d3-svc-p { background:color-mix(in oklab, var(--bg) 80%, transparent); padding:32px 24px; transition:background .25s; min-height:240px; display:flex; flex-direction:column; justify-content:space-between; }
  .d3-svc-p:hover { background:color-mix(in oklab, var(--accent) 8%, var(--bg)); }
  .d3-svc-p .id { font-family:'Nexa', 'Geist', sans-serif; font-size:32px; color:var(--accent); font-style:italic; font-weight:300; }
  .d3-svc-p h4 { font-family:'Nexa', 'Geist', sans-serif; font-size:22px; font-weight:400; letter-spacing:-.01em; margin-top:auto; }
  .d3-svc-p p { font-size:13px; line-height:1.5; color:var(--mute); margin-top:8px; }
  .d3-svc-cta-wrap { margin-top:32px; display:flex; justify-content:center; }
  .d3-svc-cta { display:inline-grid; grid-template-columns: 1fr auto; column-gap:24px; row-gap:0; align-items:center;
        padding:22px 28px; min-width:520px; max-width:100%; border-radius:24px;
        background:linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, var(--fg)));
        color:#0A0A0E; border:0; cursor:pointer;
        text-align:left; font-family:'Nexa', 'Geist', sans-serif;
        box-shadow:0 12px 32px color-mix(in oklab, var(--accent) 26%, transparent);
        transition:transform .25s, box-shadow .25s; }
  .d3-svc-cta:hover { transform:translateY(-3px);
        box-shadow:0 18px 44px color-mix(in oklab, var(--accent) 38%, transparent); }
  .d3-svc-cta .line1 { display:block; font-weight:900; font-size:18px; letter-spacing:-.01em; line-height:1.1; }
  .d3-svc-cta .line2 { display:block; font-weight:400; font-size:13px; line-height:1.35;
        color:rgba(10,10,14,.72); margin-top:2px; max-width:42ch; }
  .d3-svc-cta .arrow { font-size:24px; align-self:center; grid-row:1/3; grid-column:2;
        transition:transform .25s; }
  .d3-svc-cta:hover .arrow { transform:translateX(6px); }

  /* Results */
  .d3-res { padding: clamp(32px,3vw,56px) 56px clamp(64px,8vw,128px); }
  .d3-res-card { padding:64px 56px; border-radius:40px; position:relative;
        background:linear-gradient(160deg, color-mix(in oklab, var(--accent) 14%, var(--bg)) 0%, var(--bg) 70%);
        border:.5px solid var(--line); overflow:hidden; }
  .d3-res-card::before { content:''; position:absolute; top:0; right:0; width:60%; height:100%;
        background:radial-gradient(circle at 80% 30%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 60%);
        pointer-events:none; }
  .d3-res-head { position:relative; }
  .d3-res-head h2 { font-size: clamp(40px,5vw,80px); max-width:14ch; }
  .d3-res-head p { color:var(--mute); margin-top:18px; font-size:16px; max-width:44ch; line-height:1.55; }
  .d3-res-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; margin-top:64px; position:relative; }
  .d3-res-cell { padding:28px; border-radius:20px;
        background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
        border:.5px solid rgba(255,255,255,.08); min-height:200px;
        display:flex; flex-direction:column; justify-content:space-between; }
  .d3.is-light .d3-res-cell { background:linear-gradient(160deg, rgba(0,0,0,.04), rgba(0,0,0,.01)); border-color:rgba(0,0,0,.08); }
  .d3-res-cell .num { font-family:'Nexa', 'Geist', sans-serif; font-size:clamp(48px,5.5vw,84px); font-weight:300; letter-spacing:-.03em; line-height:1; }
  .d3-res-cell .num em { color:var(--accent); font-style:normal; }
  .d3-res-cell .lbl { font-size:13px; color:var(--mute); line-height:1.45; max-width:18ch; }
  .d3-res-cell .tag { font-size:11px; color:var(--mute); letter-spacing:.08em; text-transform:uppercase; }

  /* Clients */
  .d3-cli { padding: 56px 0; }
  .d3-cli-head { text-align:center; margin-bottom:40px; }
  .d3-cli-head h3 { font-family:'Nexa', 'Geist', sans-serif; font-size:24px; font-weight:300; font-style:italic; color:var(--mute); }
  .d3-cli-rows { display:flex; flex-direction:column; gap:8px; }
  .d3-cli-row { font-family:'Nexa', 'Geist', sans-serif; font-size:clamp(36px,4.5vw,64px); font-weight:300; padding:6px 0; opacity:.7; }
  .d3-cli-row + .d3-cli-row { opacity:.45; } /* second row a touch lower in hierarchy */
  .d3-cli-row .ast { color:var(--accent); margin:0 32px; opacity:.55; }
  .d3-cli-item { display:inline-flex; align-items:center; }
  .d3-cli-item .word { font-style:italic; }

  /* Cases */
  .d3-cs { padding: clamp(64px,8vw,128px) 56px; }
  .d3-cs-head { text-align:center; margin-bottom:64px; }
  .d3-cs-head h2 { font-size: clamp(40px,5vw,72px); }
  .d3-cs-head p { color:var(--mute); margin-top:18px; font-size:16px; max-width:48ch; margin-left:auto; margin-right:auto; line-height:1.55; }
  .d3-cs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .d3-cs-card { padding:32px 28px; border-radius:22px;
    background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border:.5px solid rgba(255,255,255,.08);
    transition:transform .3s, border-color .3s, background .3s;
    display:flex; flex-direction:column; gap:6px; }
  .d3.is-light .d3-cs-card { background:linear-gradient(160deg, rgba(0,0,0,.04), rgba(0,0,0,.01)); border-color:rgba(0,0,0,.08); }
  .d3-cs-card:hover { transform:translateY(-4px); border-color:color-mix(in oklab, var(--accent) 45%, transparent); }
  .d3-cs-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .d3-cs-num { font-family:'Nexa','Geist',sans-serif; font-size:22px; color:var(--accent); font-style:italic; font-weight:300; }
  .d3-cs-type { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); padding:5px 10px; border:.5px solid var(--line); border-radius:999px; }
  .d3-cs-name { font-family:'Nexa','Geist',sans-serif; font-size:30px; font-weight:300; letter-spacing:-.02em; line-height:1.1; }
  .d3-cs-cat { font-size:12px; color:var(--mute); margin-top:2px; font-style:italic; }
  .d3-cs-note { font-size:13px; line-height:1.55; color:rgba(239,238,236,.7); margin-top:18px; font-family:'Geist',sans-serif; }
  .d3.is-light .d3-cs-note { color:rgba(10,10,14,.7); }
  .d3-cs-link { display:inline-block; margin-top:18px; font-size:12px; color:var(--accent); border-bottom:1px solid color-mix(in oklab, var(--accent) 40%, transparent); padding-bottom:2px; align-self:flex-start; transition:opacity .2s; }
  .d3-cs-link:hover { opacity:.7; }

  /* Process */
  .d3-pr { padding: clamp(64px,8vw,128px) 56px; }
  .d3-pr-head { text-align:center; margin-bottom:64px; }
  .d3-pr-head h2 { font-size: clamp(40px,5vw,72px); }
  .d3-pr-head p { color:var(--mute); margin-top:18px; font-size:16px; max-width:48ch; margin-left:auto; margin-right:auto; line-height:1.55; }
  .d3-pr-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden; max-width:1180px; margin:0 auto; }
  .d3-pr-step { padding:32px 28px; background:color-mix(in oklab, var(--bg) 70%, transparent); display:flex; flex-direction:column; gap:6px; min-height:240px; transition:background .3s; }
  .d3-pr-step:hover { background:color-mix(in oklab, var(--bg) 50%, transparent); }
  .d3-pr-n { font-family:'Nexa','Geist',sans-serif; font-size:32px; color:var(--accent); font-style:italic; font-weight:300; line-height:1; }
  .d3-pr-dur { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-top:4px; }
  .d3-pr-t { font-family:'Nexa','Geist',sans-serif; font-size:22px; font-weight:500; letter-spacing:-.01em; margin-top:14px; line-height:1.2; }
  .d3-pr-d { font-size:13px; line-height:1.55; color:rgba(239,238,236,.65); margin-top:6px; font-family:'Geist',sans-serif; }
  .d3.is-light .d3-pr-d { color:rgba(10,10,14,.6); }

  /* Testimonials */
  .d3-tst { padding: clamp(64px,8vw,128px) 56px; }
  .d3-tst-head { text-align:center; margin-bottom:64px; }
  .d3-tst-head .tag { font-size:11px; color:var(--mute); letter-spacing:.18em; text-transform:uppercase; }
  .d3-tst-head h2 { font-size:clamp(40px,5vw,72px); margin-top:14px; }
  .d3-tst-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .d3-tst-grid--2 { grid-template-columns:repeat(2,1fr); gap:24px; max-width:1180px; margin:0 auto; }
  .d3-tst-card { padding:36px; border-radius:24px;
        background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
        border:.5px solid rgba(255,255,255,.08); transition:transform .35s, border-color .35s;
        display:flex; flex-direction:column; justify-content:space-between; min-height:360px; }
  .d3.is-light .d3-tst-card { background:linear-gradient(160deg, rgba(0,0,0,.04), rgba(0,0,0,.01)); border-color:rgba(0,0,0,.08); }
  .d3-tst-card:hover { transform:translateY(-4px); border-color:color-mix(in oklab, var(--accent) 40%, transparent); }
  .d3-tst-card .quote-mark { font-family:'Nexa', 'Geist', sans-serif; font-size:64px; color:var(--accent); line-height:.5; height:32px; }
  .d3-tst-card .q { font-family:'Nexa', 'Geist', sans-serif; font-size:22px; line-height:1.35; font-weight:300; letter-spacing:-.01em; margin-top:32px; }
  .d3-tst-card .a { display:flex; align-items:center; gap:14px; margin-top:32px; }
  .d3-tst-card .av { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 40%, var(--fg)));
        color:#0A0A0E; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; }
  .d3-tst-card .who { font-size:14px; font-weight:500; }
  .d3-tst-card .role { font-size:12px; color:var(--mute); margin-top:2px; }

  /* About */
  .d3-abt { padding: clamp(64px,8vw,128px) 56px; }
  .d3-abt-row { display:grid; grid-template-columns: 1fr 1.2fr; gap:96px; align-items:flex-start; }
  .d3-abt h2 { font-size:clamp(40px,5vw,80px); max-width:14ch; }
  .d3-abt-text { font-family:'Nexa', 'Geist', sans-serif; font-weight:300; font-size:20px; line-height:1.45; color:rgba(239,238,236,.7); }
  .d3.is-light .d3-abt-text { color:rgba(10,10,14,.7); }
  .d3-abt-text p { margin-bottom:20px; }
  .d3-abt-team { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:64px; }
  .d3-abt-team.cols-2 { grid-template-columns:repeat(2, 1fr); }
  .d3-abt-team.cols-4-2 { grid-template-columns:repeat(4, 1fr); }
  .d3-abt-mem { padding:24px 20px 22px; border-radius:20px;
        background:linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
        border:.5px solid var(--line); text-align:center; }
  .d3.is-light .d3-abt-mem { background:linear-gradient(160deg, rgba(0,0,0,.03), rgba(0,0,0,.01)); }
  .d3-abt-mem .av {
        width:120px; height:120px; aspect-ratio:1; margin:0 auto 18px;
        border-radius:50%; overflow:hidden;
        background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent), color-mix(in oklab, #6B7CFF 18%, transparent));
        border:.5px dashed color-mix(in oklab, var(--fg) 20%, transparent);
        display:flex; align-items:center; justify-content:center;
        color:color-mix(in oklab, var(--fg) 55%, transparent);
        position:relative;
  }
  .d3-abt-mem .av image-slot { width:100%; height:100%; display:block; }
  .d3-abt-mem .av img.av-photo { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
  .d3-abt-mem .av .ph-icon { width:36%; height:36%; opacity:.55; }
  .d3-abt-mem .n { font-family:'Nexa', 'Geist', sans-serif; font-size:16px; font-weight:500; letter-spacing:-.01em; }
  .d3-abt-mem .r { font-size:12px; color:var(--mute); margin-top:4px; }

  /* Contact */
  .d3-ct { padding: clamp(64px,8vw,128px) 56px; }
  .d3-ct-card { padding:64px; border-radius:40px;
        background:linear-gradient(160deg, color-mix(in oklab, var(--accent) 10%, var(--bg)) 0%, var(--bg) 70%);
        border:.5px solid var(--line); position:relative; overflow:hidden; }
  .d3-ct-card::before { content:''; position:absolute; inset:0;
        background:radial-gradient(ellipse 600px 400px at 20% 10%, color-mix(in oklab, var(--accent) 16%, transparent) 0%, transparent 60%);
        pointer-events:none; }
  .d3-ct-grid { display:grid; grid-template-columns: 1fr 1fr; gap:80px; position:relative; }
  .d3-ct h2 { font-size:clamp(48px, 6vw, 96px); }
  .d3-ct h2 em { color:var(--accent); }
  .d3-ct p { font-family:'Nexa', 'Geist', sans-serif; font-weight:300; font-size:20px; line-height:1.45; color:var(--mute); margin-top:24px; max-width:34ch; font-style:italic; }
  .d3-ct-meta { margin-top:48px; display:flex; flex-direction:column; gap:14px; font-size:14px; color:var(--mute); }
  .d3-ct-meta b { color:var(--fg); font-weight:500; }
  .d3-ct-form { padding:32px; border-radius:24px; background:color-mix(in oklab, var(--bg) 65%, transparent); border:.5px solid var(--line); }
  .d3-ct-field { padding:14px 0; border-bottom:1px solid var(--line); }
  .d3-ct-field:last-of-type { border-bottom:0; }
  .d3-ct-field label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
  .d3-ct-field input, .d3-ct-field select, .d3-ct-field textarea {
        width:100%; background:transparent; border:0; outline:0; font-family:'Nexa', 'Geist', sans-serif;
        font-size:22px; font-weight:300; color:var(--fg); padding-top:6px; resize:none; }
  .d3-ct-field input::placeholder, .d3-ct-field textarea::placeholder { color:var(--mute); }
  .d3-ct-submit { width:100%; padding:18px; background:var(--accent); color:#0A0A0E;
        border-radius:999px; font-size:14px; font-weight:600; border:0; cursor:pointer;
        margin-top:24px; transition:transform .2s, box-shadow .2s; display:flex; align-items:center; justify-content:center; gap:10px; }
  .d3-ct-submit:hover { transform:translateY(-2px); box-shadow:0 12px 32px color-mix(in oklab, var(--accent) 40%, transparent); }

  /* Footer */
  .d3-ft { padding: 56px 56px 32px; border-top:1px solid var(--line); }
  .d3-ft-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:32px; }
  .d3-ft .display { font-size: clamp(80px, 11vw, 180px); line-height:.9; letter-spacing:-.04em; }
  .d3-ft-logo { align-self:flex-start; }
  .d3-ft .display em { color:var(--accent); font-style:italic; }
  .d3-ft-mini { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
  .d3-ft-list { margin-top:14px; display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--mute); }
  .d3-ft-list a:hover { color:var(--fg); }
  .d3-ft-bot { display:flex; justify-content:space-between; padding-top:24px; margin-top:48px; border-top:1px solid var(--line);
        font-size:12px; color:var(--mute); }

  /* Reveal anim — disabled in static artboards; everything visible by default */
  .d3 [data-rev] { opacity:1; transform:none; }

  /* Mobile */
  .d3.is-mobile .d3-nav { padding:12px 16px; margin:10px 12px; }
  .d3.is-mobile .d3-nav-menu, .d3.is-mobile .d3-cta.ghost { display:none; }
  .d3.is-mobile .d3-nav-logo { font-size:17px; }
  .d3.is-mobile .d3-hero { padding: 40px 20px; }
  .d3.is-mobile .d3-hero h1 { font-size:52px; margin-top:24px; }
  .d3.is-mobile .d3-hero-row { grid-template-columns:1fr; gap:32px; margin-top:40px; }
  .d3.is-mobile .d3-hero-sub { font-size:20px; }
  .d3.is-mobile .d3-hero-card { margin:24px 20px 0; padding:20px; border-radius:24px; }
  .d3.is-mobile .d3-hero-card-grid { grid-template-columns:1fr; }
  .d3.is-mobile .d3-hero-card-cell .v { font-size:32px; }
  .d3.is-mobile .d3-hero-card-bar { flex-direction:column; gap:8px; align-items:flex-start; }
  .d3.is-mobile .d3-svc { padding:64px 20px 32px; }
  .d3.is-mobile .d3-svc-head h2 { font-size:40px; }
  .d3.is-mobile .d3-svc-body { padding:24px; border-radius:24px; }
  .d3.is-mobile .d3-svc-top { grid-template-columns:1fr; gap:24px; }
  .d3.is-mobile .d3-svc-top h3 { font-size:30px; }
  .d3.is-mobile .d3-svc-pillars { grid-template-columns:1fr; }
  .d3.is-mobile .d3-svc-p { padding:22px; min-height:140px; }
  .d3.is-mobile .d3-svc-cta { min-width:0; width:100%; padding:18px 20px; }
  .d3.is-mobile .d3-svc-cta .line1 { font-size:15px; }
  .d3.is-mobile .d3-svc-cta .line2 { font-size:12px; }
  .d3.is-mobile .d3-svc-cta .arrow { font-size:20px; }
  .d3.is-mobile .d3-res { padding:32px 16px 56px; }
  .d3.is-mobile .d3-res-card { padding:32px 24px; border-radius:28px; }
  .d3.is-mobile .d3-res-head h2 { font-size:40px; }
  .d3.is-mobile .d3-res-grid { grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:40px; }
  .d3.is-mobile .d3-res-cell { padding:20px; min-height:160px; border-radius:16px; }
  .d3.is-mobile .d3-res-cell .num { font-size:42px; }
  .d3.is-mobile .d3-cli { padding:40px 0; }
  .d3.is-mobile .d3-cli-row { font-size:28px; }
  .d3.is-mobile .d3-tst { padding:56px 20px; }
  .d3.is-mobile .d3-tst-head h2 { font-size:38px; }
  .d3.is-mobile .d3-tst-grid { grid-template-columns:1fr; gap:14px; }
  .d3.is-mobile .d3-tst-card { padding:28px; min-height:auto; }
  .d3.is-mobile .d3-cs { padding:56px 20px; }
  .d3.is-mobile .d3-cs-head h2 { font-size:38px; }
  .d3.is-mobile .d3-cs-grid { grid-template-columns:1fr; gap:12px; }
  .d3.is-mobile .d3-cs-card { padding:24px 22px; }
  .d3.is-mobile .d3-cs-name { font-size:26px; }
  .d3.is-mobile .d3-pr { padding:56px 20px; }
  .d3.is-mobile .d3-pr-head h2 { font-size:38px; }
  .d3.is-mobile .d3-pr-grid { grid-template-columns:1fr; }
  .d3.is-mobile .d3-pr-step { min-height:0; padding:24px 22px; }
  .d3.is-mobile .d3-abt { padding:56px 20px; }
  .d3.is-mobile .d3-abt-row { grid-template-columns:1fr; gap:40px; }
  .d3.is-mobile .d3-abt h2 { font-size:40px; }
  .d3.is-mobile .d3-abt-text { font-size:18px; }
  .d3.is-mobile .d3-abt-team { grid-template-columns:repeat(2, 1fr); gap:12px; }
  .d3.is-mobile .d3-ct { padding:56px 20px; }
  .d3.is-mobile .d3-ct-card { padding:28px; border-radius:28px; }
  .d3.is-mobile .d3-ct-grid { grid-template-columns:1fr; gap:32px; }
  .d3.is-mobile .d3-ct h2 { font-size:48px; }
  .d3.is-mobile .d3-ct-form { padding:24px; }
  .d3.is-mobile .d3-ct-field input, .d3.is-mobile .d3-ct-field textarea, .d3.is-mobile .d3-ct-field select { font-size:18px; }
  .d3.is-mobile .d3-ft { padding:48px 20px 24px; }
  .d3.is-mobile .d3-ft-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .d3.is-mobile .d3-ft .display { font-size:72px; grid-column:1/-1; }
  .d3.is-mobile .d3-ft-bot { flex-direction:column; gap:8px; }
`;

function D3Page({ lang, density, mobile, sections, accent }) {
  const C = window.CONTENT;
  const [svc, setSvc] = useS3('nuevo');
  const active = C.services[svc];

  useE3(() => {
    if (document.getElementById('d3-css')) return;
    const s = document.createElement('style');
    s.id = 'd3-css';
    s.textContent = D3_CSS;
    document.head.appendChild(s);
  }, []);

  return (
    <div className={`d3 ${mobile ? 'is-mobile' : ''}`} style={{ '--lr-accent': accent }} data-density={density}>
      <div className="d3-glow g1"></div>
      <div className="d3-glow g2"></div>
      <div className="d3-glow g3"></div>
      <div className="d3-glow g4"></div>

      {/* Nav */}
      <nav className="d3-nav">
        <a className="d3-nav-logo" href="#">
          <window.LR.Logo height={mobile ? 22 : 28} color="var(--fg)" />
        </a>
        {!mobile &&
        <div className="d3-nav-menu">
            {C.nav[lang].map((n) => <a key={n} href="#">{n}</a>)}
          </div>
        }
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <div className="d3-lang">
            <span className={lang === 'es' ? 'on' : ''}>ES</span>
            <span className={lang === 'en' ? 'on' : ''}>EN</span>
          </div>
          <button className="d3-cta" onClick={() => window.D3Apply && window.D3Apply.openSelector()}>{mobile ? '→' : `${C.hero.cta_primary[lang]} →`}</button>
        </div>
      </nav>

      {/* Hero */}
      {sections.hero &&
      <section className="d3-hero">
          <div className="d3-hero-tag" data-rev>
            <span className="dot"></span>
            {C.hero.eyebrow[lang]}
          </div>
          <h1 className="display">
            <span data-rev>
              {lang === 'es' ?
            <>Tu tienda online merece estar a la <em className="swap">altura de tu producto.</em></> :

            <>Your online store deserves to be <em className="swap">as good as your product.</em></>
            }
            </span>
          </h1>
          <div className="d3-hero-row">
            <div className="d3-hero-sub" data-rev>{C.hero.sub[lang]}</div>
            <div className="d3-hero-cta-row" data-rev>
              <button className="d3-cta" onClick={() => window.D3Apply && window.D3Apply.openSelector()}>{C.hero.cta_primary[lang]} →</button>
            </div>
          </div>
        </section>
      }

      {/* Clients */}
      {sections.clients &&
      <section className="d3-cli">
          <div className="d3-cli-head">
            <div style={{ fontSize: 11, color: 'var(--mute)', letterSpacing: '.18em', textTransform: 'uppercase' }}>
              · {lang === 'es' ? 'Clientes' : 'Clients'} ·
            </div>
            <h3 style={{ marginTop: 10 }}>{C.clients.title[lang]}</h3>
          </div>
          <div className="d3-cli-rows">
            <div className="d3-cli-row" style={{ overflow: 'hidden' }}>
              <M3 speed={mobile ? 30 : 55} gap={0}>
                {C.clients.list.map((c, i) =>
              <span key={i} className="d3-cli-item">
                    <span className="word">{c}</span>
                    <span className="ast">*</span>
                  </span>
              )}
              </M3>
            </div>
            <div className="d3-cli-row" style={{ overflow: 'hidden' }}>
              <M3 speed={mobile ? 38 : 70} gap={0} reverse>
                {/* Same brands but rotated so the two rows show different names at the same time */}
                {(() => {
                  const list = C.clients.list;
                  const half = Math.floor(list.length / 2);
                  return [...list.slice(half), ...list.slice(0, half)];
                })().map((c, i) =>
              <span key={i} className="d3-cli-item">
                    <span className="word">{c}</span>
                    <span className="ast">*</span>
                  </span>
              )}
              </M3>
            </div>
          </div>
        </section>
      }

      {/* Services */}
      {sections.services &&
      <section className="d3-svc">
          <div className="d3-svc-head">
            <div style={{ fontSize: 11, color: 'var(--mute)', letterSpacing: '.18em', textTransform: 'uppercase' }}>
              · {lang === 'es' ? 'Servicio' : 'Service'} ·
            </div>
            <h2 className="display" style={{ marginTop: 14 }}>
              {lang === 'es' ? <>Dos caminos <em>según tu punto de partida.</em></> : <>Two paths <em>depending on where you start.</em></>}
            </h2>
            <p style={{ fontSize: "14px", whiteSpace: "pre-line" }}>{lang === 'es' ?
            'Si todavía no tienes tienda, te la construimos desde cero.\nSi ya vendes online y la tienda no acompaña, la rediseñamos.' :
            "If you don't have a store yet, we build it from scratch.\nIf you already sell but the store doesn't keep up, we redesign it."}</p>
            <div style={{ marginTop: 32, display: 'flex', justifyContent: 'center' }}>
              <div className="d3-tabs">
                {Object.values(C.services).map((s) =>
              <button key={s.key} className={`d3-tab ${svc === s.key ? 'is-on' : ''}`} onClick={() => setSvc(s.key)}>
                    {s.tab_label[lang]}
                  </button>
              )}
              </div>
            </div>
          </div>
          <div className="d3-svc-body">
            <div className="d3-svc-top">
              <h3 className="display"><em>{active.tagline[lang]}</em></h3>
              <p>{active.desc[lang]}</p>
            </div>
            <div className="d3-svc-pillars">
              {active.pillars.map((p) =>
            <div key={p.id} className="d3-svc-p" data-hover>
                  <div className="id">·{p.id}</div>
                  <div>
                    <h4>{p[lang].t}</h4>
                    <p>{p[lang].d}</p>
                  </div>
                </div>
            )}
            </div>
            {active.cta && (
              <div className="d3-svc-cta-wrap">
                <button
                  className="d3-svc-cta"
                  data-hover
                  onClick={() => window.D3Apply && window.D3Apply.openForm(active.key)}>
                  <span className="line1">{active.cta[lang].line1}</span>
                  <span className="line2">{active.cta[lang].line2}</span>
                  <span className="arrow" aria-hidden="true">→</span>
                </button>
              </div>
            )}
          </div>
        </section>
      }

      {/* Results */}
      {sections.results &&
      <section className="d3-res">
          <div className="d3-res-card">
            <div className="d3-res-head">
              <div style={{ fontSize: 11, color: 'var(--mute)', letterSpacing: '.18em', textTransform: 'uppercase' }}>
                · {lang === 'es' ? 'Resultados' : 'Results'} ·
              </div>
              <h2 className="display" style={{ marginTop: 14 }}>
                {lang === 'es' ? <>Resultados <em>que se miden.</em></> : <>Results <em>that get measured.</em></>}
              </h2>
              <p>{C.results.sub[lang]}</p>
            </div>
            <div className="d3-res-grid">
              {C.results.stats.map((s, i) =>
            <div className="d3-res-cell" key={i}>
                  <div className="tag">{String(i + 1).padStart(2, '0')} · 04</div>
                  <div className="num">
                    <C3 value={s.value} prefix={s.prefix || ''} suffix={s.suffix || ''} />
                  </div>
                  <div className="lbl">{s.label[lang]}</div>
                </div>
            )}
            </div>
          </div>
        </section>
      }

      {/* Cases */}
      {sections.cases &&
      <section className="d3-cs">
          <div className="d3-cs-head">
            <div style={{ fontSize: 11, color: 'var(--mute)', letterSpacing: '.18em', textTransform: 'uppercase' }}>
              · {lang === 'es' ? 'Casos' : 'Cases'} ·
            </div>
            <h2 className="display" style={{ marginTop: 14 }}>
              {lang === 'es' ? <>Casos <em>recientes.</em></> : <>Recent <em>cases.</em></>}
            </h2>
            <p>{C.cases.sub[lang]}</p>
          </div>
          <div className="d3-cs-grid">
            {C.cases.items.map((c, i) =>
            <div key={i} className="d3-cs-card" data-hover>
              <div className="d3-cs-card-top">
                <div className="d3-cs-num">·{String(i + 1).padStart(2, '0')}</div>
                <div className="d3-cs-type">{c.type[lang]}</div>
              </div>
              <div className="d3-cs-name">{c.name}</div>
              <div className="d3-cs-cat">{c.category[lang]}</div>
              <p className="d3-cs-note">{c.note[lang]}</p>
              {c.url && (
                <a className="d3-cs-link" href={c.url} target="_blank" rel="noopener noreferrer">
                  {lang === 'es' ? 'Visitar tienda →' : 'Visit store →'}
                </a>
              )}
            </div>
            )}
          </div>
        </section>
      }

      {/* Process */}
      {sections.process &&
      <section className="d3-pr">
          <div className="d3-pr-head">
            <div style={{ fontSize: 11, color: 'var(--mute)', letterSpacing: '.18em', textTransform: 'uppercase' }}>
              · {lang === 'es' ? 'Proceso' : 'Process'} ·
            </div>
            <h2 className="display" style={{ marginTop: 14 }}>
              {lang === 'es' ? <>Cómo <em>trabajamos.</em></> : <>How <em>we work.</em></>}
            </h2>
            <p>{C.process.sub[lang]}</p>
          </div>
          <div className="d3-pr-grid">
            {C.process.steps.map((s, i) =>
            <div key={i} className="d3-pr-step" data-hover>
              <div className="d3-pr-n">{s.n}</div>
              <div className="d3-pr-dur">{s[lang].dur}</div>
              <h4 className="d3-pr-t">{s[lang].t}</h4>
              <p className="d3-pr-d">{s[lang].d}</p>
            </div>
            )}
          </div>
        </section>
      }

      {/* Testimonials */}
      {sections.testimonials &&
      <section className="d3-tst">
          <div className="d3-tst-head">
            <div className="tag">· {lang === 'es' ? 'Testimonios' : 'Testimonials'} ·</div>
            <h2 className="display">
              {lang === 'es' ? <>Lo que dicen <em>nuestros socios.</em></> : <>What our <em>partners say.</em></>}
            </h2>
          </div>
          <div className="d3-tst-grid d3-tst-grid--2">
            {C.testimonials.items.map((t, i) =>
          <div key={i} className="d3-tst-card" data-hover>
                <div>
                  <div className="quote-mark">"</div>
                  <div className="q">{t.quote[lang]}</div>
                </div>
                <div className="a">
                  <div className="av">{t.author[0]}</div>
                  <div>
                    <div className="who">{t.author}</div>
                    <div className="role">{t.role[lang]}</div>
                  </div>
                </div>
              </div>
          )}
          </div>
        </section>
      }

      {/* About */}
      {sections.about &&
      <section className="d3-abt">
          <div className="d3-abt-row">
            <div>
              <div style={{ fontSize: 11, color: 'var(--mute)', letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 14 }}>
                · {lang === 'es' ? 'Nosotros' : 'About'} ·
              </div>
              <h2 className="display">
                {lang === 'es' ? <>Somos <em>LA REAL.</em></> : <>We are <em>LA REAL.</em></>}
              </h2>
            </div>
            <div className="d3-abt-text">
              {C.about.paragraphs[lang].map((p, i) => <p key={i} style={{ fontFamily: "Geist" }}>{p}</p>)}
            </div>
          </div>
          <div className="d3-abt-team">
            {C.about.team.map((m, i) =>
          <div key={i} className="d3-abt-mem">
                <div className="av">
                  {m.photo
                    ? <img src={m.photo} alt={m.name} className="av-photo" loading="lazy" />
                    : <image-slot id={`team-${i}`} shape="rounded" radius="16" placeholder={lang === 'es' ? 'Arrastra una foto' : 'Drop a photo'}></image-slot>
                  }
                </div>
                <div className="n">{m.name}</div>
                <div className="r">{m.role[lang]}</div>
              </div>
          )}
          </div>
        </section>
      }

      {/* Footer */}
      <footer className="d3-ft">
        <div className="d3-ft-grid">
          <div className="d3-ft-logo">
            <window.LR.Logo height={mobile ? 60 : 100} color="var(--fg)" />
          </div>
          <div>
            <div className="d3-ft-mini">{lang === 'es' ? 'Servicio' : 'Service'}</div>
            <div className="d3-ft-list">
              <a>{lang === 'es' ? 'Tienda nueva' : 'New store'}</a>
              <a>{lang === 'es' ? 'Migración / Rediseño' : 'Migration / Redesign'}</a>
              <a>{lang === 'es' ? 'Desarrollo custom' : 'Custom development'}</a>
              <a>{lang === 'es' ? 'Performance & CRO' : 'Performance & CRO'}</a>
            </div>
          </div>
          <div>
            <div className="d3-ft-mini">{lang === 'es' ? 'Compañía' : 'Company'}</div>
            <div className="d3-ft-list">
              {C.nav[lang].map((n) => <a key={n}>{n}</a>)}
            </div>
          </div>
          <div>
            <div className="d3-ft-mini">{lang === 'es' ? 'Síguenos' : 'Follow'}</div>
            <div className="d3-ft-list">
              <a>Instagram</a><a>LinkedIn</a><a>Behance</a><a>hola@lareal.co</a>
            </div>
          </div>
        </div>
        <div className="d3-ft-bot">
          <span>{C.footer[lang].rights}</span>
          <span>{C.footer[lang].tag}</span>
        </div>
      </footer>
    </div>);

}

window.D3 = { Page: D3Page };