/* TFA Estate AI: light "Dubai daylight" design system */
@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
  ul[class], ol[class] { padding: 0; list-style: none; }
  img, svg, canvas { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden]:not(.area-card) { display: none !important; }
}

@layer base {
  :root {
    color-scheme: light;
    /* tier 1 */
    --sand-50: #fbf8f3; --sand-100: #f4ede2; --sand-200: #eadfce; --white: #fff;
    --ink-900: #0e1a2b; --ink-600: #44536a; --ink-400: #7a879a;
    --teal-700: #08656d; --teal-600: #0b7a83; --teal-400: #14a6b1; --teal-50: #e3f4f5;
    --sky-200: #cfe9f5; --sky-100: #e8f5fb;
    --coral-500: #ff6b4a; --coral-600: #e9542f; --coral-50: #fff0eb;
    --sun-300: #f6c177;
    /* tier 2 */
    --bg: var(--sand-50); --surface: var(--white); --surface-2: var(--sand-100);
    --text: var(--ink-900); --muted: var(--ink-600); --faint: var(--ink-400);
    --accent: var(--teal-600); --accent-strong: var(--teal-700); --accent-soft: var(--teal-50);
    --cta: var(--coral-500); --cta-strong: var(--coral-600); --cta-soft: var(--coral-50);
    --line: rgb(14 26 43 / .1); --line-strong: rgb(14 26 43 / .18);
    --glass: rgb(255 255 255 / .7); --glass-line: rgb(255 255 255 / .85);
    --shadow-sm: 0 1px 2px rgb(14 26 43 / .06), 0 2px 8px rgb(14 26 43 / .05);
    --shadow-md: 0 2px 6px rgb(14 26 43 / .05), 0 12px 32px rgb(14 26 43 / .09);
    --shadow-lg: 0 4px 12px rgb(14 26 43 / .06), 0 30px 70px rgb(14 26 43 / .14);
    --radius-sm: .6rem; --radius: 1.1rem; --radius-lg: 1.75rem; --pill: 999px;
    --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-ar: "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif;
    --wrap: 76rem; --gutter: clamp(1rem, .5rem + 2.5vw, 2rem);
    --ease: cubic-bezier(.2, .7, .2, 1);
  }
  :root:lang(ar) { --font: var(--font-ar); }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { font-family: var(--font); font-size: 1rem; line-height: 1.6; color: var(--text); background: var(--bg); overflow-x: clip; -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; font-weight: 800; }
  :lang(ar) :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.3; }
  p { text-wrap: pretty; }
  a { color: var(--accent-strong); text-underline-offset: .2em; }
  :focus-visible { outline: 3px solid var(--teal-400); outline-offset: 3px; border-radius: .3rem; }
  ::selection { background: var(--sky-200); }
}

