/* REDREAMER — Warm Multilingual (balanced, warm contrast, minimal, effective) */

:root{
  --bg:#F0E4DA;          /* warm linen (lighter, more comfortable) */
  --fg:#0A0E12;          /* ink */
  --muted:#2E3A44;       /* readable secondary */
  --muted2:#6B5B52;      /* warm secondary */

  --surface:rgba(255,252,249,.86);     /* warm paper */
  --surfaceSolid:#FFFFFF;
  --surfaceSoft:rgba(255,226,218,.76); /* soft warm */

  --line:rgba(10,14,18,.14);
  --shadow:0 20px 54px rgba(10,14,18,.16);
  --radius:20px;

  --accent:#1F6FEB;      /* blue (clarity) */
  --accentWarm:#D97870;  /* soft red (warmth) */
  --accentWarm2:#E7A29C; /* lighter warm */
  --focus:rgba(217,120,112,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,Arial,sans-serif;
  background:
    radial-gradient(920px 520px at 78% 12%, rgba(217,120,112,.14), transparent 64%),
    radial-gradient(860px 520px at 16% 4%, rgba(31,111,235,.07), transparent 66%),
    radial-gradient(980px 620px at 22% 96%, rgba(217,120,112,.07), transparent 62%),
    var(--bg);
  color:var(--fg);
  line-height:1.72;
  font-size:16px;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

.container{max-width: 1140px; margin:0 auto; padding:0 clamp(16px, 3.5vw, 30px)}

/* Language: show/hide blocks */
html[data-lang="en"] .lang-fr{display:none !important}
html[data-lang="fr"] .lang-en{display:none !important}

/* Header */
.header{
  position:sticky; top:0; z-index:20;
  background:rgba(234,220,203,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(10,14,18,.10);
  box-shadow: 0 8px 24px rgba(10,14,18,.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  min-height:72px;
  gap:14px;
  flex-wrap:wrap;
}
.brandlink{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.logo{width:44px;height:44px}
.brand{font-weight:700; letter-spacing:.14em; font-size:13px}

.nav{display:flex; gap:12px; align-items:center; color:rgba(10,14,18,.72); flex:1 1 auto; justify-content:center; flex-wrap:wrap}
.nav a{padding:8px 10px; border-radius:999px; white-space:nowrap}
.nav a:hover{background:rgba(11,15,20,.04)}
.nav-cta{
  color:var(--fg);
  border:1px solid var(--line);
  background:rgba(255,255,255,.70);
}

/* Lang switch */
.lang-switch{
  display:flex;
  gap:6px;
  padding:6px;
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,245,242,.85);
  border-radius:999px;
  flex:0 0 auto;
}
.lang-btn{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color:rgba(10,14,18,.78);
  font-weight:600;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
}
.lang-btn:hover{background:rgba(11,15,20,.04)}
.lang-btn.active{
  background:rgba(11,15,20,.06);
  border-color:rgba(11,15,20,.06);
  color:rgba(11,15,20,.88);
}

/* Hero */
.hero{
  padding: clamp(56px, 6vw, 80px) 0 clamp(34px, 4.5vw, 50px);
}
.hero--compact{padding:64px 0 34px}
.hero-grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap:22px;
  align-items:stretch;
}
.kicker{
  color:var(--muted2);
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
}
h1{
  margin:12px 0 14px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height:1.04;
  font-weight:500;
  letter-spacing:-0.02em;
}
.h1-compact{font-size: clamp(28px, 3.6vw, 44px); margin-top:10px}
.lead{max-width: 62ch; 
  color:var(--muted);
  font-size: clamp(16px, 1.4vw, 18px);
  max-width:64ch;
}
.hero-actions{margin-top:20px; display:flex; gap:12px; flex-wrap:wrap}

/* Buttons */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  background:var(--accent);
  color:white;
  font-weight:600;
  box-shadow:0 12px 28px rgba(31,111,235,.22);
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,245,242,.85);
  color:var(--fg);
  font-weight:600;
}
.btn-ghost:hover{background:rgba(255,255,255,.78)}
.w100{width:100%}

/* Chips */
.signal{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}
.chip{
  font-size:12px;
  color:rgba(10,14,18,.78);
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,245,242,.85);
  padding:6px 10px;
  border-radius:999px;
}

/* Hero card */
.hero-card{
  border:1px solid rgba(10,14,18,.10);
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-card-top{
  padding:18px 18px 12px;
  border-bottom:1px solid rgba(10,14,18,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
}
.mini-title{font-weight:600; font-size:13px; letter-spacing:.06em}
.mini-sub{color:var(--muted); font-size:13px; margin-top:6px}
.hero-card-list{padding:6px 18px 10px}
.row{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid rgba(11,15,20,.06)}
.row:last-child{border-bottom:none}
.label{color:var(--muted2); font-size:12px; text-transform:uppercase; letter-spacing:.12em}
.value{font-weight:600; color:rgba(11,15,20,.88); text-align:right}
.hero-card-foot{
  display:flex; align-items:center; gap:10px;
  padding:12px 18px 16px;
  color:rgba(11,15,20,.70);
  font-size:12px;
  border-top:1px solid rgba(10,14,18,.10);
  background:rgba(255,255,255,.55);
}
.dot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(226,74,42,.55);
}

/* Sections */
.section{padding: clamp(46px, 5.6vw, 74px) 0}
.section-head{display:flex; justify-content:space-between; gap:18px; align-items:flex-end; flex-wrap:wrap}
h2{margin:0 0 6px; font-size: clamp(24px, 2.6vw, 34px); font-weight:500; letter-spacing:-0.01em}
.sub{max-width: 72ch; margin:0; color:var(--muted); max-width:72ch}

.section-badge{display:flex; gap:8px; flex-wrap:wrap}
.badge{
  font-size:12px;
  color:rgba(10,14,18,.78);
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,255,255,.60);
  padding:6px 10px;
  border-radius:999px;
}

