/* The technology side of the site (the home page): night ink, ivory type and one champagne gold, with a cool
   glow used sparingly. Quiet and expensive rather than loud; the motion lives in the hero's field, the logo and
   the phone. Cormorant for display, Plus Jakarta Sans (the JARVIS App's font) for reading, a mono for labels. */

@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
             font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
             font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
             font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("/fonts/ibm-plex-sans-thai-thai-400-normal.woff2") format("woff2");
             font-weight: 400; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("/fonts/ibm-plex-sans-thai-thai-600-normal.woff2") format("woff2");
             font-weight: 500 700; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Noto Serif Thai"; src: url("/fonts/noto-serif-thai-thai-500-normal.woff2") format("woff2");
             font-weight: 400 600; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }

:root {
  color-scheme: dark;
  --ink: #07090f;
  --ink-2: #0c1018;
  --panel: rgba(239, 233, 223, .035);
  --line: rgba(239, 233, 223, .11);
  --fg: #efe9df;
  --mute: #9ca1ab;
  --gold: #c9a96e;
  --gold-2: #e4cc98;
  --glow: #7fd3e6;
  --serif: "Cormorant Garamond", "Noto Serif Thai", "Iowan Old Style", Georgia, serif;
  --sans: "Plus Jakarta Sans", "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--fg); font: 400 17px/1.7 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 8px 14px; background: var(--gold); color: var(--ink); border-radius: 8px; }
.skip:focus { left: 12px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: 40px; padding-right: 40px; } }

/* ── header ── */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
       gap: 12px; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px));
       padding-top: max(14px, env(safe-area-inset-top, 0px)); transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.top.solid { background: rgba(7, 9, 15, .72); border-color: var(--line); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
@media (min-width: 760px) { .top { padding-left: 40px; padding-right: 40px; } }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 34px; height: auto; }
.brand span { font: 500 21px/1 var(--serif); letter-spacing: .06em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { padding: 8px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--mute); transition: color .2s; }
.nav a:hover { color: var(--fg); }
.nav .cta { margin-left: 6px; color: var(--ink); background: var(--gold); }
.nav .cta:hover { color: var(--ink); background: var(--gold-2); }
@media (max-width: 860px) { .nav a[href="#fix"], .nav a[href="#proof"] { display: none; } .brand span { display: none; } }
@media (max-width: 440px) { .nav { gap: 0; } .nav a { padding: 8px 9px; font-size: 14px; } .nav .cta { margin-left: 4px; padding: 8px 14px; } }

/* ── type ── */
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(48px, 7.4vw, 104px); line-height: .98; }
h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; }
h3 { font-size: clamp(28px, 2.6vw, 34px); line-height: 1.15; }
h1 em, h2 em { font-style: italic; color: var(--gold); }
.label { margin: 0 0 20px; font: 500 12px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.label.dim { color: var(--mute); }
.lead { margin: 22px 0 0; max-width: 56ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--mute); }
.head { max-width: 860px; margin-bottom: 56px; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 999px;
       font: 600 15.5px/1.2 var(--sans); text-decoration: none; transition: transform .25s, background .25s, border-color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn.gold { background: var(--gold); color: var(--ink); }
.btn.gold:hover { background: var(--gold-2); }
.btn.line { border: 1px solid var(--line); color: var(--fg); }
.btn.line:hover { border-color: var(--gold); }
.actions, .contact-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ── hero ── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
        overflow: hidden; padding: 110px 0 40px; isolation: isolate;
        background: radial-gradient(120% 80% at 75% 30%, #121a2a 0%, var(--ink) 60%); }
#field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-in { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
           display: grid; gap: 28px; align-items: center; }
@media (min-width: 760px) { .hero-in { padding-left: 40px; padding-right: 40px; } }
@media (min-width: 980px) { .hero-in { grid-template-columns: 1.25fr .9fr; } .hero-mark { order: 2; } }
.hero-mark { width: min(360px, 62vw); justify-self: center; perspective: 900px; }
.hero-mark .mark { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); }
.m-a { fill: var(--fg); }
.m-blue { fill: #3d6e9e; }
.m-light { fill: #e8edf1; }
.hero-foot { width: 100%; max-width: 1180px; margin: 48px auto 0; padding: 18px max(16px, env(safe-area-inset-left, 0px)) 0;
             font-size: 14.5px; color: var(--mute); border-top: 1px solid var(--line); }
@media (min-width: 760px) { .hero-foot { padding-left: 40px; padding-right: 40px; } }
.hero-foot span { color: var(--fg); }

/* ── bands ── */
.band { padding: 120px 0; border-top: 1px solid var(--line); overflow: clip; }
@media (max-width: 760px) { .band { padding: 88px 0; } }

.halves { display: grid; gap: 20px; }
@media (min-width: 900px) { .halves { grid-template-columns: 1fr 1fr; } }
.half { padding: 32px; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); position: relative; overflow: hidden; }
.half::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s;
                background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(201, 169, 110, .12), transparent 60%); }