@layer components {
  .wrap { inline-size: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
  .skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--ink-900); color: var(--white); border-radius: var(--radius-sm); }
  .skip:focus { inset-block-start: 1rem; }

  /* header */
  .top { position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 50; transition: background .3s, box-shadow .3s; }
  .top.scrolled { background: rgb(251 248 243 / .86); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--line); }
  .top .wrap { display: flex; align-items: center; gap: 1.25rem; min-block-size: 4.5rem; }
  .brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); font-weight: 800; letter-spacing: -.01em; }
  .brand img { inline-size: 2rem; block-size: 2rem; filter: drop-shadow(0 2px 4px rgb(14 26 43 / .15)); }
  .brand small { display: block; font-size: .7rem; font-weight: 600; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
  :lang(ar) .brand small { letter-spacing: 0; }
  .nav { display: flex; gap: .25rem; margin-inline-start: auto; }
  .nav a { padding: .5rem .8rem; border-radius: var(--pill); color: var(--ink-600); text-decoration: none; font-weight: 600; font-size: .92rem; }
  .nav a:hover { color: var(--text); background: rgb(14 26 43 / .05); }
  .lang { padding: .45rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--pill); text-decoration: none; color: var(--text); font-weight: 700; font-size: .9rem; background: var(--glass); }
  .menu-btn { display: none; margin-inline-start: auto; min-inline-size: 2.75rem; min-block-size: 2.75rem; border: 1px solid var(--line-strong); border-radius: var(--pill); background: var(--glass); }
  @media (max-width: 60rem) {
    .nav { display: none; position: absolute; inset-inline: var(--gutter); inset-block-start: 4.5rem; flex-direction: column; padding: .75rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
    .nav.open { display: flex; }
    .menu-btn { display: grid; place-items: center; }
    .top .lang { margin-inline-start: 0; }
  }

  /* buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 3rem; padding: .75rem 1.35rem; border-radius: var(--pill); border: 1px solid transparent; font-weight: 700; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
  .btn:hover { transform: translateY(-2px); }
  .btn.primary { background: var(--cta); color: var(--white); box-shadow: 0 10px 24px rgb(255 107 74 / .32); }
  .btn.primary:hover { background: var(--cta-strong); }
  .btn.ghost { background: var(--glass); border-color: var(--line-strong); color: var(--text); backdrop-filter: blur(10px); }
  .btn.teal { background: var(--accent); color: var(--white); }
  .btn svg { inline-size: 1.1em; block-size: 1.1em; }
  :dir(rtl) .flip { transform: scaleX(-1); }

  /* hero with 3D city */
  .hero { position: relative; min-block-size: 100dvh; display: grid; align-items: end; isolation: isolate; overflow: clip; background: linear-gradient(180deg, #9fd3ec 0%, #d6eef7 45%, #f7ead6 78%, var(--bg) 100%); }
  .hero canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: -2; touch-action: pan-y; cursor: grab; }
  .hero canvas:active { cursor: grabbing; }
  .hero::after { content: ""; position: absolute; inset: auto 0 0; block-size: 45%; z-index: -1; pointer-events: none; background: linear-gradient(to top, var(--bg) 8%, rgb(251 248 243 / 0)); }
  .hero-fallback { position: absolute; inset: auto 0 18% 0; z-index: -2; color: rgb(14 26 43 / .12); }
  .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: end; padding-block: 7rem 2.5rem; }
  @media (max-width: 60rem) { .hero-grid { grid-template-columns: 1fr; padding-block-start: 6rem; } }
  .kicker { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: var(--pill); background: var(--glass); border: 1px solid var(--glass-line); font-size: .82rem; font-weight: 700; color: var(--accent-strong); backdrop-filter: blur(8px); }
  .kicker i { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--teal-400); box-shadow: 0 0 0 4px rgb(20 166 177 / .2); animation: pulse 2s infinite; --animation-reduced: none; }
  @keyframes pulse { 50% { box-shadow: 0 0 0 8px rgb(20 166 177 / 0); } }
  .hero h1 { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 4.6rem); margin-block: 1rem .9rem; }
  .hero h1 em { font-style: normal; background: linear-gradient(90deg in oklch, var(--teal-600), var(--coral-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hero .lede { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); color: var(--ink-600); max-inline-size: 36rem; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.5rem; }
  .hero-grid > *, .hero .wrap { min-inline-size: 0; }
  @media (max-width: 40rem) { .brand small { display: none; } .hero-copy { margin-inline-start: 0; padding: .5rem 0; } }
  .hero-copy { transition: opacity .4s, translate .4s var(--ease); }
  .hero.touring .hero-copy { opacity: 0; translate: 0 1rem; pointer-events: none; }
  .hero-copy { padding: 1.5rem; margin-inline-start: -1.5rem; border-radius: var(--radius-lg); background: radial-gradient(ellipse at 30% 50%, rgb(251 248 243 / .78), rgb(251 248 243 / 0) 72%); }

  /* district strip + info card */
  .districts { display: flex; gap: .5rem; overflow-x: auto; padding-block: .5rem 1.5rem; scrollbar-width: none; }
  .districts button { flex: none; min-block-size: 2.6rem; padding: .5rem 1rem; border-radius: var(--pill); border: 1px solid var(--glass-line); background: var(--glass); backdrop-filter: blur(10px); font-weight: 700; font-size: .9rem; color: var(--ink-900); box-shadow: var(--shadow-sm); }
  .districts button[aria-pressed="true"] { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }
  .districts .tour { background: var(--accent); color: var(--white); border-color: var(--accent); }
  .pins { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .pin { position: absolute; inset-inline-start: 0; inset-block-start: 0; translate: -50% -100%; pointer-events: auto; display: flex; align-items: center; gap: .35rem; padding: .3rem .65rem .3rem .35rem; border-radius: var(--pill); background: var(--white); box-shadow: var(--shadow-md); font-size: .78rem; font-weight: 800; color: var(--ink-900); border: 0; white-space: nowrap; transition: opacity .3s, scale .3s var(--ease); }
  :dir(rtl) .pin { padding: .3rem .35rem .3rem .65rem; }
  .pin::before { content: ""; inline-size: 1.1rem; block-size: 1.1rem; border-radius: 50%; background: radial-gradient(circle, var(--coral-500) 35%, var(--coral-50) 40%); }
  .pin.on { background: var(--ink-900); color: var(--white); scale: 1.08; }
  .pin[hidden] { display: none; }
  .hero:not(.touring) .pins { opacity: 0; } .pins { transition: opacity .5s; }
  .hero:not(.touring) .pin { pointer-events: none; }
  .area-card { position: absolute; z-index: 5; inset-inline-start: max(var(--gutter), (100% - var(--wrap)) / 2); inset-block-start: 7.5rem; inline-size: min(24rem, calc(100% - 2 * var(--gutter))); padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--shadow-lg); transition: opacity .35s, translate .35s var(--ease); }
  .area-card[hidden] { display: block; opacity: 0; translate: 0 -.5rem; pointer-events: none; }
  .area-card h3 { font-size: 1.5rem; }
  .area-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-block: .8rem; }
  .area-card dt { font-size: .72rem; color: var(--muted); font-weight: 600; }
  .area-card dd { font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
  .area-card .src { font-size: .7rem; color: var(--faint); }
  .area-card .x { position: absolute; inset-inline-end: .5rem; inset-block-start: .4rem; border: 0; background: transparent; font-size: 1.4rem; line-height: 1; color: var(--muted); min-inline-size: 2rem; min-block-size: 2rem; }
  @media (max-width: 60rem) { .area-card { inset-block-start: 5rem; inset-inline: var(--gutter); inline-size: auto; } }

  /* agent card */
  .agent { position: relative; display: flex; flex-direction: column; max-block-size: min(38rem, 72dvh); border-radius: var(--radius-lg); background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(20px) saturate(1.5); box-shadow: var(--shadow-lg); overflow: hidden; contain: layout paint; }
  .agent-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border-block-end: 1px solid var(--line); }
  .orb { position: relative; flex: none; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--teal-400) 40%, var(--teal-700) 75%); box-shadow: 0 8px 20px rgb(11 122 131 / .35); }
  .orb::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgb(20 166 177 / .35); opacity: 0; }
  .agent.speaking .orb::after { animation: ring 1.2s ease-out infinite; --animation-reduced: none; opacity: 1; }
  .agent.thinking .orb { animation: breathe 1s ease-in-out infinite; --animation-reduced: none; }
  @keyframes ring { from { scale: .9; opacity: .9; } to { scale: 1.35; opacity: 0; } }
  @keyframes breathe { 50% { scale: .92; } }
  .agent-id b { display: block; font-size: 1.05rem; }
  .agent-id small { color: var(--accent-strong); font-weight: 700; font-size: .78rem; }
  .agent-tools { margin-inline-start: auto; display: flex; gap: .35rem; }
  .icon-btn { display: grid; place-items: center; min-inline-size: 2.5rem; min-block-size: 2.5rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-900); }
  .icon-btn[aria-pressed="true"] { background: var(--accent); color: var(--white); border-color: var(--accent); }
  .icon-btn svg { inline-size: 1.1rem; block-size: 1.1rem; }
  .log { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; min-block-size: 9rem; scroll-behavior: smooth; }
  .msg { max-inline-size: 92%; padding: .7rem .9rem; border-radius: 1rem; font-size: .94rem; line-height: 1.55; overflow-wrap: anywhere; }
  .msg.ai { background: var(--surface); border: 1px solid var(--line); border-start-start-radius: .3rem; box-shadow: var(--shadow-sm); }
  .msg.me { align-self: flex-end; background: var(--ink-900); color: var(--white); border-start-end-radius: .3rem; }
  .msg ul { padding-inline-start: 1.1rem; margin-block: .35rem; }
  .msg p + p { margin-block-start: .45rem; }
  .typing { display: inline-flex; gap: .25rem; } .typing i { inline-size: .4rem; block-size: .4rem; border-radius: 50%; background: var(--faint); animation: dot 1s infinite; --animation-reduced: none; }
  .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes dot { 50% { translate: 0 -.3rem; opacity: .4; } }
  .chips { display: flex; gap: .4rem; overflow-x: auto; padding: 0 1.1rem .7rem; scrollbar-width: none; }
  .chips button { flex: none; min-block-size: 2.2rem; padding: .35rem .8rem; border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--surface); font-size: .82rem; font-weight: 700; color: var(--accent-strong); }
  .chips button:hover { background: var(--accent-soft); }
  .ask { display: flex; gap: .5rem; padding: .75rem 1.1rem 1rem; border-block-start: 1px solid var(--line); }
  .ask input { flex: 1; min-inline-size: 0; min-block-size: 2.9rem; padding: .6rem 1rem; border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--surface); }
  .ask button { min-inline-size: 2.9rem; border-radius: 50%; border: 0; background: var(--cta); color: var(--white); display: grid; place-items: center; }
  .play-intro { display: inline-flex; align-items: center; gap: .4rem; margin-block-start: .5rem; padding: .35rem .75rem; border-radius: var(--pill); border: 1px solid var(--teal-400); background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: .82rem; }

  /* sections */
  .section { padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
  .section.alt { background: var(--surface); }
  .section.tint { background: linear-gradient(180deg, var(--sky-100), var(--bg)); }
  .eyebrow { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
  :lang(ar) .eyebrow { letter-spacing: 0; }
  .section h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); margin-block: .5rem .8rem; }
  .section .intro { color: var(--muted); max-inline-size: 42rem; font-size: 1.06rem; }
  .head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-block-end: 2.2rem; }
  .src-note { font-size: .78rem; color: var(--faint); margin-block-start: 1rem; }
  .src-note a { color: inherit; }

  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
  .kpi { padding: 1.4rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
  .kpi b { display: block; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
  .kpi span { color: var(--muted); font-size: .9rem; }
  .kpi.accent { background: linear-gradient(160deg, var(--teal-600), var(--teal-700)); color: var(--white); border-color: transparent; }
  .kpi.accent b, .kpi.accent span { color: inherit; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-block-start: 1.25rem; }
  @media (max-width: 52rem) { .split { grid-template-columns: 1fr; } }
  .panel { padding: 1.4rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
  .panel h3 { font-size: 1.05rem; margin-block-end: 1rem; }
  .chart-box { position: relative; block-size: 17rem; }

  .seg { display: inline-flex; padding: .25rem; border-radius: 1.4rem; background: var(--surface-2); gap: .2rem; flex-wrap: wrap; }
  .seg button { min-block-size: 2.4rem; padding: .4rem .95rem; border-radius: var(--pill); border: 0; background: transparent; font-weight: 700; font-size: .88rem; color: var(--muted); }
  .seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

  .areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1rem; }
  .area { position: relative; padding: 1.25rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: translate .25s var(--ease), box-shadow .25s; }
  .area:hover { translate: 0 -3px; box-shadow: var(--shadow-md); }
  .area h3 { font-size: 1.08rem; padding-inline-end: 5.5rem; min-block-size: 2.4em; }
  .area dd { font-size: .95rem; }
  .area .bar { block-size: .45rem; border-radius: var(--pill); background: var(--surface-2); margin-block: .8rem; overflow: hidden; }
  .area .bar i { display: block; block-size: 100%; inline-size: var(--w, 0%); background: linear-gradient(90deg in oklch, var(--teal-400), var(--teal-700)); border-radius: inherit; transition: inline-size .8s var(--ease); }
  .area dl { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; }
  .area dt { font-size: .72rem; color: var(--muted); font-weight: 600; }
  .area dd { font-weight: 800; font-variant-numeric: tabular-nums; }
  .area .fly { position: absolute; inset-inline-end: 1rem; inset-block-start: 1rem; border: 1px solid var(--line-strong); border-radius: var(--pill); background: var(--surface); font-size: .75rem; font-weight: 700; padding: .3rem .7rem; color: var(--accent-strong); min-block-size: 2rem; }

  /* journey */
  .journey { display: grid; grid-template-columns: 17rem 1fr; gap: 2rem; }
  @media (max-width: 52rem) { .journey { grid-template-columns: 1fr; } }
  .tabs { display: flex; flex-direction: column; gap: .5rem; }
  @media (max-width: 52rem) { .tabs { flex-direction: row; overflow-x: auto; } }
  .tabs button { text-align: start; min-block-size: 3.2rem; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); font-weight: 700; flex: none; }
  .tabs button[aria-selected="true"] { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }
  .steps { counter-reset: s; display: grid; gap: .9rem; }
  .steps li { counter-increment: s; position: relative; padding: 1.1rem 1.2rem 1.1rem 3.8rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
  :dir(rtl) .steps li { padding: 1.1rem 3.8rem 1.1rem 1.2rem; }
  .steps li::before { content: counter(s); position: absolute; inset-inline-start: 1.1rem; inset-block-start: 1.05rem; display: grid; place-items: center; inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; }
  .steps b { display: block; }
  .steps span { color: var(--muted); font-size: .95rem; }
  .steps .tag { display: inline-block; margin-block-start: .35rem; font-size: .75rem; font-weight: 700; color: var(--cta-strong); background: var(--cta-soft); padding: .1rem .55rem; border-radius: var(--pill); }

  /* calculator */
  .calc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  @media (max-width: 52rem) { .calc { grid-template-columns: 1fr; } }
  .field { display: grid; gap: .35rem; margin-block-end: 1.1rem; }
  .field label, .field .lbl { font-weight: 700; font-size: .9rem; display: flex; justify-content: space-between; gap: 1rem; }
  .field output { color: var(--accent-strong); font-variant-numeric: tabular-nums; }
  .field input[type=number], .field input[type=text], .field input[type=tel], .field input[type=email], .field select, .field textarea { min-block-size: 3rem; padding: .65rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); }
  .field textarea { min-block-size: 6rem; resize: vertical; }
  input[type=range] { accent-color: var(--accent); inline-size: 100%; min-block-size: 1.6rem; }
  .switch { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .9rem; min-block-size: 2.5rem; }
  .switch input { accent-color: var(--accent); inline-size: 1.2rem; block-size: 1.2rem; }
  .costs { display: grid; gap: .1rem; }
  .costs div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .6rem; border-block-end: 1px dashed var(--line-strong); }
  .costs dt { color: var(--muted); } .costs dd { font-weight: 800; font-variant-numeric: tabular-nums; }
  .costs .total { border: 0; padding-block-start: 1rem; font-size: 1.15rem; }
  .costs .total dt { color: var(--text); font-weight: 800; }
  .costs .total dd { color: var(--cta-strong); font-size: 1.5rem; }
  .visa { display: flex; gap: .7rem; align-items: center; margin-block-start: 1rem; padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 700; font-size: .9rem; }
  .visa.ok { background: var(--accent-soft); color: var(--accent-strong); }
  .visa i { inline-size: .7rem; block-size: .7rem; border-radius: 50%; background: var(--faint); flex: none; }
  .visa.ok i { background: var(--teal-400); }

  /* faq */
  .faq { display: grid; gap: .7rem; max-inline-size: 52rem; }
  .faq details { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); padding: 0 1.2rem; }
  .faq summary { cursor: pointer; list-style: none; padding-block: 1.05rem; font-weight: 800; display: flex; justify-content: space-between; gap: 1rem; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-size: 1.3rem; color: var(--accent); line-height: 1; }
  .faq details[open] summary::after { content: "−"; }
  .faq details p { padding-block-end: 1.1rem; color: var(--muted); }

  /* contact */
  .contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items: start; }
  @media (max-width: 52rem) { .contact { grid-template-columns: 1fr; } }
  .contact .panel { padding: 1.6rem; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  @media (max-width: 36rem) { .row2 { grid-template-columns: 1fr; } }
  .hp { position: absolute; inset-inline-start: -9999px; }
  .notice { padding: .8rem 1rem; border-radius: var(--radius-sm); font-weight: 700; margin-block-end: 1rem; }
  .notice.ok { background: var(--accent-soft); color: var(--accent-strong); }
  .notice.err { background: var(--cta-soft); color: var(--cta-strong); }
  .perks { display: grid; gap: .8rem; margin-block: 1.5rem; }
  .perks li { display: flex; gap: .7rem; align-items: flex-start; }
  .perks li::before { content: ""; flex: none; inline-size: 1.4rem; block-size: 1.4rem; margin-block-start: .1rem; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7a83' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/70% no-repeat; }

  footer { padding-block: 3rem; background: var(--ink-900); color: rgb(255 255 255 / .75); font-size: .88rem; }
  footer a { color: var(--white); }
  footer .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; }
  @media (max-width: 52rem) { footer .cols { grid-template-columns: 1fr; } }
  footer h4 { color: var(--white); margin-block-end: .6rem; font-size: .95rem; }
  footer ul { display: grid; gap: .35rem; padding: 0; list-style: none; }
  footer .legal { margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid rgb(255 255 255 / .12); font-size: .78rem; color: rgb(255 255 255 / .55); }

  /* floating agent button (after hero) */
  .fab { position: fixed; inset-inline-end: 1.2rem; inset-block-end: 1.2rem; z-index: 40; display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem .5rem .5rem; border-radius: var(--pill); border: 0; background: var(--ink-900); color: var(--white); font-weight: 800; box-shadow: var(--shadow-lg); opacity: 0; translate: 0 1rem; pointer-events: none; transition: opacity .3s, translate .3s var(--ease); }
  :dir(rtl) .fab { padding: .5rem .5rem .5rem 1rem; }
  .fab.show { opacity: 1; translate: 0; pointer-events: auto; }
  .fab .orb { inline-size: 2.3rem; block-size: 2.3rem; }

  /* reveal on scroll (progressive enhancement) */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    }
  }
  @keyframes rise { from { opacity: 0; translate: 0 2rem; } }
}

@layer utilities {
  .muted { color: var(--muted); }
  .sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (forced-colors: active) { .btn, .pin, .kpi, .area, .panel, .agent { border: 1px solid CanvasText; } }
}
@property --animation-reduced { syntax: "*"; inherits: false; initial-value: none; }
@media (prefers-reduced-motion: reduce) { * { animation: var(--animation-reduced) !important; } }