/* Cards */
.cards{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.cards--two{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
.card{
  padding:20px 22px 18px;
  border-radius:var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,255,255,.70);
  box-shadow:0 12px 32px rgba(10,14,18,.07);
}
.card h3{margin:0 0 8px; font-size:16px; font-weight:600}
.card p{margin:0 0 12px; color:var(--muted); font-size:14px}
.card ul{margin:0; padding-left:18px; color:rgba(11,15,20,.78); font-size:13px}
.card li{margin:6px 0}

/* Soft section (Approach) */
.section-soft{
  background:
    radial-gradient(900px 500px at 15% 15%, rgba(225,141,128,.14), transparent 65%),
    linear-gradient(180deg, rgba(255,228,207,.86), rgba(255,228,207,.42));
  border-top:1px solid rgba(11,15,20,.05);
  border-bottom:1px solid rgba(11,15,20,.05);
}

.two-col{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap:18px;
  align-items:start;
}

.steps{margin-top:18px; display:grid; gap:12px}
.step{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px;
  border:1px solid rgba(11,15,20,.06);
  background:rgba(255,245,242,.85);
  border-radius:16px;
}
.step-n{font-weight:600; color:rgba(11,15,20,.70); width:40px}
.step-t{font-weight:600}
.step-d{color:var(--muted); font-size:14px; margin-top:2px}

.panel{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,255,255,.74);
  box-shadow:var(--shadow);
}
.panel-title{font-weight:600; margin-bottom:10px}
.panel-list{margin:0; padding-left:18px; color:rgba(11,15,20,.80); font-size:14px}
.panel-list li{margin:8px 0}
.panel-note{
  margin-top:12px;
  font-size:12px;
  color:rgba(11,15,20,.65);
  border-top:1px solid rgba(10,14,18,.10);
  padding-top:10px;
}

/* About */
.about-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:start;
}
.about-card{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 30px rgba(11,15,20,.05);
}
.about-card h3{margin:0 0 10px; font-size:16px; font-weight:600}
.about-card p{margin:0 0 12px; color:rgba(11,15,20,.82); font-size:14px}
.about-list{margin:0; padding-left:18px; color:rgba(11,15,20,.78); font-size:13px}
.about-list li{margin:8px 0}

.about-side{display:grid; gap:14px}
.mini-card{
  padding:16px;
  border-radius:var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,255,255,.78);
  box-shadow:var(--shadow);
}
.mini-h{font-weight:600; margin-bottom:10px}
.mini-card ul{margin:0; padding-left:18px; color:rgba(11,15,20,.78); font-size:13px}
.mini-card li{margin:8px 0}

/* Tiles */
.grid2{margin-top:22px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.tile{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,255,255,.70);
  box-shadow:0 10px 30px rgba(11,15,20,.05);
}
.tile h3{margin:0 0 8px; font-size:16px; font-weight:600}
.tile p{margin:0; color:var(--muted); font-size:14px}

/* Archive link block */
.archive-link{
  margin-top:18px;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.archive-note{color:rgba(11,15,20,.62); font-size:13px}

/* Contact */
.section-contact{padding-bottom:88px}
.contact{display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items:start}
.contact-hint{
  margin-top:14px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(11,15,20,.06);
  background:rgba(255,255,255,.60);
  color:rgba(10,14,18,.78);
  font-size:13px;
}
.contact-box{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,255,255,.78);
  box-shadow:var(--shadow);
}
.contact-row{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(11,15,20,.06)}
.contact-row:last-of-type{border-bottom:none}
.contact a.value{color:var(--accent)}
.tiny{margin-top:10px; font-size:12px; color:rgba(11,15,20,.65)}

/* Footer */
.footer{
  padding:42px 0 52px;
  border-top:1px solid rgba(10,14,18,.10);
  color:rgba(11,15,20,.60);
  font-size:13px;
}
.footer-inner{display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap}
.foot-links{display:flex; gap:14px; align-items:center}
.foot-links a:hover{opacity:1; color:rgba(11,15,20,.85)}
.foot-links .quiet{opacity:.8}

/* Responsive */
@media (max-width: 980px){
  .hero-card{max-width: 560px}
  .hero-left{max-width: 680px}

  .hero-grid{grid-template-columns:1fr}
  h1{font-size:44px}
  .cards{grid-template-columns:1fr}
  .cards--two{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .nav{gap:8px; justify-content:flex-end}
}


/* Brand descriptor */
.brand-sub{
  display:inline-flex;
  align-items:center;
  margin-left:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,245,242,.88); /* soft red-tinted paper */
  color:rgba(10,14,18,.78);
  font-weight:600;
  font-size:12px;
  letter-spacing:.04em;
  white-space:nowrap;
}
@media (max-width: 720px){
  .brand-sub{display:none;}
  .logo{width:40px;height:40px;}
  .header-inner{gap:10px;}
}


@media (max-width: 520px){
  .hero-actions{flex-direction:column; align-items:stretch}
  .btn-primary, .btn-ghost{width:100%}
  .nav{justify-content:flex-start}
  .lang-switch{order:3}
}


@media (max-width: 820px){
  .hero-grid{gap:16px}
  .section-head{align-items:flex-start}
  .value{text-align:left}
  .row{flex-direction:column; align-items:flex-start}
}


/* --- Explorer (interactive) --- */
.explorer{
  margin-top: 22px;
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap:14px;
  align-items:start;
}

