/* Atlazzo SEO pages – same palette as the app: paper/ink by day, midnight blue by night, brand gold */
:root{
  --bg:#F3F5F2; --surface:#FFFFFF; --ink:#13201E; --muted:#5D6B68; --line:#DCE3E0; --chip:#E8EEEB;
  --gold:#AD8611; --gold-hi:#E6C04F; --gold-lo:#7C5C08; --accent:#B08A1F; --accent-ink:#1A1405; --accent-text:#80620E;
  --shadow:0 10px 30px rgba(19,32,30,.08);
  --display:'Bodoni Moda',Didot,'Bodoni 72',Georgia,serif; --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; --sub:'Jost','Futura','Helvetica Neue',Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{--bg:#0A0D14;--surface:#10141D;--ink:#E8ECF3;--muted:#97A0B2;--line:#232A38;--chip:#181E2A;--gold:#E8C24A;--gold-hi:#FFE9A6;--gold-lo:#B98A1C;--accent:#E8C24A;--accent-text:#E8C24A;--shadow:0 10px 30px rgba(0,0,0,.35);color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
a{color:var(--accent-text)}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* header */
.top{background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.topin{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.tnav{display:flex;gap:4px;align-items:center}
.tnav > a{text-decoration:none;color:var(--ink);font-weight:600;padding:8px 12px;border-radius:999px;white-space:nowrap}
.tnav > a:hover{background:var(--chip)}

/* logo (identical to the app) */
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo-mark{position:relative;display:inline-flex}
.logo-layer{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.logo-ink{color:var(--ink);animation:logoInk 14s ease-in-out infinite}
.logo-gold{position:absolute;inset:0;opacity:0;animation:logoGold 14s ease-in-out infinite}
.logo-gold .logo-word,.logo-gold .logo-sub{color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(100deg,transparent 42%,rgba(255,250,225,.85) 50%,transparent 58%),linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 52%,var(--gold-lo) 100%);background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:160% 0,0 0;animation:logoGlint 14s ease-in-out infinite}
@keyframes logoInk{0%,35%{opacity:1}50%,85%{opacity:0}100%{opacity:1}}
@keyframes logoGold{0%,35%{opacity:0}50%,85%{opacity:1}100%{opacity:0}}
@keyframes logoGlint{0%,54%{background-position:160% 0,0 0}70%,100%{background-position:-60% 0,0 0}}
@media (prefers-reduced-motion:reduce){.logo-ink{animation:none;opacity:0}.logo-gold{animation:none;opacity:1}.logo-gold .logo-word,.logo-gold .logo-sub{animation:none}}
.logo-word{font-family:var(--display);font-weight:600;font-size:30px;line-height:1;letter-spacing:.075em;margin-right:-.075em;font-kerning:normal;white-space:nowrap}
.logo-word .zz{letter-spacing:.035em;margin-right:.04em}
.logo-sub{align-self:center;font-family:var(--sub);font-weight:400;font-size:8px;letter-spacing:.5em;white-space:nowrap}

/* buttons */
.btn,.tnav .cta{background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:700;border-radius:12px;padding:11px 18px;display:inline-block;line-height:1.2;transition:filter .15s}
.btn:hover,.tnav .cta:hover{filter:brightness(1.06);background:var(--accent)}
.btn.ghost{background:var(--chip);color:var(--ink)}

.demo{background:var(--chip);color:var(--muted);font-size:13px;padding-block:7px}
main{padding-block:40px 64px;display:flex;flex-direction:column;gap:56px}
h1{font-size:clamp(30px,4.6vw,52px);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.02em;font-weight:700}
h2{font-size:clamp(22px,2.4vw,28px);line-height:1.2;margin:0 0 16px;text-wrap:balance;letter-spacing:-.01em}
h3{font-size:16px;margin:16px 0 6px}
.lead{font-size:clamp(16px,1.6vw,19px);color:var(--muted);max-width:60ch;margin:14px 0 0}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}

/* hero: text left, live globe right */
.hero2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.htext{display:flex;flex-direction:column;min-width:0}
.biglogo{margin-bottom:28px}
.biglogo .logo-word{font-size:clamp(46px,6vw,76px)}
.biglogo .logo-sub{font-size:clamp(11px,1.3vw,16px)}
.hglobe{position:relative;width:100%;aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#0F2A4F 0%,#060A14 72%);box-shadow:var(--shadow);border:1px solid var(--line)}
.hglobe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* hero search */
.hsearch{display:flex;flex-direction:column;gap:10px;margin-top:26px;max-width:560px}
.hseg{display:inline-flex;gap:2px;background:var(--chip);border-radius:999px;padding:3px;align-self:flex-start}
.hseg label{cursor:pointer;margin:0}
.hseg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.hseg span{display:inline-block;padding:7px 16px;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted)}
.hseg input:checked+span{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.hseg input:focus-visible+span{outline:2px solid var(--accent)}
.hrow{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);padding:5px}
.hrow input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:12px 14px;appearance:none;-webkit-appearance:none}
.hrow input::placeholder{color:var(--muted);opacity:1}
.hrow input:focus{outline:none}
.hrow:focus-within{border-color:var(--accent)}
.hrow button{border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;padding:0 24px;border-radius:12px;cursor:pointer}
.hsearch+.ctas{margin-top:16px}

/* city tiles */
.reg{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:28px 0 12px;font-weight:600}
.cities{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.cities.tiles li{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.cities .tn{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.cities .cn{font-weight:700}
.cities .cc{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cities .dl{display:flex;gap:4px;flex:none}
.cities .dl a{font-size:12.5px;font-weight:600;text-decoration:none;color:var(--ink);background:var(--chip);padding:5px 9px;border-radius:999px}
.cities .dl a:hover{background:var(--accent);color:var(--accent-ink)}
.cities:not(.tiles) li a{text-decoration:none;font-weight:600}

/* why + agents */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.why div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
.why h3{margin:0 0 6px;font-size:17px}.why p{margin:0;color:var(--muted)}
.agents{background:linear-gradient(135deg,var(--surface),var(--chip));border:1px solid var(--line);border-radius:20px;padding:28px}
.agents p{max-width:60ch;color:var(--muted);margin:0 0 6px}

/* city pages */
.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.cityhero .hglobe{aspect-ratio:1/1}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.facts div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column}
.facts b{font-size:21px;font-variant-numeric:tabular-nums}
.facts span{font-size:13px;color:var(--muted)}
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card a{display:flex;flex-direction:column;gap:3px;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.card a:hover{border-color:var(--accent);transform:translateY(-2px)}
.ct{font-weight:700}.cp{font-size:20px;font-variant-numeric:tabular-nums}.cm{font-size:13px;color:var(--muted)}.go{margin-top:8px;font-size:13px;color:var(--accent-text);font-weight:700}
.faq{max-width:780px}
.faq h3{font-size:17px;margin:20px 0 6px}
.faq p{margin:0;color:var(--muted)}

/* footer */
.foot{border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13px;padding-block:40px 28px}
.foot p{margin:6px 0}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-bottom:26px}
.fcol h3{font-size:14px;color:var(--ink);margin:0 0 10px}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.fcol a{color:var(--muted);text-decoration:none;font-size:13px}.fcol a:hover{color:var(--ink);text-decoration:underline}
.fsoc{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding-block:16px;border-top:1px solid var(--line)}
.fsoc span:first-child{font-weight:700;color:var(--ink)}.fsoc a{color:var(--accent-text);font-weight:600;text-decoration:none}.fapps{color:var(--muted)}
.langs{display:flex;flex-wrap:wrap;gap:6px 16px;padding-block:6px 10px}
.langs a{color:var(--muted);text-decoration:none}.langs a[aria-current]{color:var(--ink);font-weight:700}
.fdis{font-size:12px;max-width:110ch}

a:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

@media (max-width:900px){
  .hero2{grid-template-columns:1fr;gap:28px}
  .hglobe{aspect-ratio:1/0.85}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  main{padding-block:24px 48px;gap:44px}
  .tnav > a:not(.cta){display:none}.tnav .cta{padding:9px 12px;font-size:14px;white-space:nowrap}.tnav{gap:6px}
  .logo-word{font-size:24px}.logo-sub{font-size:6.5px}
  .biglogo{display:none}
  .hrow button{padding:0 16px}
  .facts b{font-size:18px}
  .cities{grid-template-columns:1fr}
}

.more{margin-top:10px}
.more summary{cursor:pointer;display:inline-block;font-weight:700;color:var(--accent-text);padding:8px 0;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" ▾"}.more[open] summary::after{content:" ▴"}
.more[open] summary{margin-bottom:10px}

/* language switcher in the header */
.lsw{position:relative}
.lsw summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--ink);padding:8px 12px;border-radius:999px;border:1px solid var(--line)}
.lsw summary::-webkit-details-marker{display:none}
.lsw summary:hover,.lsw[open] summary{background:var(--chip)}
.lsm{position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;min-width:170px;z-index:20}
.lsm a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:500}
.lsm a:hover{background:var(--chip)}.lsm a[aria-current]{font-weight:700;color:var(--accent-text)}
@media (max-width:560px){.lsw summary{padding:8px 10px}.lsw summary span{font-size:13px}}

.ctags{display:flex;gap:6px;margin-bottom:6px}
.nb{font-size:10.5px;font-weight:800;letter-spacing:.1em;padding:4px 9px;border-radius:999px;color:#3A2A00;background:linear-gradient(135deg,#FBEFC0,#E8C24A 48%,#C9A227);box-shadow:0 2px 8px rgba(201,162,39,.35)}
.db{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;color:var(--good,#14A651);background:var(--chip,rgba(127,127,127,.12))}
.card.isnew a{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}