.half:hover::before { opacity: 1; }
.half h3 { margin-bottom: 18px; }
.items { list-style: none; margin: 0; padding: 0; }
.items li { border-top: 1px solid var(--line); }
.items button { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0;
                background: none; border: 0; color: var(--fg); font: 500 18px/1.3 var(--sans); text-align: left; cursor: pointer; }
.items button i { position: relative; width: 14px; height: 14px; flex: none; }
.items button i::before, .items button i::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1.5px; background: var(--gold); transition: transform .3s; }
.items button i::after { transform: rotate(90deg); }
.items button[aria-expanded="true"] i::after { transform: rotate(0); }
.items p { margin: 0; max-height: 0; overflow: hidden; color: var(--mute); font-size: 15.5px; transition: max-height .4s ease, padding .4s ease; }
.items button[aria-expanded="true"] + p { max-height: 160px; padding-bottom: 18px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; position: relative; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: s; padding: 28px 24px 28px 0; border-top: 1px solid var(--line); position: relative; }
.steps li::before { content: "0" counter(s); display: block; margin-bottom: 18px; font: 500 12px/1 var(--mono); letter-spacing: .18em; color: var(--gold); }
.steps li::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--gold); transition: width 1.2s cubic-bezier(.22, 1, .36, 1); }
.steps li.lit::after { width: 100%; }
.steps b { display: block; font: 500 32px/1.1 var(--serif); }
.steps p { margin: 12px 0 0; color: var(--mute); font-size: 15.5px; }

.proof-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .proof-grid { grid-template-columns: 1.1fr .9fr; gap: 72px; } }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.tabs button { min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--mute);
               font: 600 14.5px/1 var(--sans); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.tabs button:hover { color: var(--fg); border-color: rgba(239, 233, 223, .3); }
.tabs button[aria-selected="true"] { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.note { margin: 16px 0 0; font-size: 13px; color: var(--mute); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.facts dt { font: 500 clamp(26px, 3vw, 36px)/1 var(--serif); color: var(--fg); }
.facts dd { margin: 8px 0 0; font-size: 13.5px; color: var(--mute); }
.device { position: relative; display: flex; justify-content: center; perspective: 1100px; }
.phone { position: relative; z-index: 1; width: min(310px, 64vw); aspect-ratio: 750 / 1624; max-width: 100%; padding: 10px; border-radius: 46px; background: #05070b;
         box-shadow: 0 0 0 1px rgba(239, 233, 223, .14), 0 50px 100px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 36px; }
.halo { position: absolute; z-index: 0; width: 120%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%;
        background: radial-gradient(circle, rgba(127, 211, 230, .16), rgba(201, 169, 110, .08) 40%, transparent 68%); }

.zoey-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .zoey-grid { grid-template-columns: .9fr 1.1fr; gap: 72px; } }
.orb-wrap { aspect-ratio: 1; width: min(420px, 80vw); justify-self: center; }
#orb { width: 100%; height: 100%; display: block; }

.dive-teaser { padding-top: 0; border-top: 0; }
.teaser { position: relative; display: block; max-width: 1180px; margin: 0 auto; border-radius: 0; overflow: hidden; text-decoration: none; min-height: 520px; }
@media (min-width: 760px) { .teaser { border-radius: 32px; margin: 0 40px; } }
@media (min-width: 1260px) { .teaser { margin: 0 auto; } }
.teaser img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1); }
.teaser:hover img { transform: scale(1); }
.teaser::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 9, 15, .82), rgba(7, 9, 15, .2) 70%); }
.teaser-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0; max-width: 520px; padding: 64px max(24px, 5vw); }
.teaser-h { font: 500 clamp(38px, 5vw, 64px)/1.02 var(--serif); }
.teaser-h em { font-style: italic; color: var(--gold-2); }
.teaser-p { margin: 18px 0 30px; color: rgba(239, 233, 223, .82); }

.contact .head { margin-bottom: 0; }

footer { border-top: 1px solid var(--line); padding: 40px 0 48px; color: var(--mute); font-size: 13.5px; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.foot nav { display: flex; gap: 20px; margin-left: auto; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--fg); }

/* Reveals start visible; tech.js moves them in only when Motion is there and motion is allowed. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .teaser img, .items p, .steps li::after { transition: none; }
}

/* ── the logo's entrance (js/tech.js adds .play once the page is on screen; a tap replays it) ──
   The A traces itself in gold and fills, the shark swims in through it, a ring of light goes out and a glint
   crosses the mark. Then the shark keeps swimming, gently, for as long as the page is open. Before .play the
   pieces wait hidden, but only with a script and only when motion is welcome; otherwise the logo is simply there. */