.explorer-left{display:grid; gap:14px}
.dim{
  padding:18px;
  border-radius: var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,245,242,.78);
  box-shadow:0 12px 32px rgba(10,14,18,.06);
}
.dim-head{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.dim-title{font-weight:700}
.dim-value{color:rgba(10,14,18,.72); font-weight:700}
.dim-desc{margin-top:10px; color:rgba(10,14,18,.78); font-size:13px}

.range{
  width:100%;
  margin-top:12px;
  accent-color: var(--accent);
}

/* Insight card */
.insight-card{
  border-radius: var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,250,244,.86);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.insight-top{
  padding:16px 18px 12px;
  border-bottom:1px solid rgba(10,14,18,.08);
  background:
    radial-gradient(500px 240px at 90% 0%, rgba(225,141,128,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.55));
}
.insight-body{padding:16px 18px 18px}
.score{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.score-label{color:rgba(10,14,18,.70); font-size:13px; font-weight:600}
.score-value{font-size:40px; font-weight:700; letter-spacing:-0.02em}
.score-value .pct{font-size:18px; color:rgba(10,14,18,.70); margin-left:4px}
.insight-text{margin-top:12px; font-weight:600; color:rgba(10,14,18,.86)}
.micro{margin-top:12px; display:flex; gap:10px; align-items:flex-start; color:rgba(10,14,18,.68); font-size:12px}

/* Accordion */
.accordion{
  margin-top:14px;
  border-radius: var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.74);
  box-shadow:0 12px 32px rgba(10,14,18,.06);
  overflow:hidden;
}
.accordion-title{
  padding:14px 16px;
  font-weight:700;
  border-bottom:1px solid rgba(10,14,18,.08);
  background: rgba(255,245,242,.70);
}
.acc-item{
  width:100%;
  padding:14px 16px;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(10,14,18,.08);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  font-family:inherit;
  cursor:pointer;
}
.acc-item:hover{background:rgba(10,14,18,.03)}
.acc-q{font-weight:700; text-align:left}
.acc-ico{font-weight:800; color:rgba(10,14,18,.65)}
.acc-item.open .acc-ico{transform: rotate(45deg)}
.acc-panel{
  display:none;
  padding:12px 16px 16px;
  color:rgba(10,14,18,.80);
  font-size:14px;
  border-bottom:1px solid rgba(10,14,18,.08);
}
.acc-panel.open{display:block}
.acc-panel p{margin:0}
.accordion .acc-item:last-of-type{border-bottom:0}

/* Responsive for explorer */
@media (max-width: 980px){
  .explorer{grid-template-columns:1fr}
}


/* Readability width helpers */
.measure{max-width: 70ch}
.measure-tight{max-width: 62ch}


@media (min-width: 1200px){
  .hero-grid{gap: 26px}
  .cards{gap: 16px}
}


/* About timeline */
.about-timeline{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.t-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,245,242,.72);
}
.t-year{
  font-weight:800;
  color:rgba(10,14,18,.72);
  width:72px;
  flex:0 0 auto;
}
.t-txt{
  color:rgba(10,14,18,.80);
  font-size:13px;
}
@media (max-width: 520px){
  .t-item{flex-direction:column}
  .t-year{width:auto}
}


/* Section distinction (journey) */
.section-explore{
  background:
    radial-gradient(900px 520px at 85% 12%, rgba(225,141,128,.14), transparent 65%),
    rgba(255,245,242,.45);
  border-top: 1px solid rgba(10,14,18,.05);
  border-bottom: 1px solid rgba(10,14,18,.05);
}

.section-learn{
  background: rgba(255,250,244,.55);
  border-top: 1px solid rgba(10,14,18,.05);
}


/* Journey stepper */
.stage-line{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.stage-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,245,242,.78);
  color:rgba(10,14,18,.80);
  font-weight:700;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.stage-text{
  color:rgba(10,14,18,.65);
  font-size:13px;
}

.step-btn{
  width:100%;
  text-align:left;
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,255,255,.65);
  border-radius:16px;
  padding:14px 14px;
  cursor:pointer;
  position:relative;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.step-btn:hover{background:rgba(255,255,255,.78)}
.step-btn .step-n{width:44px; font-weight:800; color:rgba(10,14,18,.66)}
.step-btn .step-t{font-weight:800}
.step-btn .step-d{color:rgba(10,14,18,.74); font-size:13px; margin-top:2px}
.step-tag{
  margin-left:auto;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(10,14,18,.10);
  background:rgba(255,245,242,.80);
  color:rgba(10,14,18,.70);
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
}
.step-btn.active{
  border-color: rgba(232,164,154,.70);
  box-shadow:0 14px 34px rgba(10,14,18,.08);
  background:rgba(255,250,244,.88);
}
.step-btn.active .step-tag{
  border-color: rgba(232,164,154,.70);
  background: rgba(232,164,154,.16);
}

.panel-journey .panel-title{margin-bottom:10px}
.progress{
  display:flex;
  gap:8px;
  margin: 6px 0 14px;
}
.seg{
  height:8px;
  flex:1;
  border-radius:999px;
  background:rgba(10,14,18,.08);
}
.seg.active{background:rgba(232,164,154,.55)}

.journey-kicker{
  color:rgba(10,14,18,.62);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.journey-title{
  margin-top:8px;
  font-weight:800;
  font-size:18px;
}
.journey-body{
  margin-top:8px;
  color:rgba(10,14,18,.78);
  font-size:14px;
}


/* Themes */
.theme-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}
.theme-card{
  border-radius: var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background:
    radial-gradient(520px 260px at 85% 10%, rgba(225,141,128,.18), transparent 60%),
    rgba(255,255,255,.70);
  box-shadow:0 12px 32px rgba(10,14,18,.06);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height: 168px;
}
.theme-card:hover{
  transform: translateY(-1px);
  box-shadow:0 16px 40px rgba(10,14,18,.08);
}
.theme-k{
  color:rgba(10,14,18,.62);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.theme-t{
  font-weight:800;
  letter-spacing:-0.01em;
}
.theme-d{
  color:rgba(10,14,18,.74);
  font-size:14px;
  max-width: 54ch;
}
.theme-cta{
  margin-top:auto;
  color:rgba(10,14,18,.70);
  font-weight:800;
  font-size:13px;
}
.learn-actions{
  margin-top:18px;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}


@media (max-width: 720px){
  .step-tag{display:none;}
  .theme-card{min-height:auto;}
}


/* =========================
   Workspace (private)
   ========================= */

.ws-alert{
  display:none;
  padding:18px;
  border-radius: var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,245,242,.78);
  box-shadow: 0 12px 32px rgba(10,14,18,.06);
  margin-bottom: 18px;
}
.ws-alert-title{font-weight:800; margin-bottom:6px}
.ws-alert-body{color:rgba(10,14,18,.78); font-size:14px}
.ws-alert-actions{margin-top:12px}

