/* ============================================================
   Good Stranger — Midburn edition
   Identity: two people, one conversation.
   coral "you" + teal "a good stranger", glow where they meet.
   ============================================================ */

:root{
  --bg:#FEF6EF;
  --bg-warm:#FBEADC;
  --surface:#FFFFFF;
  --surface-soft:#FFFBF7;
  --ink:#2C2340;
  --ink-soft:#6D6584;
  --coral:#FB6E52;
  --coral-deep:#EF553B;
  --teal:#12B5A6;
  --teal-deep:#0E9A8D;
  --sun:#FFC24B;
  --sun-deep:#F2A81E;
  --violet:#6C5CE7;
  --line:rgba(44,35,64,0.10);
  --line-soft:rgba(44,35,64,0.055);
  --shadow:0 22px 60px -26px rgba(44,35,64,0.34);
  --shadow-soft:0 12px 34px -18px rgba(44,35,64,0.24);
  --radius:24px;
  --radius-sm:15px;
  --pill:999px;
  --maxw:1140px;
  --font-display:'Varela Round', system-ui, -apple-system, sans-serif;
  --font-body:'Assistant', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.62;
  font-size:17px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
em{font-style:normal}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
.narrow{max-width:820px}
.center{text-align:center}

/* ── Buttons ───────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-body);font-weight:700;font-size:1.02rem;
  padding:.85em 1.7em;border-radius:var(--pill);border:2px solid transparent;
  cursor:pointer;transition:transform .18s ease, box-shadow .22s ease, background .2s ease;
  line-height:1;white-space:nowrap;
}
.btn--sm{font-size:.92rem;padding:.6em 1.25em}
.btn--lg{font-size:1.12rem;padding:1em 2.1em}
.btn--primary{
  color:#fff;background:linear-gradient(120deg,var(--coral),var(--sun));
  box-shadow:0 14px 30px -12px rgba(251,110,82,.6);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px -12px rgba(251,110,82,.68)}
.btn--ghost{color:var(--teal-deep);background:transparent;border-color:var(--teal)}
.btn--ghost:hover{transform:translateY(-2px);background:rgba(18,181,166,.09)}
.btn--sun{color:var(--ink);background:var(--sun);box-shadow:0 12px 26px -12px rgba(242,168,30,.7)}
.btn--sun:hover{transform:translateY(-2px);background:var(--sun-deep)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--violet);outline-offset:3px}

/* ── Header ───────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(254,246,239,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s, box-shadow .3s;
}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(44,35,64,.5)}
.header-inner{display:flex;align-items:center;gap:22px;height:72px}
.brand{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-size:1.35rem;color:var(--ink)}
.brand-mark{position:relative;width:34px;height:22px;display:inline-block}
.brand-mark .dot{position:absolute;top:0;width:22px;height:22px;border-radius:50%}
.dot-a{inset-inline-start:0;background:var(--coral)}
.dot-b{inset-inline-start:12px;background:var(--teal);mix-blend-mode:multiply;opacity:.92}
.brand-name{letter-spacing:.2px}

.site-nav{display:flex;gap:26px;margin-inline-start:auto;font-weight:600;font-size:.98rem}
.site-nav a{color:var(--ink-soft);position:relative;padding-block:4px;transition:color .18s}
.site-nav a:hover{color:var(--ink)}
.site-nav a::after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;background:var(--coral);transition:width .22s}
.site-nav a:hover::after{width:100%}

.header-actions{display:flex;align-items:center;gap:14px;margin-inline-start:auto}
.lang-toggle{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-weight:700;
  font-size:.9rem;color:var(--ink-soft);background:transparent;border:1.5px solid var(--line);
  border-radius:var(--pill);padding:.4em .8em;cursor:pointer;transition:border-color .2s;
}
.lang-toggle:hover{border-color:var(--ink-soft)}
.lang-opt{transition:color .2s;color:var(--ink-soft)}
.lang-opt.is-on{color:var(--coral-deep)}
.lang-sep{opacity:.4}

/* ── Hero ───────────────────────────────── */
.hero{position:relative;padding-block:clamp(48px,8vw,96px) clamp(56px,9vw,110px);overflow:hidden}
.hero-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 42% at 78% 18%, rgba(251,110,82,.20), transparent 70%),
    radial-gradient(44% 40% at 20% 78%, rgba(18,181,166,.18), transparent 72%),
    radial-gradient(30% 30% at 60% 60%, rgba(255,194,75,.16), transparent 70%);
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,64px);align-items:center}
.badges{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.badge{font-weight:700;font-size:.82rem;padding:.42em .95em;border-radius:var(--pill);letter-spacing:.2px}
.badge-coral{color:var(--coral-deep);background:rgba(251,110,82,.13)}
.badge-teal{color:var(--teal-deep);background:rgba(18,181,166,.14)}
.badge-sun{color:var(--sun-deep);background:rgba(255,194,75,.2)}

.hero-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.35rem,5.4vw,4.15rem);line-height:1.06;letter-spacing:-.5px;
  color:var(--ink);margin-bottom:22px;
}
.hero-title em{
  background:linear-gradient(120deg,var(--coral-deep),var(--teal-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{font-size:clamp(1.06rem,1.7vw,1.28rem);color:var(--ink-soft);max-width:37ch;margin-bottom:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.hero-trust{font-size:.92rem;color:var(--ink-soft);font-weight:600}

/* Hero signature art */
.hero-art{position:relative;min-height:400px}
.orb{position:absolute;border-radius:50%;filter:blur(2px);mix-blend-mode:multiply}
.orb-you{
  width:270px;height:270px;inset-inline-start:2%;top:6%;
  background:radial-gradient(circle at 35% 32%, #ff8f77, var(--coral) 62%, rgba(251,110,82,.35));
  animation:floatA 9s ease-in-out infinite;
}
.orb-stranger{
  width:290px;height:290px;inset-inline-end:0;top:22%;
  background:radial-gradient(circle at 60% 35%, #4ad3c6, var(--teal) 60%, rgba(18,181,166,.32));
  animation:floatB 10.5s ease-in-out infinite;
}
.spark{
  position:absolute;top:47%;inset-inline-start:47%;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.5),0 0 26px 8px rgba(255,194,75,.9);
  animation:pulse 3.4s ease-in-out infinite;z-index:3;
}
.chat-card{
  position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%);
  width:min(300px,84%);background:var(--surface);border-radius:20px;
  padding:18px 18px 20px;box-shadow:var(--shadow);z-index:4;
  animation:bob 6s ease-in-out infinite;
}
html[dir="rtl"] .chat-card{transform:translate(50%,-50%)}
.chat-line{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.chat-line:last-child{margin-bottom:0}
.who{font-size:.72rem;font-weight:700;letter-spacing:.4px}
.who-you{color:var(--coral-deep)}
.who-us{color:var(--teal-deep)}
.bubble{background:rgba(251,110,82,.12);color:var(--ink);padding:.6em .9em;border-radius:14px;font-weight:600;font-size:.96rem;align-self:flex-start}
.chat-us{align-items:flex-end}
.bubble-alt{background:rgba(18,181,166,.14);align-self:flex-end}

/* ── Section scaffold ───────────────────────────────── */
.section{position:relative;padding-block:clamp(64px,9vw,104px)}
.section-warm{background:var(--bg-warm)}
.eyebrow{font-weight:700;font-size:.82rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--coral-deep);margin-bottom:14px}
.section-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.85rem,3.6vw,2.85rem);line-height:1.12;letter-spacing:-.3px;margin-bottom:18px;max-width:20ch}
.center .section-title{margin-inline:auto}
.section-lead{font-size:clamp(1.04rem,1.5vw,1.2rem);color:var(--ink-soft);max-width:56ch;margin-bottom:14px}
.center .section-lead{margin-inline:auto}
.section-note{font-size:1rem;color:var(--ink-soft);max-width:60ch;margin-top:22px}
.center .section-note{margin-inline:auto}
.section-lead + .chips{margin-top:30px}

/* ── Intention chips ───────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:13px;margin-block:8px 4px}
.chip{
  display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-body);font-weight:600;
  font-size:1.02rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--pill);padding:.72em 1.25em;cursor:pointer;
  transition:transform .16s, border-color .2s, box-shadow .2s, background .2s;
}
.chip-dot{width:11px;height:11px;border-radius:50%;background:linear-gradient(120deg,var(--coral),var(--teal));flex:none}
.chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);border-color:transparent}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.is-active .chip-dot{background:var(--sun)}

/* ── Connect / Surprise ───────────────────────────────── */
.ways-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:38px}
.way-card{background:var(--surface);border-radius:var(--radius);padding:34px 32px;box-shadow:var(--shadow-soft);border:1px solid var(--line-soft)}
.way-card--surprise{background:linear-gradient(160deg,#fff,#fff8ec);border-color:rgba(255,194,75,.4)}
.way-icon{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:1.5rem}
.icon-filter{background:rgba(18,181,166,.12);flex-direction:column;gap:5px}
.icon-filter span{display:block;height:3.5px;border-radius:3px;background:var(--teal)}
.icon-filter span:nth-child(1){width:26px}
.icon-filter span:nth-child(2){width:18px}
.icon-filter span:nth-child(3){width:22px}
.icon-spark{background:rgba(255,194,75,.22);color:var(--sun-deep)}
.way-title{font-family:var(--font-display);font-weight:400;font-size:1.55rem;margin-bottom:10px}
.way-text{color:var(--ink-soft);font-size:1.04rem;margin-bottom:20px}
.tag-list{list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.tag-list li{font-weight:600;font-size:.9rem;color:var(--teal-deep);background:rgba(18,181,166,.1);padding:.42em .9em;border-radius:var(--pill)}

.surprise-box{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.surprise-result{
  min-height:74px;display:flex;align-items:center;justify-content:center;text-align:center;
  background:#fff;border:1.5px dashed rgba(242,168,30,.55);border-radius:16px;
  padding:16px 18px;font-weight:600;color:var(--ink);font-size:1.05rem;transition:transform .3s;
}
.surprise-result.pop{animation:pop .45s ease}
.surprise-result.placeholder-state{color:var(--ink-soft);font-weight:500}
.mini-note{font-size:.82rem;color:var(--ink-soft);margin-top:12px;text-align:center;opacity:.9}

/* ── Circles ───────────────────────────────── */
.circle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.circle-card{
  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:18px 20px;font-weight:600;box-shadow:var(--shadow-soft);
  transition:transform .16s;
}
.circle-card:hover{transform:translateY(-3px)}
.cc-dot{width:13px;height:13px;border-radius:50%;flex:none}
.circle-card:nth-child(6n+1) .cc-dot{background:var(--coral)}
.circle-card:nth-child(6n+2) .cc-dot{background:var(--teal)}
.circle-card:nth-child(6n+3) .cc-dot{background:var(--sun)}
.circle-card:nth-child(6n+4) .cc-dot{background:var(--violet)}
.circle-card:nth-child(6n+5) .cc-dot{background:var(--coral-deep)}
.circle-card:nth-child(6n+6) .cc-dot{background:var(--teal-deep)}

/* ── Safety (compact) ───────────────────────────────── */
.safety-compact{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:36px 40px;box-shadow:var(--shadow-soft);text-align:center;max-width:720px;margin-inline:auto;
}
.safety-compact .section-title{max-width:none;margin-inline:auto}
.safety-compact .section-lead{margin-inline:auto}
.safety-points{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:26px 0 20px;
}
.safety-points li{
  font-weight:600;font-size:.96rem;color:var(--teal-deep);
  background:rgba(18,181,166,.1);padding:.5em 1.1em;border-radius:var(--pill);
}
.not-dating{
  font-size:1rem;color:var(--ink-soft);background:rgba(251,110,82,.08);
  border-radius:var(--radius-sm);padding:16px 20px;max-width:56ch;margin-inline:auto;
}
.not-dating strong{color:var(--coral-deep)}

/* ── Vision ───────────────────────────────── */
.section-vision{background:linear-gradient(180deg,var(--bg),var(--bg-warm))}
.vision-chat{max-width:520px;margin:34px auto 30px;display:flex;flex-direction:column;gap:14px}
.vc-line{display:flex}
.vc-you{justify-content:flex-start}
.vc-us{justify-content:flex-end}
.vc-bubble{font-size:1.12rem;font-weight:600;padding:.85em 1.3em;border-radius:20px;box-shadow:var(--shadow-soft)}
.vc-you .vc-bubble{background:var(--coral);color:#fff;border-end-start-radius:6px}
.vc-us .vc-bubble{background:var(--teal);color:#fff;border-end-end-radius:6px}
.closing-line{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.2rem);color:var(--ink);margin-bottom:26px;line-height:1.3}

/* ── Footer ───────────────────────────────── */
.site-footer{background:var(--ink);color:#fff;padding-block:44px}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.footer-brand{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-size:1.35rem}
.footer-brand .dot-b{mix-blend-mode:screen}
.footer-tag{font-family:var(--font-display);font-size:1.15rem;color:rgba(255,255,255,.9)}
.footer-meta{font-size:.88rem;color:rgba(255,255,255,.6);display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.dot-sep{opacity:.5}

/* ── Reveal on scroll ───────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ── Motion keyframes ───────────────────────────────── */
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-16px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,14px)}}
@keyframes bob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 8px))}}
html[dir="rtl"] .chat-card{animation-name:bobRtl}
@keyframes bobRtl{0%,100%{transform:translate(50%,-50%)}50%{transform:translate(50%,calc(-50% - 8px))}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:1}}
@keyframes pop{0%{transform:scale(.9);opacity:.4}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}

/* ── Responsive ───────────────────────────────── */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .hero-art{min-height:330px;order:-1;max-width:420px;margin-inline:auto;width:100%}
  .hero-sub{max-width:none}
  .site-nav{display:none}
  .ways-grid{grid-template-columns:1fr;gap:24px}
  .circle-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .header-cta{display:none}
  .circle-grid{grid-template-columns:1fr}
  .hero-art{min-height:300px}
  .orb-you{width:200px;height:200px}
  .orb-stranger{width:215px;height:215px}
  .way-card{padding:26px 22px}
  .safety-compact{padding:28px 22px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none;transition:none}
  .orb,.chat-card,.spark{animation:none !important}
}