:root {
      --ink: #17324d;
      --ink-2: #294760;
      --cream: #fff7ef;
      --paper: #fffdf9;
      --accent: #e7774e;
      --accent-soft: #ffe1d4;
      --line: rgba(23, 50, 77, .12);
      --muted: #687786;
      --green: #56705d;
      --shadow: 0 22px 70px rgba(23, 50, 77, .10);
      --radius: 28px;
    }

    * { 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(--ink);
      background:
        radial-gradient(circle at 8% 0%, rgba(231,119,78,.13), transparent 31rem),
        linear-gradient(180deg, var(--cream) 0%, #fff 42%, #f8fafb 100%);
      line-height: 1.6;
    }

    a { color: inherit; }
    .wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      padding: 6px 0;
      flex: 0 0 auto;
    }
    .brand img {
      width: 118px;
      height: auto;
      display: block;
      object-fit: contain;
    }

    nav { display: flex; align-items: center; gap: 24px; font-size: 14px; }
    nav a { text-decoration: none; color: var(--ink-2); }
    .nav-cta, .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 700;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .nav-cta { padding: 11px 18px; color: white; background: var(--ink); }
    .nav-cta:hover, .btn:hover { transform: translateY(-2px); }

    .hero {
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      gap: 70px;
      align-items: center;
      padding: 72px 0 92px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 12px;
      border: 1px solid rgba(231,119,78,.28);
      background: rgba(255,255,255,.62);
      border-radius: 999px;
      color: #a84f31;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .02em;
    }
    .eyebrow::before { content:""; width: 8px; height: 8px; border-radius:50%; background: var(--accent); }

    h1 {
      margin: 20px 0 22px;
      max-width: 760px;
      font-size: clamp(52px, 7.2vw, 90px);
      line-height: .94;
      letter-spacing: -.065em;
    }
    h1 .soft { color: var(--accent); }
    .lead { max-width: 680px; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--ink-2); }
    .hero-actions { display:flex; flex-wrap:wrap; gap: 12px; margin-top: 30px; }
    .btn { padding: 14px 21px; }
    .btn-primary { color: white; background: var(--ink); box-shadow: 0 10px 26px rgba(23,50,77,.18); }
    .btn-secondary { border: 1px solid var(--line); background: rgba(255,255,255,.76); }
    .micro { margin-top: 16px; color: var(--muted); font-size: 13px; }

    .hero-card {
      background: rgba(255,255,255,.76);
      backdrop-filter: blur(18px);
      border: 1px solid rgba(23,50,77,.11);
      border-radius: 34px;
      box-shadow: var(--shadow);
      padding: 28px;
      position: relative;
      overflow: hidden;
    }
    .hero-card::after {
      content:"";
      position:absolute;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: var(--accent-soft);
      right: -70px;
      top: -55px;
      filter: blur(2px);
      opacity:.75;
    }
    .hero-card > * { position: relative; z-index: 1; }
    .hero-card .label { color: var(--muted); text-transform: uppercase; letter-spacing:.12em; font-size: 12px; font-weight: 800; }
    .hero-card h2 { font-size: 30px; line-height:1.15; letter-spacing:-.035em; margin: 10px 0 24px; max-width: 360px; }
    .step { display:grid; grid-template-columns: 44px 1fr; gap: 14px; align-items:start; padding: 16px 0; border-top:1px solid var(--line); }
    .step:first-of-type { border-top:0; }
    .num { width:44px; height:44px; border-radius:14px; background:var(--cream); display:grid; place-items:center; font-weight:800; }
    .step strong { display:block; margin-bottom:3px; }
    .step span { color:var(--muted); font-size:14px; }


    /* Product showcase carousel */
    .showcase-section {
      padding: 24px 0 96px;
    }

    .showcase-head {
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:28px;
      margin-bottom:32px;
    }

    .showcase-head-copy { max-width:720px; }

    .showcase-head p {
      margin:12px 0 0;
      color:var(--muted);
      font-size:18px;
    }

    .showcase-shell {
      position:relative;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:34px;
      background:rgba(255,255,255,.74);
      box-shadow:var(--shadow);
    }

    .showcase-track {
      display:flex;
      transition:transform .48s cubic-bezier(.22,.61,.36,1);
      will-change:transform;
    }

    .showcase-slide {
      min-width:100%;
      display:grid;
      grid-template-columns:minmax(0, 1.35fr) minmax(300px, .65fr);
      align-items:stretch;
    }

    .showcase-media {
      min-width:0;
      background:#eef3f6;
      aspect-ratio:4 / 3;
      overflow:hidden;
    }

    .showcase-media img {
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
    }

    .showcase-copy {
      padding:48px 44px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-width:0;
    }

    .showcase-type {
      display:inline-block;
      color:var(--accent);
      font-size:12px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.14em;
      margin-bottom:12px;
    }

    .showcase-copy h3 {
      margin:0 0 14px;
      font-size:clamp(34px, 4vw, 52px);
      line-height:1.02;
      letter-spacing:-.045em;
    }

    .showcase-copy p {
      margin:0;
      color:var(--muted);
      font-size:17px;
      line-height:1.65;
    }

    .showcase-controls {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      margin-top:18px;
    }

    .showcase-arrows {
      display:flex;
      gap:10px;
    }

    .showcase-arrow {
      width:46px;
      height:46px;
      border-radius:50%;
      border:1px solid var(--line);
      background:#fff;
      color:var(--ink);
      display:grid;
      place-items:center;
      font:inherit;
      font-size:22px;
      cursor:pointer;
      transition:transform .18s ease, background .18s ease;
    }

    .showcase-arrow:hover {
      transform:translateY(-2px);
      background:var(--cream);
    }

    .showcase-arrow:focus-visible,
    .showcase-dot:focus-visible {
      outline:3px solid rgba(231,119,78,.28);
      outline-offset:3px;
    }

    .showcase-dots {
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:center;
      flex:1;
    }

    .showcase-dot {
      width:10px;
      height:10px;
      padding:0;
      border:0;
      border-radius:50%;
      background:rgba(23,50,77,.18);
      cursor:pointer;
      transition:transform .18s ease, background .18s ease;
    }

    .showcase-dot[aria-current="true"] {
      background:var(--accent);
      transform:scale(1.2);
    }

    .showcase-status {
      min-width:52px;
      text-align:right;
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }



    /* Testimonials */
    .testimonials {
      padding: 6px 0 96px;
    }

    .testimonials-head {
      max-width:760px;
      margin-bottom:34px;
    }

    .testimonials-head p {
      color:var(--muted);
      font-size:18px;
      margin:12px 0 0;
    }

    .sample-note {
      margin-top:12px;
      color:var(--muted);
      font-size:13px;
    }

    .testimonial-grid {
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:18px;
    }

    .testimonial-card {
      min-width:0;
      display:flex;
      flex-direction:column;
      padding:26px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.82);
      box-shadow:0 14px 38px rgba(23,50,77,.06);
    }

    .testimonial-quote {
      margin:0 0 26px;
      color:var(--ink-2);
      font-size:16px;
      line-height:1.65;
      flex:1;
    }

    .testimonial-quote::before {
      content:"“";
      display:block;
      height:34px;
      margin-bottom:4px;
      color:var(--accent);
      font-family:Georgia, serif;
      font-size:48px;
      line-height:.8;
    }

    .testimonial-person {
      display:flex;
      align-items:center;
      gap:14px;
      padding-top:18px;
      border-top:1px solid var(--line);
    }

    .testimonial-person img {
      width:58px;
      height:58px;
      flex:0 0 58px;
      border-radius:50%;
      object-fit:cover;
      border:2px solid #fff;
      box-shadow:0 4px 16px rgba(23,50,77,.12);
    }

    .testimonial-person strong {
      display:block;
      font-size:15px;
      line-height:1.25;
    }

    .testimonial-person span {
      display:block;
      margin-top:4px;
      color:var(--muted);
      font-size:13px;
      line-height:1.35;
    }


    .section { padding: 92px 0; }
    .section-head { max-width: 730px; margin-bottom: 40px; }
    .kicker { color:var(--accent); font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
    h2.section-title { font-size: clamp(38px, 5vw, 62px); line-height:1.02; letter-spacing:-.05em; margin: 10px 0 14px; }
    .section-head p { color:var(--muted); font-size:18px; }

    .pricing { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .plan {
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 34px;
      box-shadow: 0 16px 50px rgba(23,50,77,.07);
      display:flex;
      flex-direction:column;
    }
    .plan.featured {
      background: #17324d;
      color: #ffffff;
      border-color: transparent;
    }
    .plan-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
    .plan h3 { font-size: 30px; line-height:1.05; letter-spacing:-.035em; margin:0; }
    .pill { white-space:nowrap; border-radius:999px; padding:7px 10px; background:var(--accent-soft); color:#9e482d; font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }

    /* Explicit high-contrast treatment for the featured Build & Launch card */
    .featured h3,
    .featured .price,
    .featured .commitment {
      color: #ffffff;
    }
    .featured .pill {
      background: #fff2eb;
      color: #7f351f;
    }
    .price { margin: 26px 0 8px; font-size: 52px; line-height:1; font-weight:800; letter-spacing:-.05em; }
    .price small { font-size:16px; font-weight:600; letter-spacing:0; color:var(--muted); }
    .featured .price small,
    .featured .plan-copy,
    .featured li {
      color: #f4f7fa;
      opacity: 1;
    }
    .plan-copy { color:var(--muted); min-height: 76px; }
    .commitment { margin: 6px 0 22px; font-weight:800; }
    .plan ul { list-style:none; padding:0; margin:0 0 28px; }
    .plan li { color:var(--ink-2); padding:10px 0 10px 30px; position:relative; border-top:1px solid var(--line); }
    .featured li {
      border-top-color: rgba(255,255,255,.28);
    }

    /* Keep featured-card list copy bright.
       This comes after .plan li so it cannot be overridden. */
    .plan.featured li {
      color: #f7fafc;
    }
    .plan li::before { content:"✓"; position:absolute; left:0; font-weight:900; color:var(--green); }
    .featured li::before { color:#ffc3a8; }
    .plan .btn { margin-top:auto; align-self:flex-start; }
    .featured .btn-primary {
      background:#ffffff;
      color:#17324d;
      box-shadow:none;
      border:1px solid rgba(255,255,255,.92);
    }

    .scope {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items:stretch;
    }
    .scope-card { border:1px solid var(--line); border-radius:var(--radius); padding:32px; background:rgba(255,255,255,.74); }
    .scope-card h3 { margin:0 0 12px; font-size:28px; letter-spacing:-.03em; }
    .scope-card p { color:var(--muted); margin:0; }
    .scope-card.alt { background:var(--cream); }

    .details {
      margin-top: 28px;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .detail { padding:22px; border-top:1px solid var(--line); }
    .detail strong { display:block; margin-bottom:6px; }
    .detail span { color:var(--muted); font-size:14px; }

    .cta {
      margin: 30px auto 90px;
      border-radius: 34px;
      background: var(--accent);
      color: #fff;
      padding: 46px;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:40px;
      align-items:center;
      box-shadow: 0 20px 60px rgba(231,119,78,.20);
    }
    .cta h2 { margin:0 0 10px; font-size:clamp(36px,5vw,56px); line-height:1; letter-spacing:-.05em; }
    .cta p { margin:0; color:rgba(255,255,255,.84); font-size:17px; }
    .cta .btn { justify-self:end; background:#fff; color:var(--ink); padding:15px 22px; }

    footer { border-top:1px solid var(--line); padding: 34px 0 42px; }
    .footer-grid { display:flex; justify-content:space-between; gap:24px; color:var(--muted); font-size:13px; }

    @media (max-width: 1040px) {
      nav a:not(.nav-cta) { display:none; }
      .hero, .pricing, .scope, .cta { grid-template-columns:1fr; }
      .showcase-slide { grid-template-columns:1fr; }
      .showcase-media { aspect-ratio:16 / 10; }
      .showcase-copy { padding:34px; }
      .showcase-head { align-items:start; flex-direction:column; }
      .testimonial-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .hero { gap:34px; padding-top:44px; }
      .details { grid-template-columns:1fr; }
      .cta .btn { justify-self:start; }
      .plan-copy { min-height:0; }
    }


    html[lang="de"] .showcase-copy h3 {
      font-size: clamp(30px, 3.25vw, 46px);
      line-height: 1.04;
      hyphens: auto;
    }

    html[lang="de"] .showcase-copy p {
      hyphens: auto;
    }

    @media (max-width: 540px) {
      .wrap { width:min(100% - 24px, 1160px); }
      header { padding:12px 0; }
      .brand img { width:96px; height:auto; }
      .brand-copy span { display:none; }
      .nav-cta { padding:10px 14px; }
      .hero { padding-bottom:70px; }
      .hero-card, .plan, .scope-card, .cta { padding:24px; border-radius:24px; }
      .showcase-section { padding:10px 0 70px; }
      .showcase-shell { border-radius:24px; }
      .showcase-copy { padding:26px 24px 30px; }
      .showcase-media { aspect-ratio:4 / 3; }
      .showcase-copy h3 { font-size:38px; }
      html[lang="de"] .showcase-copy h3 { font-size:30px; line-height:1.06; }
      .showcase-controls { gap:12px; }
      .showcase-status { display:none; }
      .testimonials { padding-bottom:70px; }
      .testimonial-grid { grid-template-columns:1fr; }
      .testimonial-card { padding:22px; }
      h1 { font-size: clamp(49px, 16vw, 72px); }
      .section { padding:70px 0; }
      .footer-grid { flex-direction:column; }
    }
  

    /* Language switcher */
    .lang-switcher {
      display:flex;
      align-items:center;
      gap:2px;
      padding:4px;
      border:1px solid var(--line);
      border-radius:999px;
      background:rgba(255,255,255,.72);
      white-space:nowrap;
    }
    .lang-switcher a {
      min-width:34px;
      padding:6px 9px;
      border-radius:999px;
      text-align:center;
      font-size:12px;
      font-weight:800;
      line-height:1;
      color:var(--muted);
      text-decoration:none;
    }
    .lang-switcher a[aria-current="page"] {
      background:var(--ink);
      color:#fff;
    }

    html[lang="zh-CN"] h1,
    html[lang="zh-CN"] h2,
    html[lang="zh-CN"] h3 {
      letter-spacing:-.025em;
    }

    @media (max-width: 1040px) {
      nav { gap:10px; }
      nav .lang-switcher a { display:inline-flex !important; align-items:center; justify-content:center; }
    }

    @media (max-width: 540px) {
      nav .nav-cta { display:none; }
      nav { gap:6px; }
      .lang-switcher a { min-width:31px; padding:6px 7px; }
    }


    /* Phase 1: real shipped-product showcase */
    .showcase-media.product-single {
      display:flex;
      align-items:center;
      justify-content:center;
      padding:22px;
      background:#eef2f4;
    }

    .showcase-media.product-single img {
      width:100%;
      height:100%;
      object-fit:contain;
    }

    .showcase-media.product-web {
      background:#191512;
    }

    .showcase-media.product-quanto {
      background:#eef0f7;
    }

    .showcase-media.product-pair {
      display:grid;
      grid-template-columns:minmax(0, 1.45fr) minmax(150px, .55fr);
      gap:16px;
      align-items:center;
      padding:18px;
      background:#181415;
    }

    .showcase-media.product-pair img {
      width:100%;
      height:100%;
      max-height:100%;
      object-fit:contain;
      min-width:0;
    }

    .showcase-meta {
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:9px;
      margin-bottom:12px;
    }

    .showcase-meta .showcase-type {
      margin-bottom:0;
    }

    .product-status {
      display:inline-flex;
      align-items:center;
      min-height:25px;
      padding:4px 9px;
      border-radius:999px;
      background:var(--accent-soft);
      color:#9e482d;
      font-size:11px;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .product-links {
      display:flex;
      flex-wrap:wrap;
      gap:9px;
      margin-top:22px;
    }

    .product-link {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:8px 13px;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
      color:var(--ink);
      font-size:13px;
      font-weight:800;
      text-decoration:none;
      transition:transform .18s ease, background .18s ease, border-color .18s ease;
    }

    .product-link:hover {
      transform:translateY(-1px);
      background:var(--cream);
      border-color:rgba(23,50,77,.22);
    }

    @media (max-width: 1040px) {
      .showcase-media.product-pair {
        min-height:520px;
        grid-template-columns:minmax(0, 1.35fr) minmax(160px, .65fr);
      }
    }

    @media (max-width: 540px) {
      .showcase-media.product-single {
        padding:12px;
      }

      .showcase-media.product-pair {
        min-height:0;
        grid-template-columns:1.15fr .72fr;
        gap:8px;
        padding:10px;
      }

      .product-links {
        margin-top:18px;
      }
    }


    /* Phase 2: selected projects showcase */
    .showcase-slide.project-slide {
      grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
      background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.88));
    }

    .showcase-media.project-media {
      position: relative;
      aspect-ratio: auto;
      min-height: 560px;
      overflow: hidden;
      isolation: isolate;
    }

    .showcase-media.project-media::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 16% 14%, rgba(244, 216, 193, .65), transparent 26%),
                  radial-gradient(circle at 78% 78%, rgba(66, 121, 171, .12), transparent 24%);
      pointer-events: none;
      z-index: 0;
    }

    .selected-gamantra {
      background: linear-gradient(135deg, #f8f3eb 0%, #f3eadf 52%, #fbf7f2 100%);
    }

    .selected-quanto {
      background: linear-gradient(135deg, #eef2ff 0%, #f8eefd 32%, #e6f5f0 65%, #fff4df 100%);
    }

    .showcase-stage {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 34px;
      z-index: 1;
    }

    .gamantra-browser {
      position: absolute;
      left: 34px;
      top: 34px;
      width: 62%;
      max-width: 640px;
      border-radius: 24px;
      overflow: hidden;
      background: #11161d;
      box-shadow: 0 28px 70px rgba(16, 24, 40, .22);
      border: 1px solid rgba(16, 24, 40, .08);
    }

    .browser-top {
      height: 36px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 14px;
      background: #eef2f6;
      border-bottom: 1px solid rgba(16,24,40,.08);
    }

    .browser-top span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #d6dde7;
      display: inline-block;
    }

    .browser-top span:nth-child(1) { background: #ef8274; }
    .browser-top span:nth-child(2) { background: #f3bb52; }
    .browser-top span:nth-child(3) { background: #7ecb87; }

    .browser-screen {
      display:block;
      width:100%;
      aspect-ratio: 1088 / 960;
      object-fit: cover;
    }

    .device-frame {
      position: absolute;
      background: #11161d;
      border-radius: 28px;
      box-shadow: 0 28px 65px rgba(17, 22, 29, .24);
      padding: 10px;
      border: 1px solid rgba(255,255,255,.14);
    }

    .device-frame::after {
      content: "";
      position: absolute;
      inset: 7px;
      border-radius: inherit;
      border: 1px solid rgba(255,255,255,.05);
      pointer-events: none;
    }

    .device-screen {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      overflow: hidden;
      background: #fff;
    }

    .device-screen img {
      width: 100%;
      height: 100%;
      display:block;
      object-fit: cover;
    }

    .tablet-portrait {
      right: 42px;
      top: 58px;
      width: 28%;
      min-width: 190px;
      transform: rotate(4deg);
    }

    .tablet-portrait .device-screen {
      aspect-ratio: 1535 / 2048;
    }

    .phone-portrait {
      right: 182px;
      bottom: 36px;
      width: 18%;
      min-width: 128px;
      transform: rotate(-5deg);
      border-radius: 34px;
      padding: 10px 10px 12px;
    }

    .phone-portrait .device-screen,
    .quanto-phone .device-screen {
      aspect-ratio: 946 / 2048;
      border-radius: 26px;
    }

    .android-landscape {
      left: 72px;
      bottom: 38px;
      width: 44%;
      min-width: 280px;
      border-radius: 26px;
      padding: 10px;
      transform: rotate(-2deg);
    }

    .android-landscape .device-screen {
      aspect-ratio: 2048 / 1280;
      border-radius: 16px;
    }

    .platform-pill {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.88);
      box-shadow: 0 18px 38px rgba(17,22,29,.08);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink);
      z-index: 3;
    }

    .pill-web { left: 54px; top: 52px; }
    .pill-ios { right: 60px; top: 26px; }
    .pill-android { left: 96px; bottom: 18px; }

    .showcase-media.selected-quanto::before {
      background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.8), transparent 18%),
        radial-gradient(circle at 76% 24%, rgba(180, 215, 255, .45), transparent 18%),
        radial-gradient(circle at 72% 80%, rgba(255, 215, 180, .45), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0));
    }

    .quanto-stage {
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .quanto-phone {
      position: relative;
      width: min(56%, 320px);
      min-width: 220px;
      margin: 0 auto;
      border-radius: 40px;
      background: rgba(255,255,255,.5);
      backdrop-filter: blur(12px);
      padding: 10px;
      box-shadow: 0 30px 80px rgba(71, 84, 103, .16);
      border: 1px solid rgba(255,255,255,.58);
    }

    .quanto-phone::before,
    .quanto-phone::after {
      content: "";
      position: absolute;
      border-radius: 34px;
      background: rgba(255,255,255,.22);
      border: 1px solid rgba(255,255,255,.36);
      z-index: -1;
      backdrop-filter: blur(8px);
    }

    .quanto-phone::before {
      width: 88%;
      height: 38%;
      left: -20%;
      top: 18%;
      transform: rotate(-10deg);
    }

    .quanto-phone::after {
      width: 82%;
      height: 34%;
      right: -18%;
      bottom: 12%;
      transform: rotate(9deg);
    }

    .showcase-meta {
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:9px;
      margin-bottom:12px;
    }

    .showcase-meta .showcase-type { margin-bottom: 0; }

    .product-status {
      display:inline-flex;
      align-items:center;
      min-height:25px;
      padding:4px 9px;
      border-radius:999px;
      background:var(--accent-soft);
      color:#9e482d;
      font-size:11px;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .product-links {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:22px;
    }

    .product-link {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      padding:8px 14px;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
      color:var(--ink);
      font-size:13px;
      font-weight:800;
      text-decoration:none;
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
      box-shadow: 0 10px 24px rgba(23,50,77,.06);
    }

    .product-link:hover {
      transform: translateY(-1px);
      background: var(--cream);
      box-shadow: 0 14px 28px rgba(23,50,77,.1);
    }

    @media (max-width: 1180px) {
      .showcase-slide.project-slide {
        grid-template-columns: 1fr;
      }

      .showcase-copy {
        padding-top: 34px;
      }
    }

    @media (max-width: 760px) {
      .showcase-media.project-media {
        min-height: 700px;
      }

      .showcase-stage {
        padding: 18px;
      }

      .gamantra-browser {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: none;
        margin-bottom: 14px;
      }

      .tablet-portrait,
      .phone-portrait,
      .android-landscape,
      .platform-pill {
        position: relative;
        inset: auto;
        transform: none;
      }

      .gamantra-stage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "browser browser"
          "tablet phone"
          "android android";
        gap: 12px;
        align-content: start;
      }

      .gamantra-browser { grid-area: browser; }
      .tablet-portrait { grid-area: tablet; width: 100%; min-width: 0; }
      .phone-portrait { grid-area: phone; width: 100%; min-width: 0; align-self: end; }
      .android-landscape { grid-area: android; width: 100%; min-width: 0; }
      .pill-web, .pill-ios, .pill-android { display:none; }

      .quanto-phone {
        width: min(82%, 340px);
        min-width: 0;
      }
    }


    /* Phase 3: presentation polish */
    #showcase .showcase-head {
      margin-bottom: 38px;
    }

    #showcase .showcase-head-copy {
      max-width: 760px;
    }

    #showcase .showcase-head p {
      max-width: 680px;
      line-height: 1.58;
    }

    #showcase .showcase-shell {
      border-radius: 38px;
      border-color: rgba(23,50,77,.10);
      box-shadow: 0 28px 80px rgba(23,50,77,.11);
      background: rgba(255,255,255,.86);
    }

    #showcase .project-slide {
      grid-template-columns: minmax(0, 1.34fr) minmax(330px, .66fr);
    }

    #showcase .showcase-copy {
      position: relative;
      padding: 56px 48px 52px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.93), rgba(255,250,245,.90));
      border-left: 1px solid rgba(23,50,77,.07);
    }

    #showcase .showcase-copy::before {
      content: "";
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: var(--accent);
      margin-bottom: 22px;
      opacity: .82;
    }

    #showcase .showcase-meta {
      margin-bottom: 14px;
    }

    #showcase .showcase-type {
      letter-spacing: .13em;
    }

    #showcase .showcase-copy h3 {
      font-size: clamp(42px, 4.2vw, 60px);
      margin-bottom: 16px;
      max-width: 11ch;
    }

    #showcase .showcase-copy p {
      font-size: 16.5px;
      line-height: 1.68;
      max-width: 34rem;
    }

    #showcase .project-media {
      min-height: 600px;
    }

    #showcase .selected-gamantra {
      background:
        radial-gradient(circle at 20% 18%, rgba(255,255,255,.96), transparent 30%),
        linear-gradient(135deg, #f7f0e6 0%, #efe3d3 46%, #f9f5ef 100%);
    }

    #showcase .selected-gamantra::after {
      content: "";
      position: absolute;
      inset: auto 8% 7% 10%;
      height: 18%;
      background: radial-gradient(ellipse at center, rgba(36,39,43,.18), transparent 68%);
      filter: blur(18px);
      z-index: 0;
      pointer-events:none;
    }

    #showcase .gamantra-browser {
      left: 38px;
      top: 42px;
      width: 64%;
      border-radius: 22px;
      box-shadow: 0 26px 64px rgba(17,22,29,.18);
      transform: rotate(-1.1deg);
      transition: transform .35s ease, box-shadow .35s ease;
    }

    #showcase .gamantra-browser:hover {
      transform: rotate(-.3deg) translateY(-3px);
      box-shadow: 0 32px 74px rgba(17,22,29,.23);
    }

    #showcase .browser-top {
      height: 32px;
      gap: 6px;
      padding: 0 12px;
    }

    #showcase .browser-top span {
      width: 8px;
      height: 8px;
    }

    #showcase .tablet-portrait {
      right: 34px;
      top: 48px;
      width: 27%;
      min-width: 184px;
      transform: rotate(3.4deg);
      z-index: 3;
    }

    #showcase .phone-portrait {
      right: 190px;
      bottom: 31px;
      width: 17%;
      min-width: 124px;
      transform: rotate(-4deg);
      z-index: 4;
    }

    #showcase .android-landscape {
      left: 76px;
      bottom: 34px;
      width: 46%;
      min-width: 300px;
      transform: rotate(-1.2deg);
      z-index: 2;
    }

    #showcase .device-frame {
      box-shadow: 0 24px 58px rgba(17,22,29,.20);
      transition: transform .35s ease, box-shadow .35s ease;
    }

    #showcase .tablet-portrait:hover {
      transform: rotate(2.4deg) translateY(-4px);
      box-shadow: 0 30px 70px rgba(17,22,29,.24);
    }

    #showcase .phone-portrait:hover {
      transform: rotate(-3deg) translateY(-4px);
      box-shadow: 0 30px 70px rgba(17,22,29,.24);
    }

    #showcase .android-landscape:hover {
      transform: rotate(-.4deg) translateY(-4px);
      box-shadow: 0 30px 70px rgba(17,22,29,.24);
    }

    #showcase .platform-pill {
      padding: 8px 11px;
      font-size: 10px;
      letter-spacing: .10em;
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(23,50,77,.08);
      backdrop-filter: blur(10px);
    }

    #showcase .pill-web { left: 54px; top: 28px; }
    #showcase .pill-ios { right: 50px; top: 25px; }
    #showcase .pill-android { left: 96px; bottom: 18px; }

    #showcase .selected-quanto {
      background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.92), transparent 25%),
        radial-gradient(circle at 78% 18%, rgba(192,217,255,.60), transparent 24%),
        radial-gradient(circle at 70% 80%, rgba(255,217,191,.62), transparent 29%),
        linear-gradient(145deg, #e9efff 0%, #f5e8fb 40%, #e7f6ef 72%, #fff4de 100%);
    }

    #showcase .quanto-phone {
      width: min(60%, 340px);
      border-radius: 44px;
      padding: 11px;
      box-shadow: 0 34px 88px rgba(71,84,103,.22);
      transform: rotate(-1deg);
      transition: transform .4s ease, box-shadow .4s ease;
    }

    #showcase .quanto-phone:hover {
      transform: rotate(0deg) translateY(-5px) scale(1.015);
      box-shadow: 0 42px 96px rgba(71,84,103,.26);
    }

    #showcase .quanto-phone::before {
      left: -25%;
      top: 16%;
      transform: rotate(-12deg);
    }

    #showcase .quanto-phone::after {
      right: -22%;
      bottom: 10%;
      transform: rotate(11deg);
    }

    #showcase .product-links {
      gap: 9px;
      margin-top: 28px;
    }

    #showcase .product-link {
      min-height: 42px;
      padding: 9px 14px;
      background: rgba(255,255,255,.96);
      border-color: rgba(23,50,77,.11);
      box-shadow: none;
    }

    #showcase .product-link:first-child {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
    }

    #showcase .product-link:first-child:hover {
      background: #244867;
    }

    #showcase .product-link:hover {
      box-shadow: 0 10px 24px rgba(23,50,77,.10);
    }

    #showcase .showcase-controls {
      margin-top: 16px;
      padding: 2px 4px;
    }

    #showcase .showcase-arrow {
      width: 44px;
      height: 44px;
      box-shadow: 0 8px 20px rgba(23,50,77,.06);
    }

    #showcase .showcase-dot {
      width: 26px;
      height: 6px;
      border-radius: 999px;
      background: rgba(23,50,77,.14);
    }

    #showcase .showcase-dot[aria-current="true"] {
      transform: none;
      background: var(--accent);
    }

    @media (max-width: 1180px) {
      #showcase .project-slide {
        grid-template-columns: 1fr;
      }

      #showcase .showcase-copy {
        border-left: 0;
        border-top: 1px solid rgba(23,50,77,.07);
        padding: 40px 42px 44px;
      }

      #showcase .showcase-copy h3 {
        max-width: none;
      }
    }

    @media (max-width: 760px) {
      #showcase .showcase-shell { border-radius: 28px; }
      #showcase .project-media { min-height: 0; }
      #showcase .showcase-stage { padding: 14px; }
      #showcase .gamantra-stage { gap: 10px; }
      #showcase .gamantra-browser,
      #showcase .tablet-portrait,
      #showcase .phone-portrait,
      #showcase .android-landscape {
        transform: none;
      }
      #showcase .gamantra-browser:hover,
      #showcase .tablet-portrait:hover,
      #showcase .phone-portrait:hover,
      #showcase .android-landscape:hover {
        transform: translateY(-2px);
      }
      #showcase .showcase-copy { padding: 34px 26px 36px; }
      #showcase .showcase-copy h3 { font-size: 38px; }
      #showcase .showcase-copy p { font-size: 16px; }
      #showcase .quanto-stage { min-height: 580px; }
      #showcase .quanto-phone { width: min(78%, 320px); }
    }

    @media (max-width: 520px) {
      #showcase .gamantra-stage {
        grid-template-columns: 1fr 1fr;
      }
      #showcase .android-landscape { grid-column: 1 / -1; }
      #showcase .product-links { gap: 8px; }
      #showcase .product-link { flex: 1 1 auto; }
      #showcase .showcase-status { min-width: 44px; }
    }

    @media (prefers-reduced-motion: reduce) {
      #showcase .gamantra-browser,
      #showcase .device-frame,
      #showcase .quanto-phone,
      #showcase .product-link,
      #showcase .showcase-arrow {
        transition: none !important;
      }
    }

    /* Blog reading surfaces */
    .blog-index { padding: 72px 0 96px; }
    .blog-list { display:grid; gap:18px; max-width:820px; }
    .blog-card { padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.76); box-shadow:var(--shadow); }
    .blog-card h2 { margin:8px 0 8px; font-size:clamp(26px, 4vw, 38px); line-height:1.08; letter-spacing:-.04em; }
    .blog-card h2 a { text-decoration:none; }
    .blog-card p, .blog-empty { color:var(--muted); }
    .blog-post { padding:72px 0 110px; }
    .reading-column { max-width:760px; }
    .reading-column h1 { max-width:none; font-size:clamp(44px, 7vw, 76px); }
    .reading-lede { max-width:680px; color:var(--ink-2); font-size:22px; line-height:1.55; }
    .blog-hero { margin:0 0 42px; }
    .blog-hero img { width:100%; max-height:460px; display:block; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
    .blog-hero figcaption { margin-top:9px; color:var(--muted); font-size:12px; }
    .blog-hero figcaption a { color:inherit; text-underline-offset:3px; }
    .article-body { max-width:680px; color:var(--ink-2); font-size:18px; line-height:1.7; }
    .article-body h2 { margin:42px 0 10px; color:var(--ink); font-size:32px; line-height:1.15; }
    .article-body h3 { margin:30px 0 8px; color:var(--ink); font-size:24px; line-height:1.2; }
    .article-body p { margin:0 0 20px; }
    .article-body ul, .article-body ol { padding-left:1.4em; }
    .article-body li { margin:6px 0; }
    .article-body blockquote { margin:26px 0; padding:8px 0 8px 22px; border-left:3px solid var(--accent); color:var(--ink); font-size:21px; }
    .article-body a { color:var(--ink); text-underline-offset:3px; }

    .blog-featured { padding: 10px 0 96px; }
    .blog-featured-head { max-width: 790px; margin-bottom: 34px; }
    .blog-featured-head p { max-width: 700px; margin: 12px 0 0; color:var(--muted); font-size:18px; line-height:1.7; }
    .blog-featured-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
    .blog-featured-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.82); box-shadow:0 14px 38px rgba(23,50,77,.055); transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
    .blog-featured-card:hover { transform:translateY(-5px); border-color:rgba(23,50,77,.16); box-shadow:0 22px 50px rgba(23,50,77,.09); }
    .blog-featured-card:focus-within { border-color:rgba(231,119,78,.5); box-shadow:0 22px 50px rgba(23,50,77,.09); }
    .blog-featured-link { display:flex; height:100%; flex-direction:column; color:inherit; text-decoration:none; }
    .blog-featured-link img { width:100%; aspect-ratio:16 / 10; display:block; object-fit:cover; }
    .blog-featured-copy { display:flex; flex:1; flex-direction:column; padding:22px; }
    .blog-featured-copy h3 { margin:0 0 10px; color:var(--ink); font-size:23px; line-height:1.14; letter-spacing:-.03em; }
    .blog-featured-copy p { margin:0; color:var(--muted); font-size:15px; line-height:1.6; }
    .blog-read { display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:22px; color:var(--accent); font-size:14px; font-weight:800; }
    .blog-read span { transition:transform .18s ease; }
    .blog-featured-card:hover .blog-read span, .blog-featured-card:focus-within .blog-read span { transform:translateX(3px); }
    .blog-featured-note { margin:18px 0 0; color:var(--muted); font-size:13px; }
    .blog-explore { display:inline-flex; margin-top:24px; color:var(--ink); font-weight:800; text-underline-offset:4px; }

    @media (max-width: 1040px) {
      .blog-featured-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 620px) {
      .blog-featured { padding-bottom:70px; }
      .blog-featured-grid { grid-template-columns:1fr; }
      .blog-featured-copy { padding:22px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .blog-featured-card, .blog-read span { transition:none !important; }
      .blog-featured-card:hover { transform:none; }
    }

    footer { padding: 24px 0 42px; color: var(--muted); font-size: 13px; }
    .footer-grid { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
    .footer-link { color:inherit; text-underline-offset:3px; }
    .privacy-page { padding:72px 0 110px; }
    .privacy-content { max-width:760px; }
    .privacy-content h1 { max-width:760px; margin-bottom:22px; }
    .privacy-intro { color:var(--ink-2); font-size:22px; line-height:1.55; }
    .privacy-content h2 { margin:38px 0 8px; font-size:26px; line-height:1.2; }
    .privacy-content p { max-width:700px; color:var(--ink-2); font-size:17px; line-height:1.7; }
    .privacy-content code { padding:2px 5px; border-radius:6px; background:rgba(23,50,77,.06); font-size:.9em; }

    @media (max-width: 620px) {
      .footer-grid { align-items:flex-start; flex-direction:column; gap:8px; }
      .privacy-page { padding-top:52px; }
      .privacy-intro { font-size:19px; }
    }


    /* Phase 4: factual trust / working approach */
    .approach {
      padding: 10px 0 96px;
    }

    .approach-head {
      max-width: 790px;
      margin-bottom: 34px;
    }

    .approach-head p {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.7;
    }

    .approach-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }

    .approach-card {
      position: relative;
      min-width: 0;
      min-height: 240px;
      padding: 26px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,.82);
      box-shadow: 0 14px 38px rgba(23,50,77,.055);
      transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
    }

    .approach-card::after {
      content: "";
      position: absolute;
      right: -34px;
      bottom: -42px;
      width: 126px;
      height: 126px;
      border-radius: 50%;
      background: var(--accent-soft);
      opacity: .44;
      transition: transform .28s ease, opacity .28s ease;
      pointer-events: none;
    }

    .approach-card:hover {
      transform: translateY(-5px);
      border-color: rgba(23,50,77,.16);
      box-shadow: 0 22px 50px rgba(23,50,77,.09);
    }

    .approach-card:hover::after {
      transform: scale(1.12) translate(-4px, -4px);
      opacity: .65;
    }

    .approach-number {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      margin-bottom: 34px;
      border-radius: 14px;
      background: var(--cream);
      color: var(--accent);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .approach-card h3 {
      position: relative;
      z-index: 1;
      margin: 0 0 10px;
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: -.025em;
    }

    .approach-card p {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.65;
    }

    @media (max-width: 1040px) {
      .approach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .approach-card { min-height: 220px; }
    }

    @media (max-width: 620px) {
      .approach { padding-bottom: 70px; }
      .approach-grid { grid-template-columns: 1fr; }
      .approach-card { min-height: 0; padding: 22px; }
      .approach-number { margin-bottom: 24px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .approach-card,
      .approach-card::after { transition: none !important; }
      .approach-card:hover { transform: none; }
    }