.ws-card{
  padding:20px 22px 18px;
  border-radius: var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,250,244,.86);
  box-shadow: var(--shadow);
}
.ws-card-head{margin-bottom:14px}

.ws-form{display:grid; gap:14px}
.ws-label{display:grid; gap:8px; font-weight:700}
.ws-label span{font-size:12px; letter-spacing:.06em; color:rgba(10,14,18,.70); text-transform:uppercase}
.ws-input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.72);
  font: inherit;
  color: rgba(10,14,18,.90);
}
.ws-textarea{
  width:100%;
  min-height: 110px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.72);
  font: inherit;
  color: rgba(10,14,18,.90);
}
.ws-select{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.72);
  font: inherit;
}
.ws-help{font-weight:500; color:rgba(10,14,18,.65); font-size:13px; text-transform:none; letter-spacing:0}
.ws-actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.ws-note{color:rgba(10,14,18,.70); font-size:13px}
.ws-split{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width: 820px){ .ws-split{grid-template-columns:1fr} }

.ws-app{display:block}
.ws-topbar{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}
.ws-user{font-weight:700; color:rgba(10,14,18,.78)}
.ws-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){ .ws-grid{grid-template-columns:1fr} }

.ws-side{
  border-radius: var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,245,242,.70);
  box-shadow: 0 12px 32px rgba(10,14,18,.06);
  overflow:hidden;
}
.ws-side-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(10,14,18,.08);
  background: rgba(255,250,244,.86);
}
.ws-side-title{font-weight:800}
.ws-mini{padding:8px 12px; min-width:42px}
.ws-side-list{padding:10px; display:grid; gap:8px}
.ws-proj{
  width:100%;
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.74);
  cursor:pointer;
}
.ws-proj:hover{background: rgba(255,255,255,.82)}
.ws-proj.active{
  border-color: rgba(31,111,235,.30);
  box-shadow: 0 10px 26px rgba(31,111,235,.12);
}
.ws-proj-title{font-weight:800}
.ws-proj-meta{margin-top:2px; font-size:12px; color:rgba(10,14,18,.60)}
.ws-side-foot{padding:12px 14px 14px; border-top:1px solid rgba(10,14,18,.08); color:rgba(10,14,18,.60)}

.ws-main{
  border-radius: var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,250,244,.86);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.ws-main-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:16px 16px 14px;
  border-bottom:1px solid rgba(10,14,18,.08);
  background:
    radial-gradient(680px 260px at 85% 0%, rgba(225,141,128,.22), transparent 60%),
    rgba(255,255,255,.55);
}
.ws-main-title{font-weight:900; font-size:18px}
.ws-small{font-size:12px; color:rgba(10,14,18,.60)}
.ws-main-actions{display:flex; gap:10px; flex-wrap:wrap}

.ws-tabs{
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid rgba(10,14,18,.08);
  background: rgba(255,245,242,.62);
  flex-wrap:wrap;
}
.ws-tab{
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.74);
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font: inherit;
  font-weight:700;
  color:rgba(10,14,18,.75);
}
.ws-tab.active{
  border-color: rgba(31,111,235,.24);
  background: rgba(31,111,235,.08);
  color: rgba(10,14,18,.86);
}

.ws-panel{padding:12px 12px 14px}

.ws-threadbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border:1px solid rgba(10,14,18,.10);
  border-radius:16px;
  background: rgba(255,255,255,.68);
}
.ws-thread-actions{display:flex; gap:8px}

.ws-messages{
  margin-top:12px;
  height: 420px;
  overflow:auto;
  padding: 10px;
  border-radius: 16px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.65);
}

.ws-msg{
  border:1px solid rgba(10,14,18,.10);
  border-radius: 16px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: rgba(255,250,244,.92);
}
.ws-msg.assistant{
  background: rgba(255,245,242,.92);
}
.ws-msg.kind-decision{border-left: 4px solid rgba(232,164,154,.70)}
.ws-msg.kind-task{border-left: 4px solid rgba(31,111,235,.55)}
.ws-msg.kind-note{border-left: 4px solid rgba(10,14,18,.22)}

.ws-msg-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.ws-msg-role{font-weight:900; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(10,14,18,.68)}
.ws-msg-time{font-size:12px; color:rgba(10,14,18,.55)}
.ws-msg-body{white-space:pre-wrap; margin-top:8px; color:rgba(10,14,18,.86); font-size:14px}
.ws-msg-actions{margin-top:8px}
.ws-link{
  border:0;
  background:transparent;
  color: rgba(31,111,235,.95);
  font-weight:800;
  cursor:pointer;
  padding:0;
}

.ws-tag{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.74);
  font-size:11px;
  letter-spacing:0;
  text-transform:none;
  font-weight:800;
}

.ws-compose{
  margin-top:12px;
  padding:12px;
  border-radius: 16px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,245,242,.62);
}
.ws-compose-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.ws-kinds{display:flex; gap:8px; flex-wrap:wrap}
.chip--btn{cursor:pointer}
.chip--btn.active{border-color: rgba(31,111,235,.30); background: rgba(31,111,235,.08)}

.ws-ai{display:flex; align-items:center}
.ws-check{display:flex; gap:8px; align-items:center; font-weight:700; color:rgba(10,14,18,.70)}
.ws-check input{accent-color: var(--accent)}