.hero-mark { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-mark::before { content: ""; position: absolute; left: 50%; top: 52%; width: 92%; aspect-ratio: 1; border-radius: 50%;
                     border: 1px solid var(--gold); transform: translate(-50%, -50%) scale(.4); opacity: 0; pointer-events: none; }
.hero-mark::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
                    background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 222, .95) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
                    -webkit-mask: url("/img/brand/mark.svg") center / contain no-repeat; mask: url("/img/brand/mark.svg") center / contain no-repeat;
                    mix-blend-mode: screen; }
.m-shark { transform-box: fill-box; transform-origin: 50% 50%; }
.m-a { stroke: var(--gold-2); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero-mark:not(.play) .m-shark { opacity: 0; }
  .js .hero-mark:not(.play) .m-a { fill-opacity: 0; }
  .hero-mark.play .m-a { animation: a-trace 1.5s cubic-bezier(.6, 0, .3, 1) both, a-fill 1s .95s ease-out both; }
  .hero-mark.play .m-shark { animation: shark-in 2.3s .9s cubic-bezier(.2, .8, .25, 1) both, shark-swim 7s 3.2s ease-in-out infinite; }
  .hero-mark.play::before { animation: ring 6s 2.2s ease-out infinite; }
  .hero-mark.play::after { animation: glint 6s 2.6s ease-in-out infinite; }
}
@keyframes a-trace { 0% { stroke-dashoffset: 1; stroke-opacity: 1; } 80% { stroke-opacity: 1; } 100% { stroke-dashoffset: 0; stroke-opacity: 0; } }
@keyframes a-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes shark-in {
  0%   { opacity: 0; transform: translate(-70%, 55%) rotate(-24deg) scale(.6); }
  18%  { opacity: 1; }
  52%  { transform: translate(9%, -7%) rotate(7deg) scale(1.05); }
  74%  { transform: translate(-3%, 2%) rotate(-2.5deg) scale(.99); }
  100% { opacity: 1; transform: none; }
}
@keyframes shark-swim {
  0%, 100% { transform: none; }
  25% { transform: translate(2.6%, -2.4%) rotate(2.2deg); }
  50% { transform: translate(.4%, -.6%) rotate(.4deg); }
  75% { transform: translate(-1.8%, 1.4%) rotate(-1.6deg); }
}
@keyframes ring { 0% { opacity: .55; transform: translate(-50%, -50%) scale(.45); } 35%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
@keyframes glint { 0% { opacity: 1; background-position: 160% 0; } 30% { opacity: 1; background-position: -60% 0; } 31%, 100% { opacity: 0; background-position: -60% 0; } }

/* ── the live demo, inside the phone ── */
.try { display: grid; gap: 10px; justify-items: start; margin-block: 22px 6px; }
/* The app is drawn at a real phone's width (390 px) and scaled to the frame by tech.js, so it lays out as on a phone. */
.phone iframe { display: block; width: 390px; border: 0; border-radius: 48px; background: #0e0f14; transform-origin: 0 0; }
.phone img[hidden] { display: none; }   /* .phone img's own height beats the browser's [hidden] */
.phone.live { transform: none !important; width: min(350px, 64vw); overflow: hidden; }
.phone-back { position: absolute; z-index: 2; left: 50%; bottom: -46px; transform: translateX(-50%); white-space: nowrap;
  border: 1px solid currentColor; border-radius: 999px; padding: 7px 14px; background: transparent; color: inherit;
  font: inherit; font-size: 13px; cursor: pointer; opacity: .8; }
.phone-back:hover { opacity: 1; }

/* ── Thai (/th/): Thai needs room above and below the line for its vowel and tone marks, and has no italics and no
   capitals, so the display lines open up, the gold words stay upright and the small labels drop their wide tracking.
   The Thai letters come from Noto Serif Thai and IBM Plex Sans Thai, downloaded only where Thai appears. ── */
:lang(th) body, body:lang(th) { line-height: 1.85; }
:lang(th) h1 { line-height: 1.22; }
:lang(th) h2, :lang(th) h3 { line-height: 1.3; }
:lang(th) em { font-style: normal; }
:lang(th) .label { letter-spacing: .06em; }
:lang(th) .lead { line-height: 1.8; }
:lang(th) h1 { font-size: clamp(40px, 6vw, 84px); }
:lang(th) h2 { font-size: clamp(30px, 4vw, 54px); }
:lang(th) .label { font-family: var(--sans); font-size: 13px; }
:lang(th) .teaser-h { line-height: 1.25; font-size: clamp(32px, 4.4vw, 56px); }