.ws-results{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.ws-result{
  border:1px solid rgba(10,14,18,.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.72);
}
.ws-result-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.ws-result-title{font-weight:900}
.ws-result-body{margin-top:8px; color:rgba(10,14,18,.82); font-size:14px; white-space:pre-wrap}

.ws-empty{
  padding:12px;
  border-radius:16px;
  border:1px dashed rgba(10,14,18,.20);
  color:rgba(10,14,18,.62);
  background: rgba(255,255,255,.66);
}

.ws-ask-row{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:10px;
  margin-top:12px;
}
@media (max-width: 820px){
  .ws-ask-row{grid-template-columns: 1fr; }
}

.ws-answer{
  margin-top:12px;
  border-radius: var(--radius);
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,250,244,.92);
  box-shadow: 0 12px 32px rgba(10,14,18,.06);
  overflow:hidden;
}
.ws-answer-head{
  padding:12px 14px;
  border-bottom:1px solid rgba(10,14,18,.08);
  background: rgba(255,245,242,.72);
}
.ws-answer-title{font-weight:900}
.ws-answer-body{
  padding:14px;
  white-space:pre-wrap;
  color:rgba(10,14,18,.86);
  font-size:14px;
}



#crossMode{
  opacity:.92;
}


/* Brand visibility boost */
.logo{width:44px; height:44px}
.logo--strong{width:52px; height:52px}
@media (max-width: 820px){
  .logo{width:40px; height:40px}
  .logo--strong{width:46px; height:46px}
}
.brand{letter-spacing:.14em}


/* -----------------------------
   Motion & micro-interactions
------------------------------ */
@keyframes floaty{
  0%{ transform: translateY(0) }
  50%{ transform: translateY(-7px) }
  100%{ transform: translateY(0) }
}
@keyframes driftA{
  0%{ transform: translate3d(-6%, -4%, 0) scale(1) }
  50%{ transform: translate3d(4%, 3%, 0) scale(1.05) }
  100%{ transform: translate3d(-3%, 5%, 0) scale(1.02) }
}
@keyframes driftB{
  0%{ transform: translate3d(6%, 4%, 0) scale(1.04) }
  50%{ transform: translate3d(-5%, -3%, 0) scale(1) }
  100%{ transform: translate3d(4%, -5%, 0) scale(1.06) }
}
@keyframes pop{
  0%{ transform: translateY(4px); opacity:0 }
  100%{ transform: translateY(0); opacity:1 }
}

html{scroll-behavior:smooth}

/* animated ambient layers (subtle) */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-1;
  filter: blur(70px);
  opacity:.55;
  transform: translate3d(0,0,0);
}
body::before{
  background:
    radial-gradient(520px 380px at 30% 30%, rgba(225,141,128,.22), transparent 60%),
    radial-gradient(760px 560px at 80% 20%, rgba(31,111,235,.14), transparent 62%);
  animation: driftA 18s ease-in-out infinite alternate;
}
body::after{
  background:
    radial-gradient(740px 520px at 70% 70%, rgba(225,141,128,.18), transparent 62%),
    radial-gradient(600px 480px at 20% 80%, rgba(10,14,18,.10), transparent 64%);
  mix-blend-mode:multiply;
  opacity:.32;
  animation: driftB 22s ease-in-out infinite alternate;
}

/* progress bar */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width: calc(var(--scroll-progress, 0) * 1%);
  background: linear-gradient(90deg, rgba(225,141,128,.95), rgba(31,111,235,.75));
  border-radius:999px;
  z-index:60;
  box-shadow: 0 6px 20px rgba(10,14,18,.14);
}

/* reveal on scroll */
.reveal{
  opacity:0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity .65s ease, transform .65s ease, filter .65s ease;
  will-change: transform, opacity;
}
.reveal.in{
  opacity:1;
  transform: none;
  filter: none;
}

/* Cards + buttons: hover depth */
.card{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(10,14,18,.14);
  border-color: rgba(10,14,18,.18);
}

.btn-primary,
.btn-ghost{
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary:hover,
.btn-ghost:hover{
  transform: translateY(-1px);
}
.btn-primary:active,
.btn-ghost:active{
  transform: translateY(0);
}

.hero-card{
  animation: floaty 10s ease-in-out infinite;
}
.hero-card.swap{
  animation: none;
}
.hero-card.swap .hero-card-list{
  animation: pop .28s ease-out both;
}

/* service chips as buttons */
.chip-btn{
  border:1px solid rgba(10,14,18,.12);
  background: rgba(255,255,255,.68);
  cursor:pointer;
}
.chip-btn.active{
  border-color: rgba(225,141,128,.55);
  background: rgba(225,141,128,.12);
}

/* Forms */
.form{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.form .grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 720px){
  .form .grid2{ grid-template-columns: 1fr; }
}
.field label{
  display:block;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(10,14,18,.62);
  margin:0 0 6px;
}
.field input,
.field textarea,
.field select{
  width:100%;
  padding:12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(10,14,18,.14);
  background: rgba(255,255,255,.76);
  color: var(--fg);
  outline:none;
}
.field textarea{ min-height: 118px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus{
  border-color: rgba(31,111,235,.35);
  box-shadow: 0 0 0 4px rgba(31,111,235,.08);
}

.hr{
  height:1px;
  background: rgba(10,14,18,.10);
  margin: 14px 0;
}

/* FAQ accordion */
.faq{
  border:1px solid rgba(10,14,18,.12);
  background: rgba(255,255,255,.74);
  border-radius: 14px;
  padding: 10px 12px;
}
.faq summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-weight:600;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  font-weight:600;
  opacity:.6;
}
.faq[open] summary::after{
  content:"–";
}
.faq .faq-body{
  margin-top:10px;
  color: rgba(10,14,18,.76);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body::before, body::after{ animation:none }
  .hero-card{ animation:none }
  .card, .btn-primary, .btn-ghost{ transition:none }
  .reveal{ opacity:1; transform:none; filter:none; transition:none }
  .scroll-progress{ display:none }
}


/* Newsletter */
.newsletter{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}
.newsletter input{
  width:min(260px, 38vw);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(10,14,18,.14);
  background: rgba(255,255,255,.72);
  outline:none;
}
.newsletter input:focus{
  border-color: rgba(225,141,128,.40);
  box-shadow: 0 0 0 4px rgba(225,141,128,.10);
}
@media (max-width: 860px){
  .newsletter{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }
  .newsletter input{ width:min(360px, 86vw); }
}

.filterbar input{
  width:min(520px, 92vw);
  padding:12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(10,14,18,.14);
  background: rgba(255,255,255,.78);
  outline:none;
}
.filterbar input:focus{
  border-color: rgba(31,111,235,.35);
  box-shadow: 0 0 0 4px rgba(31,111,235,.08);
}


/* --- AI PARK --- */
.park-hero{
  position:relative;
}
.park-pass{
  margin-top:18px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.70);
  border-radius: var(--radius);
  padding:14px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  box-shadow: 0 12px 40px rgba(10,14,18,.10);
}
.park-pass-left{flex:1 1 auto; min-width:240px}
.park-pass-right{display:flex; align-items:baseline; gap:10px}
.stamp-count{font-size:34px;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1;
}
.stamp-label{color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.10em; font-size:12px}

.park-map{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.park-node{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.66);
}
.park-node:hover{background: rgba(255,255,255,.76)}

.ride-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .ride-grid{grid-template-columns:1fr}
}

.ride{position:relative; overflow:hidden}
.ride-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px}
.ride-title{font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:rgba(10,14,18,.74)}
.ride-meta{color:var(--muted); font-size:13px}
.ride-actions{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.diag-out{
  margin-top:12px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.66);
  border-radius:14px;
  padding:12px;
}
.diag-pre{
  white-space:pre-wrap;
  margin:10px 0 0;
  font-size:12px;
  color:rgba(10,14,18,.78);
}
.diag-rec{display:flex; align-items:center; justify-content:space-between; gap:10px}
.diag-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,245,242,.92);
  font-weight:700;
  font-size:12px;
  letter-spacing:.10em;
}
.diag-pill.good{background: rgba(31,111,235,.12); border-color: rgba(31,111,235,.22)}
.diag-pill.bad{background: rgba(225,141,128,.18); border-color: rgba(225,141,128,.30)}

.bullets{margin:0; padding-left:18px}
.bullets li{margin:8px 0}

.park-links{margin-top:12px; display:flex; flex-wrap:wrap; gap:10px}

/* Rubric coaster */
.rubric-prompt{
  margin-top:10px;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.66);
  border:1px solid rgba(10,14,18,.10);
  font-size:13px;
  color:rgba(10,14,18,.80);
}
.rubric-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 820px){
  .rubric-grid{grid-template-columns:1fr}
}
.rubric-col{
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.68);
  border-radius:14px;
  padding:12px;
}
.rubric-label{font-weight:700; font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:rgba(10,14,18,.70)}
.rubric-answer{margin-top:8px; color:rgba(10,14,18,.82); font-size:13px; line-height:1.6}
.scoreline{display:flex; align-items:center; gap:10px; margin-top:10px}
.bar{
  flex:1 1 auto;
  height:10px;
  border-radius:999px;
  background: rgba(10,14,18,.08);
  overflow:hidden;
}
.fill{
  height:100%;
  width:30%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(31,111,235,.68), rgba(225,141,128,.40));
}
.score{font-weight:800; width:42px; text-align:right}

.rubric-weights{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
@media (max-width: 980px){
  .rubric-weights{grid-template-columns:repeat(2, 1fr)}
}
.weight{
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.66);
  border-radius:14px;
  padding:10px;
}
.wtop{display:flex; justify-content:space-between; gap:10px; font-size:12px; color:rgba(10,14,18,.74); font-weight:700}
.weight input{width:100%}

/* Winner glow */
#rubricRide.win-a .rubric-col:first-child{box-shadow: 0 16px 40px rgba(10,14,18,.10)}
#rubricRide.win-b .rubric-col:last-child{box-shadow: 0 16px 40px rgba(10,14,18,.10)}

/* Maze */
.maze-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}
@media (max-width: 820px){ .maze-box{grid-template-columns:1fr} }
.maze-q,.maze-a{
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.68);
  border-radius:14px;
  padding:12px;
  font-size:13px;
  color:rgba(10,14,18,.82);
}
.maze-choices{margin-top:12px; display:flex; flex-wrap:wrap; gap:10px}

/* Arcade */
.arcade-task{
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.66);
  color:rgba(10,14,18,.82);
  font-size:13px;
}
.arcade-steps{margin-top:12px}
.tray{
  margin-top:12px;
  border:1px dashed rgba(10,14,18,.20);
  border-radius:14px;
  padding:12px;
  background: rgba(255,245,242,.65);
}
.tray-line{margin-top:8px; display:flex; flex-wrap:wrap; gap:10px}

/* Forge */
.forge-out{
  margin-top:12px;
  white-space:pre-wrap;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.66);
  border-radius:14px;
  padding:12px;
  font-size:13px;
  color:rgba(10,14,18,.82);
}

/* Calibration */
.cal-panel{margin-top:10px}
.cal-row{display:flex; gap:14px; flex-wrap:wrap}
.cal-toggle{display:flex; gap:10px; align-items:center; font-weight:600; color:rgba(10,14,18,.78)}
.cal-scores{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
@media (max-width: 820px){ .cal-scores{grid-template-columns:1fr} }
.cal-card{
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.68);
  border-radius:14px;
  padding:12px;
  text-align:center;
}
.cal-score{font-size:34px; font-weight:800; margin-top:6px}
.cal-meter{margin-top:12px}

/* Ambient mouse gradient (very mild) */
body{
  background:
    radial-gradient(760px 460px at calc(82% + (var(--mx,0) * 3%)) calc(18% + (var(--my,0) * 3%)), rgba(225,141,128,.12), transparent 62%),
    radial-gradient(980px 560px at calc(18% + (var(--mx,0) * -3%)) calc(6% + (var(--my,0) * -3%)), rgba(31,111,235,.08), transparent 66%),
    var(--bg);
}

/* Scroll progress bar */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width: calc(var(--scroll-progress, 0) * 1%);
  background: linear-gradient(90deg, rgba(31,111,235,.78), rgba(225,141,128,.52));
  z-index:60;
  pointer-events:none;
}

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .7s ease;
}
.reveal.in{
  opacity:1;
  transform: translateY(0);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .scroll-progress{display:none}
}

.cards--three{grid-template-columns:repeat(3,1fr)}
@media (max-width: 980px){.cards--three{grid-template-columns:1fr}}


/* Premium sober adjustments */
.pass-bar{
  width:160px;
  height:8px;
  border-radius:999px;
  background: rgba(10,14,18,.08);
  overflow:hidden;
  margin-left:10px;
}
.pass-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(31,111,235,.75), rgba(225,141,128,.45));
}
.btn-quiet{
  padding:8px 10px;
  opacity:.85;
}


/* --- Global: Compass overlay (site map) --- */
.compass-btn{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(10,14,18,.12);
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 48px rgba(10,14,18,.12);
  backdrop-filter: blur(10px);
}
.compass-btn:hover{ background: rgba(255,255,255,.84); }
.compass-dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(180deg, rgba(225,141,128,.70), rgba(31,111,235,.40));
  box-shadow: 0 0 0 6px rgba(225,141,128,.10);
}
.compass-text{
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(10,14,18,.76);
}
.compass-mini{ color: var(--muted); font-size:12px; }

.overlay{
  position: fixed;
  inset: 0;
  z-index: 90;
  display:none;
  background: rgba(10,14,18,.42);
  backdrop-filter: blur(8px);
}
.overlay.open{ display:block; }
.overlay-card{
  position:absolute;
  right: 18px;
  bottom: 78px;
  width: min(520px, calc(100vw - 36px));
  max-height: calc(100vh - 120px);
  overflow:auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.92);
  box-shadow: 0 28px 90px rgba(10,14,18,.28);
}
.overlay-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(10,14,18,.08);
}
.overlay-head h3{
  margin:0;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(10,14,18,.78);
}
.overlay-close{
  border:1px solid rgba(10,14,18,.12);
  background: rgba(255,255,255,.72);
  border-radius: 12px;
  padding: 8px 10px;
}
.overlay-body{ padding: 12px 14px 14px; }
.overlay-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px){
  .overlay-grid{ grid-template-columns: 1fr; }
}
.zone{
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,245,242,.55);
  border-radius: 14px;
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.zone:hover{ background: rgba(255,255,255,.80); }
.zone-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.zone-name{ font-weight:800; font-size:13px; color: rgba(10,14,18,.86); }
.zone-tag{ font-size:11px; letter-spacing:.10em; text-transform:uppercase; color: rgba(10,14,18,.55); }
.zone-desc{ font-size:12px; color: rgba(10,14,18,.70); line-height:1.55; }
.zone-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color: rgba(10,14,18,.62);
}
.dot{
  width:8px;height:8px;border-radius:99px;
  background: rgba(10,14,18,.18);
}
.dot.on{ background: rgba(31,111,235,.45); }
.overlay-actions{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* --- Experience page --- */
.exp-shell{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 980px){
  .exp-shell{ grid-template-columns: 1fr; }
}
.exp-progress{
  margin-bottom: 12px;
}
.exp-steps{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.exp-step{
  width:34px;height:34px;
  border-radius: 12px;
  border:1px solid rgba(10,14,18,.12);
  background: rgba(255,255,255,.74);
  font-weight:800;
  color: rgba(10,14,18,.72);
}
.exp-step.active{ background: rgba(255,245,242,.82); border-color: rgba(225,141,128,.22); }
.exp-meter{
  margin-top:10px;
  height:8px;
  border-radius:999px;
  background: rgba(10,14,18,.08);
  overflow:hidden;
}
.exp-meter-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(31,111,235,.65), rgba(225,141,128,.35));
}
.exp-meta{ margin-top:8px; font-size:12px; color: rgba(10,14,18,.56); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.exp-card{ padding: 16px; }
.exp-kicker{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: rgba(10,14,18,.56); font-weight:800; }
.exp-title{ margin: 10px 0 0; font-size: 26px; letter-spacing:-0.02em; }
.exp-copy{ margin-top: 10px; color: rgba(10,14,18,.78); line-height: 1.75; font-size: 14px; }
.exp-copy p{ margin: 10px 0; }
.exp-actions{ margin-top: 14px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.exp-hint{ margin-top: 10px; opacity:.78; }
.exp-stage{ padding: 16px; min-height: 420px; }
.exp-links{ margin-top: 12px; display:flex; flex-wrap:wrap; gap:10px; }

/* Trust lab */
.trust-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 620px){ .trust-grid{ grid-template-columns:1fr; } }
.trust-box{
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.66);
  border-radius: 14px;
  padding: 12px;
}
.trust-row{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.trust-row label{ font-weight:700; color: rgba(10,14,18,.76); font-size:12px; letter-spacing:.10em; text-transform:uppercase; }
.trust-row select, .trust-row input[type=range]{
  width: 62%;
}
.trust-legend{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color: rgba(10,14,18,.72);
  font-size: 12px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,245,242,.55);
}
.pill i{ width:8px;height:8px;border-radius:99px; display:inline-block; background: rgba(10,14,18,.18); }
.pill i.coop{ background: rgba(31,111,235,.45); }
.pill i.def{ background: rgba(225,141,128,.55); }

.trust-output{
  margin-top: 12px;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,255,255,.66);
  border-radius: 14px;
  padding: 12px;
}
.moves{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top: 10px;
}
.move{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  border:1px solid rgba(10,14,18,.10);
  background: rgba(10,14,18,.04);
}
.move.c{ background: rgba(31,111,235,.12); border-color: rgba(31,111,235,.18); }
.move.d{ background: rgba(225,141,128,.16); border-color: rgba(225,141,128,.22); }
.scorepair{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.scorecard{
  border:1px solid rgba(10,14,18,.10);
  background: rgba(255,245,242,.45);
  border-radius: 14px;
  padding: 10px;
}
.scorecard .mini-title{ margin-top:0; }
.scorevalue{ font-size: 28px; font-weight: 900; letter-spacing:-0.02em; margin-top: 6px; }
.trustbar{
  margin-top: 10px;
  height:8px;
  border-radius:999px;
  background: rgba(10,14,18,.08);
  overflow:hidden;
}
.trustfill{
  height:100%;
  width:50%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(225,141,128,.40), rgba(31,111,235,.55));
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .compass-btn{ transition:none; }
}


/* Comfort & accessibility */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius: 10px;
}


/* Warm trust badges */
.trust-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  border:1px solid var(--line);
  box-shadow: 0 10px 28px rgba(10,14,18,.08);
  font-size:14px;
  color: var(--muted);
}
.badge-dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(217,120,112,.45);
  box-shadow: 0 0 0 6px rgba(217,120,112,.10);
}
.badge-dot.blue{
  background: rgba(31,111,235,.55);
  box-shadow: 0 0 0 6px rgba(31,111,235,.10);
}

.details{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.54);
  padding:12px 14px;
}
.details summary{
  cursor:pointer;
  font-weight:600;
  color: var(--fg);
  list-style:none;
}
.details summary::-webkit-details-marker{display:none}
.details summary:after{
  content:"＋";
  float:right;
  opacity:.7;
}
.details[open] summary:after{content:"–"}
.details .tiny{margin-top:10px}

.preview{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background: rgba(255,255,255,.60);
}
.preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.preview-title{
  font-weight:600;
}
.preview-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.preview pre{
  margin:0;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(10,14,18,.04);
  border:1px solid rgba(10,14,18,.10);
  white-space:pre-wrap;
  word-break:break-word;
  font-size:13px;
  color: var(--muted);
}
.btn-email{
  background: linear-gradient(135deg, rgba(217,120,112,.95), rgba(217,120,112,.82));
  box-shadow: 0 14px 30px rgba(217,120,112,.18);
}
.btn-email:hover{filter:brightness(1.03)}

/* Guide button (warm, optional) */
.guide-btn{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:9996;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.70);
  border:1px solid var(--line);
  box-shadow: 0 18px 44px rgba(10,14,18,.14);
  color: var(--fg);
  cursor:pointer;
}
.guide-btn .guide-icon{
  width:12px;height:12px;border-radius:999px;
  background: rgba(217,120,112,.50);
  box-shadow: 0 0 0 6px rgba(217,120,112,.12);
}
.guide-btn .guide-label{
  font-weight:600;
  font-size:14px;
}
.guide-panel{
  position:fixed;
  left:18px;
  bottom:66px;
  z-index:9997;
  width:min(340px, calc(100vw - 36px));
  border-radius:18px;
  background: rgba(255,255,255,.82);
  border:1px solid var(--line);
  box-shadow: 0 24px 62px rgba(10,14,18,.18);
  padding:12px;
  display:none;
}
.guide-panel.open{display:block}
.guide-panel .guide-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.guide-panel .guide-title{
  font-weight:700;
}
.guide-panel .guide-text{
  margin-top:6px;
  color: var(--muted);
  font-size:14px;
  line-height:1.55;
}

/* Tour overlay */
.tour-mask{
  position:fixed;
  inset:0;
  background: rgba(10,14,18,.55);
  z-index:9998;
}
.tour-card{
  position:fixed;
  z-index:9999;
  width:min(420px, calc(100vw - 36px));
  border-radius:18px;
  background: rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 30px 80px rgba(10,14,18,.28);
  padding:14px;
}
.tour-card h3{
  margin:0;
  font-size:16px;
}
.tour-card p{
  margin:8px 0 0;
  color: var(--muted);
  font-size:14px;
  line-height:1.55;
}
.tour-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
  flex-wrap:wrap;
}
.tour-highlight{
  position:fixed;
  z-index:9999;
  border-radius:16px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.65), 0 0 0 10px rgba(217,120,112,.18);
  pointer-events:none;
}

/* Glossary modal */
.modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}
.modal.open{display:block}
.modal .modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(10,14,18,.55);
}
.modal .modal-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(720px, calc(100vw - 34px));
  max-height:min(80vh, 720px);
  overflow:auto;
  border-radius:18px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.45);
  box-shadow: 0 30px 80px rgba(10,14,18,.28);
  padding:16px;
}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.modal-title{
  font-weight:800;
  font-size:16px;
}
.modal-close{
  border:1px solid var(--line);
  background: rgba(255,255,255,.65);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.glossary-search{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.glossary-search input{
  flex:1;
  min-width:220px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.72);
}
.glossary-list{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.glossary-item{
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.62);
  padding:12px 14px;
}
.glossary-item .g-term{
  font-weight:700;
}
.glossary-item .g-def{
  margin-top:6px;
  color: var(--muted);
  font-size:14px;
  line-height:1.55;
}

/* Term tooltip */
.term{
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: help;
}
.tooltip{
  position:fixed;
  z-index:9999;
  max-width:min(300px, calc(100vw - 24px));
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(10,14,18,.14);
  box-shadow: 0 18px 50px rgba(10,14,18,.18);
  font-size:13px;
  line-height:1.45;
  color: var(--muted);
  display:none;
}
.tooltip strong{color:var(--fg)}


/* About hero */
.about-hero{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  align-items:start;
  margin-top: 18px;
}
.about-photo img{
  width: 180px;
  height: 180px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(40,30,20,.12);
  box-shadow: 0 18px 40px rgba(30,20,10,.12);
}
.codebox{
  border: 1px solid rgba(40,30,20,.12);
  background: rgba(255,255,255,.6);
  border-radius: 16px;
  padding: 14px;
}

@media (max-width: 820px){
  .about-hero{ grid-template-columns: 1fr; }
  .about-photo img{ width: 140px; height: 140px; }
}