:root {
  --ink: #10273c;
  --ink-soft: #43596b;
  --ink-muted: #566a79;
  --accent: #efb350;
  --accent-hover: #e2a337;
  --accent-ink: #3a2a08;
  --terracotta: #a8481f;
  --success: #1f7a52;
  --success-bg: #e4f2ea;
  --danger: #b3341f;
  --danger-bg: #fbe7e3;
  --info-bg: #fdf6e6;
  --info-line: #efd9a8;
  --surface: #fff;
  --canvas: #eef2f5;
  --cream: #fdfbf6;
  --line: #dce4ea;
  --focus: #0f5e8c;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --sh-sm: 0 1px 2px rgba(16, 39, 60, .06);
  --sh-lg: 0 12px 32px rgba(16, 39, 60, .12);
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: Archivo, var(--font);
  font-family: var(--font);
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--canvas); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: #0f5e8c; text-decoration: none; }
a:hover { color: #0b4468; text-decoration: underline; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; font-family: var(--display); letter-spacing: -.015em; }
p { margin: 0; }

.eyebrow { margin: 0; color: var(--terracotta); font-size: .75rem; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.hint { color: var(--ink-muted); font-size: .8125rem; line-height: 1.45; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink);
  background: var(--surface);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.button:hover, .btn:hover { text-decoration: none; }
.button-primary, .btn-primary { color: var(--accent-ink); background: var(--accent); box-shadow: none; }
.button-primary:hover, .btn-primary:hover { color: var(--accent-ink); background: var(--accent-hover); }
.button-dark, .btn-secondary { color: #fff; background: var(--ink); }
.button-dark:hover, .btn-secondary:hover { color: #fff; background: #0a1b2a; }
.button-ghost, .btn-ghost { color: var(--ink); border-color: var(--line); background: var(--surface); }
.button-ghost:hover, .btn-ghost:hover { color: var(--ink); border-color: #b9c6d0; background: var(--surface); }
.button-small, .btn-sm { min-height: 40px; padding: 0 14px; font-size: .875rem; }

.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-family: var(--display); font-size: 1rem; font-weight: 600; line-height: 1; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark { display: inline-grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--accent-ink); background: var(--accent); font-family: var(--display); font-size: .875rem; font-weight: 800; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.person-icon { display: block; width: 34px; height: 34px; }
.person-icon-small { width: 19px; height: 19px; }

/* Landing */
.landing-body { background: var(--cream); }
.wrap, .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--s5); }
.site-head { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid #efe7d8; background: rgba(253, 251, 246, .92); backdrop-filter: blur(8px); }
.marketing-nav, .site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 68px; }
.marketing-links, .nav { display: none; align-items: center; gap: var(--s5); }
.marketing-links a:not(.button), .nav a { color: var(--ink-soft); font-size: .9375rem; font-weight: 500; }
.marketing-links a:not(.button):hover, .nav a:hover { color: var(--ink); }
.hero { display: grid; gap: var(--s7); padding: var(--s7) var(--s5); }
.hero-copy { display: flex; flex-direction: column; gap: var(--s5); max-width: 620px; }
.hero-copy h1 { color: var(--ink); font-family: var(--display); font-size: clamp(2.125rem, 5.4vw, 3.5rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; text-wrap: pretty; }
.hero-lead, .hero .lead { max-width: 52ch; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.hero-actions, .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.text-link, .link-soft { color: var(--ink-soft); font-size: .9375rem; font-weight: 500; }
.text-link:hover, .link-soft:hover { color: var(--ink); }
.hero-note { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: .875rem; line-height: 1.4; }
.hero-art { position: relative; display: grid; min-height: 380px; place-items: center; }
.hero-glow { display: none; }
.mini-phone, .phone { position: relative; display: flex; width: min(300px, 80vw); flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s5) var(--s4); border: 10px solid var(--ink); border-radius: 32px; color: var(--ink); background: #eef2f5; box-shadow: var(--sh-lg); text-align: center; transform: none; }
.mini-phone-top { display: flex; justify-content: center; gap: 5px; margin-bottom: var(--s3); }
.mini-phone-top span { width: 30px; height: 5px; border-radius: 999px; background: #c6d1da; }
.mini-avatar, .phone .ava { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; color: var(--accent-ink); background: var(--accent); font-family: var(--display); font-size: 1.5rem; font-weight: 800; }
.mini-phone strong, .phone .nm { font-family: var(--display); font-size: 1rem; font-weight: 700; }
.mini-phone small, .phone .bio { margin: 0; color: var(--ink-muted); font-size: .75rem; line-height: 1.4; }
.mini-link, .phone .lk { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; padding: 0 var(--s3); border-radius: 10px; background: #fff; box-shadow: var(--sh-sm); font-size: .75rem; font-weight: 600; }
.mini-link span, .phone .lk span:last-child { color: var(--terracotta); }
.mini-footer, .phone .sig { margin-top: var(--s2); color: #7e8c97; font-size: .625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.trust-strip, .strip { border-top: 1px solid #efe7d8; border-bottom: 1px solid #efe7d8; background: #fffdf8; }
.trust-items, .strip .wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s5); padding-top: var(--s5); padding-bottom: var(--s5); color: #6e6252; font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.feature-section, .section { padding-top: var(--s8); padding-bottom: var(--s8); }
.section-heading, .section-head { display: flex; max-width: 620px; flex-direction: column; gap: var(--s3); margin-bottom: var(--s6); }
.section-heading h2, .section-head h2, .business-callout h2, .band h2 { color: var(--ink); font-size: clamp(1.625rem, 3.4vw, 2.25rem); font-weight: 700; line-height: 1.15; }
.feature-grid, .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.feature-card, .fcard { display: flex; min-height: 0; flex-direction: column; gap: var(--s3); padding: var(--s5); border: 1px solid #efe7d8; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-sm); }
.feature-number, .fcard .num { color: var(--terracotta); font-family: ui-monospace, monospace; font-size: .75rem; font-weight: 700; }
.feature-card h3, .fcard h3 { margin: 0; color: var(--ink); font-size: 1.125rem; }
.feature-card p, .fcard p { color: var(--ink-soft); font-size: .9375rem; line-height: 1.55; }
.feature-card-highlight, .fcard.is-dark { border-color: var(--ink); color: #fff; background: var(--ink); }
.feature-card-highlight h3, .fcard.is-dark h3 { color: #fff; }
.feature-card-highlight p, .fcard.is-dark p { color: #c6d4df; }
.feature-card-highlight .feature-number, .fcard.is-dark .num { color: #f3c978; }
.business-section, .band { border-top: 1px solid var(--info-line); border-bottom: 1px solid var(--info-line); background: var(--info-bg); }
.business-callout, .band .wrap { display: grid; gap: var(--s5); align-items: center; padding-top: var(--s8); padding-bottom: var(--s8); }
.business-callout p:not(.eyebrow), .band p { max-width: 56ch; margin-top: var(--s3); color: #5b4a22; font-size: 1rem; line-height: 1.6; }
.marketing-footer, .site-foot .wrap { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s6); padding-bottom: var(--s7); color: var(--ink-muted); font-size: .8125rem; line-height: 1.5; }

/* Página pública */
.public-body { background: var(--page-bg, #eef2f5); }
.public-shell { display: flex; min-height: 100dvh; flex-direction: column; align-items: center; justify-content: center; gap: var(--s5); padding: var(--s7) var(--s5); color: var(--page-ink, var(--ink)); background: var(--page-bg, #eef2f5); background-image: var(--page-bg-image, none); background-position: center; background-size: cover; font-family: var(--page-font, var(--font)); }
.public-card { display: flex; width: 100%; max-width: 540px; flex-direction: column; align-items: center; gap: var(--s4); text-align: center; }
.public-profile-header { display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.public-avatar { width: 88px; height: 88px; object-fit: cover; border: 4px solid var(--page-surface, #fff); border-radius: 50%; box-shadow: var(--sh-sm); }
.avatar-fallback { display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--page-surface, #fff)); font-family: var(--page-font, var(--font)); font-size: 2rem; font-weight: 800; }
.avatar-fallback .person-icon { width: 42px; height: 42px; }
.public-profile-header h1 { margin: 0; color: var(--page-ink, var(--ink)); font-family: var(--page-font, var(--font)); font-size: 1.625rem; font-weight: 700; line-height: 1.2; }
.public-bio { max-width: 42ch; margin: 0; color: var(--page-muted); font-size: .9375rem; line-height: 1.55; text-wrap: pretty; }
.public-links { display: flex; width: 100%; flex-direction: column; gap: var(--s3); margin: var(--s2) 0 0; padding: 0; list-style: none; }
.public-link-item { display: flex; width: 100%; flex-direction: column; gap: var(--s2); }
.public-link { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: var(--s3); padding: 0 var(--s4); border: 1px solid var(--page-border, transparent); border-radius: var(--page-radius, 14px); color: var(--page-ink); background: var(--page-surface, #fff); box-shadow: var(--sh-sm); font-size: .9375rem; font-weight: 600; line-height: 1.35; transition: transform .15s, box-shadow .15s; }
.public-link:hover { color: var(--page-ink); text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh-lg); }
.public-link-with-image { min-height: 72px; padding: 7px 12px 7px 7px; }
.public-link-image { display: grid; width: 56px; height: 56px; flex: 0 0 56px; overflow: hidden; place-items: center; border-radius: max(8px, calc(var(--page-radius, 14px) / 2)); background: var(--page-bg, #eef2f5); }
.public-link-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.public-link-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.button-style-outline .public-link { border-width: 2px; background: transparent; }
.button-style-soft .public-link { border-color: transparent; background: color-mix(in srgb, var(--accent) 14%, var(--page-surface)); }
.empty-links { width: 100%; margin: 0; padding: var(--s5); border: 1px dashed var(--page-border, #c0ccd5); border-radius: var(--r-lg); color: var(--page-muted); font-size: .9375rem; line-height: 1.55; }
.public-link-preview { overflow: hidden; border: 1px solid var(--page-border, transparent); border-radius: var(--page-radius, 14px); color: var(--page-ink); background: var(--page-surface, #fff); box-shadow: var(--sh-sm); }
.public-preview-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--page-bg, #eef2f5); }
.public-preview-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.public-preview-play { position: absolute; top: 50%; left: 50%; display: grid; width: 46px; height: 34px; place-items: center; border-radius: 9px; color: #fff; background: #ff0033; font-size: .875rem; transform: translate(-50%, -50%); }
.public-link-preview-copy, .public-link-preview-social { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); color: var(--page-ink); }
.public-link-preview-copy:hover, .public-link-preview-social:hover { color: var(--page-ink); text-decoration: none; }
.public-link-preview-copy > span:first-child, .public-link-preview-social > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.public-link-preview-copy strong, .public-link-preview-social strong { font-size: .8125rem; }
.public-link-preview-copy small, .public-link-preview-social small { overflow: hidden; color: var(--page-muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.public-link-preview-social { justify-content: flex-start; }
.public-link-preview-social img { width: 44px; height: 44px; object-fit: contain; }
.public-map-frame { overflow: hidden; aspect-ratio: 16 / 9; background: var(--page-bg, #eef2f5); }
.public-map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.public-map-fallback { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); color: var(--page-muted); }
.public-map-fallback span { color: var(--accent); font-size: 2rem; }
.public-map-fallback small { font-size: .75rem; }
.public-footer { margin-top: 0; color: var(--page-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.public-footer a { color: inherit; }
.public-footer a:hover { color: inherit; text-decoration: none; }

/* 404 */
.not-found-page { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); padding: var(--s6) var(--s5); color: var(--ink); text-align: center; }
.not-found-mark { color: var(--ink); font-family: var(--display); font-size: clamp(4rem, 12vw, 6.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.not-found-page .eyebrow { order: 2; color: #4a5c6a; font-size: .6875rem; letter-spacing: .2em; }
.not-found-page .eyebrow::before { display: block; width: 72px; height: 6px; margin: 0 auto var(--s4); border-radius: 999px; background: var(--accent); content: ""; }
.not-found-page h1 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700; line-height: 1.2; }
.not-found-page p:not(.eyebrow) { max-width: 44ch; margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.not-found-page p strong { padding: 2px 6px; border-radius: 6px; color: var(--ink); background: #e3e9ed; font-family: ui-monospace, monospace; font-size: .9375rem; font-weight: 500; }

@media (min-width: 760px) {
  .marketing-links, .nav { display: flex; }
  .marketing-footer, .site-foot .wrap { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

@media (min-width: 900px) {
  .wrap, .container { padding-right: var(--s7); padding-left: var(--s7); }
  .hero { grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--s8); padding: var(--s8) var(--s7); }
  .trust-items, .strip .wrap { grid-template-columns: repeat(4, 1fr); padding-right: var(--s7); padding-left: var(--s7); }
  .business-callout, .band .wrap { grid-template-columns: 1.2fr auto; padding-right: var(--s7); padding-left: var(--s7); }
}

@media (max-width: 560px) {
  .button-block { width: 100%; }
  .hero-actions .button { width: 100%; }
  .hero-art { min-height: 330px; }
  .public-shell { padding: var(--s6) var(--s4); }
}

/* Aonde Tree landing refresh */
.landing-body { background: #f7f5ef; }
.landing-refresh { --land-ink: #103e45; --land-muted: #597077; --land-cream: #f7f5ef; --land-paper: #fffefa; --land-mint: #cfe7d8; --land-coral: #e97655; --land-sun: #f5c655; --land-line: rgba(16, 62, 69, .14); color: var(--land-ink); background: var(--land-cream); overflow: hidden; }
.landing-refresh .landing-head { border-bottom-color: rgba(16, 62, 69, .09); background: rgba(247, 245, 239, .88); backdrop-filter: blur(16px); }
.landing-refresh .brand, .landing-refresh .brand:hover { color: var(--land-ink); }
.landing-refresh .brand-mark { color: #fff; background: var(--land-ink); border-radius: 50% 45% 50% 42%; transform: rotate(-8deg); }
.landing-refresh .text-link:hover { color: var(--land-ink); }
.landing-nav-actions { display: flex; align-items: center; gap: 18px; }
.landing-refresh .nav-login { display: inline; color: var(--land-ink); font-size: .875rem; font-weight: 700; }
.landing-refresh .button-primary { color: #fff; background: var(--land-ink); border-color: var(--land-ink); box-shadow: 0 7px 0 rgba(16, 62, 69, .11); }
.landing-refresh .button-primary:hover { color: #fff; background: #0b3036; border-color: #0b3036; transform: translateY(-1px); }
.landing-hero { position: relative; padding: 52px 0 0; background: radial-gradient(circle at 82% 22%, rgba(245, 198, 85, .35), transparent 23%), linear-gradient(115deg, #f7f5ef 10%, #e8f2ea 100%); }
.landing-refresh .hero-grid { display: grid; align-items: center; gap: 40px; min-height: 600px; }
.landing-refresh .hero-copy { position: relative; z-index: 1; gap: 22px; max-width: 640px; }
.landing-refresh .eyebrow { color: #a8543e; font-size: .72rem; font-weight: 800; letter-spacing: .13em; }
.landing-refresh .hero-copy h1 { max-width: 10ch; color: var(--land-ink); font-family: "Manrope", var(--display); font-size: clamp(2.8rem, 7vw, 5.15rem); font-weight: 800; letter-spacing: -.065em; line-height: .98; }
.landing-refresh .hero-lead { max-width: 48ch; color: var(--land-muted); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.62; }
.landing-refresh .hero-actions { gap: 20px; }
.landing-refresh .hero-primary { min-height: 50px; padding: 0 22px; }
.landing-refresh .text-link { color: var(--land-ink); font-weight: 700; }
.landing-refresh .hero-note { color: var(--land-muted); font-weight: 600; }
.landing-refresh .status-dot { width: 9px; height: 9px; background: #58a474; box-shadow: 0 0 0 4px rgba(88, 164, 116, .16); }
.landing-art { isolation: isolate; min-height: 470px !important; overflow: visible; }
.art-orbit { position: absolute; z-index: -1; border: 1px solid rgba(16, 62, 69, .18); border-radius: 50%; }
.art-orbit-one { width: 410px; height: 410px; background: rgba(255,255,255,.26); transform: rotate(-15deg); }
.art-orbit-two { width: 300px; height: 470px; border-radius: 45%; border-color: rgba(233, 118, 85, .45); transform: rotate(34deg); }
.hero-profile-card { display: flex; width: min(308px, 77vw); flex-direction: column; align-items: center; gap: 12px; padding: 18px 17px 18px; border: 8px solid #123d43; border-radius: 38px; color: #163c43; background: #fefdf8; box-shadow: 17px 20px 0 rgba(16, 62, 69, .15), 0 22px 45px rgba(16, 62, 69, .18); transform: rotate(3.5deg); }
.hero-card-top { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-bottom: 4px; color: #a9bbb4; font-size: .82rem; letter-spacing: 1px; }
.hero-card-handle { width: 54px; height: 5px; margin-left: 32px; border-radius: 99px; background: #d7dfd7; }
.hero-avatar { display: grid; width: 75px; height: 75px; place-items: center; border-radius: 44% 56% 52% 48%; color: #fff; background: linear-gradient(145deg, var(--land-coral), #c45159); box-shadow: inset 0 0 0 5px rgba(255,255,255,.2); font-size: 1.8rem; transform: rotate(-8deg); }
.hero-profile-card strong { margin-top: 2px; font-family: "Manrope", var(--display); font-size: 1.08rem; letter-spacing: -.03em; }
.hero-profile-card small { max-width: 24ch; color: #71837d; font-size: .69rem; line-height: 1.35; text-align: center; }
.hero-page-link { display: flex; width: 100%; min-height: 45px; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid #dce5dc; border-radius: 11px; background: #fff; box-shadow: 0 2px 0 rgba(16,62,69,.04); font-size: .73rem; font-weight: 800; }
.hero-page-link b { margin-left: auto; color: var(--land-coral); font-size: .88rem; }
.link-symbol { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 7px; font-size: .83rem; }
.symbol-chat { color: #fff; background: #559c83; }.symbol-shop { color: #fff; background: #d87c5f; }.symbol-pin { color: #fff; background: #2a7885; }
.hero-card-brand { margin-top: 3px; color: #8b9a95; font-size: .56rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.art-tag, .art-note { position: absolute; z-index: 2; padding: 9px 13px; border-radius: 99px; font-size: .7rem; font-weight: 800; box-shadow: 0 8px 16px rgba(16,62,69,.1); }
.art-tag { color: #fff; background: var(--land-ink); }.art-tag-one { top: 9%; right: 3%; transform: rotate(8deg); }.art-tag-two { bottom: 14%; left: 1%; color: var(--land-ink); background: var(--land-sun); transform: rotate(-7deg); }
.art-note { display: flex; align-items: center; gap: 6px; background: #fffdf7; color: var(--land-ink); }.art-note span { color: var(--land-coral); font-size: 1rem; }.art-note-top { top: 25%; left: 0; transform: translateX(-8%); }.art-note-bottom { right: -2%; bottom: 6%; }
.landing-intro { padding: 110px 0 120px; background: var(--land-paper); }.intro-grid { display: grid; gap: 18px; max-width: 800px; }.intro-grid h2, .showcase-copy h2, .tools-heading h2, .faq-grid h2 { font-family: "Manrope", var(--display); font-size: clamp(2rem, 4.3vw, 3.65rem); font-weight: 800; letter-spacing: -.055em; line-height: 1.04; }.intro-grid > p:last-child { max-width: 58ch; color: var(--land-muted); font-size: 1.05rem; line-height: 1.6; }
.value-grid { display: grid; gap: 15px; margin-top: 52px; }.value-card { position: relative; display: flex; min-height: 265px; flex-direction: column; align-items: flex-start; justify-content: flex-end; overflow: hidden; padding: 25px; border: 1px solid var(--land-line); border-radius: 20px; background: #fff; }.value-card-main { color: #fff; background: var(--land-ink); }.value-card-warm { background: #f9e9ce; }.value-kicker { position: absolute; top: 24px; left: 25px; color: #829b95; font-family: ui-monospace, monospace; font-size: .75rem; font-weight: 700; }.value-card-main .value-kicker { color: #9cc8b7; }.value-card h3 { max-width: 15ch; margin-bottom: 8px; font-family: "Manrope", var(--display); font-size: 1.4rem; letter-spacing: -.04em; line-height: 1.08; }.value-card p { max-width: 31ch; color: var(--land-muted); font-size: .9rem; line-height: 1.5; }.value-card-main p { color: #c0d5cf; }
.mini-palette { position: absolute; top: 29px; right: 24px; display: grid; grid-template-columns: repeat(2, 33px); gap: 6px; transform: rotate(9deg); }.mini-palette span { display: block; width: 33px; height: 33px; border-radius: 10px 15px 9px 15px; background: #dff1e3; }.mini-palette span:nth-child(2){background:#e97655}.mini-palette span:nth-child(3){background:#f5c655}.mini-palette span:nth-child(4){background:#93c8c4}.mini-lines { position: absolute; top: 42px; left: 25px; display: grid; gap: 8px; }.mini-lines i { display:block; width: 118px; height: 12px; border-radius: 20px; background:#d9e7e1; }.mini-lines i:nth-child(2){width:82px;background:#f5c655}.mini-lines i:nth-child(3){width:100px;background:#dfe9e2}.mini-qr { position:absolute; top:27px; right:25px; display:grid; grid-template-columns:repeat(4,15px); gap:4px; padding:8px; border-radius:12px; background:#fffaf0; }.mini-qr i { display:block; width:15px; height:15px; background:#244f55; }.mini-qr i:nth-child(2),.mini-qr i:nth-child(4){background:#e97655}.mini-qr i:nth-child(3){background:#f5c655}
.showcase-section { padding: 108px 0; background: #d9ede3; }.showcase-section-alt { background: #f7f5ef; }.showcase-row { display: grid; align-items: center; gap: 55px; }.showcase-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }.showcase-copy h2 { max-width: 12ch; font-size: clamp(2.1rem, 4.2vw, 3.35rem); }.showcase-copy > p:not(.eyebrow) { max-width: 46ch; color: var(--land-muted); font-size: 1rem; line-height: 1.65; }.showcase-link { margin-top: 6px; }
.showcase-visual { position: relative; display: grid; min-height: 400px; place-items: center; }.public-preview-art { overflow: hidden; border-radius: 28px; background: #153f46; }.preview-cloud { position:absolute; border-radius:50%; filter: blur(.2px); }.cloud-one { top:-70px; right:-30px; width:260px; height:260px; background:#f2c657; }.cloud-two { bottom:-90px; left:-65px; width:260px; height:260px; background:#e7795b; }.preview-window { position: relative; z-index: 1; display: flex; width: min(270px, 70vw); flex-direction: column; gap: 11px; padding: 15px; border-radius: 21px; background: #faf8ef; box-shadow: 0 20px 0 rgba(7,32,37,.15), 0 25px 45px rgba(7,32,37,.28); }.preview-window-head { display:flex; gap:4px; }.preview-window-head span { width:7px; height:7px; border-radius:50%; background:#c8d5cc; }.preview-person { display:flex; flex-direction:column; align-items:center; gap:4px; margin:2px 0 6px; }.preview-person-avatar { display:grid; width:49px; height:49px; place-items:center; border-radius:50% 42% 48% 42%; color:#fff; background:#e7795b; font-family:"Manrope",sans-serif; font-weight:800; }.preview-person strong { font-family:"Manrope",sans-serif; font-size:.9rem; }.preview-person small { color:#768b84; font-size:.59rem; }.preview-link-row { display:flex; min-height:39px; align-items:center; gap:7px; padding:0 9px; border:1px solid #dce6dd; border-radius:9px; background:#fff; font-size:.64rem; font-weight:800; }.preview-link-row b { color:#e7795b; }.preview-link-row i { margin-left:auto; color:#e7795b; font-style:normal; }.floating-chip { position:absolute; z-index:2; right:7%; bottom:9%; padding:10px 13px; border-radius:12px; color:#123f46; background:#fff; box-shadow:0 10px 20px rgba(7,32,37,.18); font-size:.69rem; font-weight:800; transform:rotate(-5deg); }.floating-chip span { color:#e7795b; }
.dashboard-art { align-content:start; gap:9px; padding:25px; border-radius:28px; background:#fffefa; box-shadow:inset 0 0 0 1px rgba(16,62,69,.1); }.dashboard-card-top { display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:8px; font-family:"Manrope",sans-serif; font-size:1.1rem; font-weight:800; }.dashboard-card-top b { padding:5px 8px; border-radius:99px; color:#247153; background:#e2f1e8; font-family:var(--font); font-size:.62rem; }.dashboard-row { display:grid; grid-template-columns:18px 1fr 27px; width:100%; align-items:center; gap:9px; padding:10px; border:1px solid #dfebe3; border-radius:11px; background:#fff; }.dashboard-row strong,.dashboard-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.dashboard-row strong { font-size:.72rem; }.dashboard-row small { margin-top:2px; color:#81928c; font-size:.59rem; }.dash-drag { color:#aec0b7; }.dash-toggle { display:block; width:27px; height:16px; border-radius:99px; background:#63ad87; }.dash-toggle::after { display:block; width:12px; height:12px; margin:2px 2px 2px auto; border-radius:50%; background:white; content:""; }.dash-toggle-off { background:#c8d4cd; }.dash-toggle-off::after { margin-left:2px; margin-right:auto; }.dashboard-add { align-self:start; margin-top:4px; color:#1b595c; font-size:.68rem; font-weight:800; }.dashboard-add span { display:inline-grid; width:18px; height:18px; place-items:center; margin-right:3px; border-radius:50%; color:#fff; background:#1b595c; font-size:1rem; }.dashboard-accent-card { display:flex; width:100%; align-items:center; justify-content:space-between; margin-top:8px; padding:13px 15px; border-radius:13px; color:#fff; background:#e7795b; }.dashboard-accent-card span { display:grid; width:31px; height:31px; place-items:center; border-radius:50%; color:#e7795b; background:#fff5e8; }.dashboard-accent-card p { margin:0; font-family:"Manrope",sans-serif; font-size:.8rem; font-weight:800; line-height:1.2; text-align:right; }
.landing-tools { padding: 112px 0; background: #fffefa; }.tools-heading { display:flex; flex-direction:column; gap:17px; }.tools-heading h2 { max-width:19ch; }.tools-grid { display:grid; gap:15px; margin-top:52px; }.tool-card { display:flex; min-height:300px; flex-direction:column; justify-content:space-between; padding:24px; border-radius:20px; color:#153f46; }.tool-card h3 { max-width:17ch; margin:12px 0 8px; font-family:"Manrope",sans-serif; font-size:1.25rem; letter-spacing:-.04em; line-height:1.12; }.tool-card p { max-width:30ch; margin:0; color:#526d70; font-size:.88rem; line-height:1.5; }.tool-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:rgba(255,255,255,.7); font-weight:800; }.tool-card-qr { background:#f5c655; }.tool-card-theme { background:#d9ede3; }.tool-card-share { color:#fff; background:#173f46; }.tool-card-share p { color:#c7d9d8; }.tool-card-share .tool-icon { color:#173f46; }.qr-art { display:grid; grid-template-columns:repeat(6,17px); gap:4px; align-self:flex-end; padding:9px; border-radius:11px; background:#fffdf7; transform:rotate(-7deg); }.qr-art i { width:17px; height:17px; background:#173f46; }.qr-art i:nth-child(2),.qr-art i:nth-child(6){background:#e7795b}.qr-art i:nth-child(3){background:#f5c655}.theme-art { display:flex; align-items:end; gap:9px; align-self:flex-end; }.theme-art span { display:block; width:41px; height:68px; border-radius:28px 28px 9px 9px; background:#e7795b; transform:rotate(12deg); }.theme-art span:nth-child(2){height:91px;background:#1c676c;transform:translateY(-8px) rotate(-4deg)}.theme-art span:nth-child(3){height:52px;background:#f5c655;transform:rotate(18deg)}.share-art { display:flex; align-items:center; justify-content:space-between; align-self:stretch; padding:14px; border:1px solid rgba(255,255,255,.28); border-radius:12px; background:rgba(255,255,255,.08); font-size:.75rem; font-weight:800; }.share-art b { display:grid; width:29px; height:29px; place-items:center; border-radius:50%; color:#173f46; background:#f5c655; }
.landing-cta { overflow:hidden; padding:100px 0; color:#fff; background:#1a5359; }.cta-wrap { display:grid; align-items:center; gap:50px; }.cta-wrap > div:first-child { display:flex; flex-direction:column; align-items:flex-start; gap:19px; }.cta-wrap .eyebrow { color:#f5c655; }.cta-wrap h2 { margin:0; font-family:"Manrope",sans-serif; font-size:clamp(2.75rem,6vw,4.7rem); letter-spacing:-.065em; line-height:.96; }.cta-wrap p:not(.eyebrow) { max-width:43ch; color:#c2dbd7; line-height:1.6; }.landing-light-button { margin-top:5px; color:#173f46; background:#fffdf7; border-color:#fffdf7; box-shadow:none; }.landing-light-button:hover { color:#173f46; background:#f5c655; border-color:#f5c655; }.cta-art { position:relative; display:grid; min-height:260px; place-items:center; }.cta-orb { position:relative; z-index:2; display:grid; width:145px; height:145px; place-items:center; border:9px solid rgba(255,255,255,.16); border-radius:44% 56% 42% 58%; color:#173f46; background:#f5c655; box-shadow:0 0 0 13px rgba(245,198,85,.2); font-family:"Manrope",sans-serif; font-size:3.4rem; font-weight:800; transform:rotate(-10deg); }.cta-ray { position:absolute; width:240px; height:1px; background:rgba(255,255,255,.35); transform-origin:center; }.ray-one { transform:rotate(8deg); }.ray-two { transform:rotate(75deg); }.ray-three { transform:rotate(-48deg); }.cta-badge { position:absolute; z-index:3; right:5%; bottom:12%; padding:10px 13px; border-radius:11px; color:#173f46; background:#fffdf7; font-size:.75rem; font-weight:800; transform:rotate(8deg); }.cta-badge b { margin-left:7px; color:#e7795b; }
.landing-faq { padding:110px 0; background:#f7f5ef; }.faq-grid { display:grid; gap:45px; }.faq-grid > div:first-child { display:flex; flex-direction:column; align-items:flex-start; gap:18px; }.faq-grid h2 { max-width:12ch; font-size:clamp(2rem,4vw,3rem); }.faq-grid > div > p:not(.eyebrow) { max-width:42ch; color:var(--land-muted); line-height:1.6; }.faq-list { display:grid; gap:10px; }.faq-list details { border-bottom:1px solid var(--land-line); }.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; color:var(--land-ink); cursor:pointer; font-size:.98rem; font-weight:800; list-style:none; }.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span { display:grid; width:25px; height:25px; flex:0 0 auto; place-items:center; border-radius:50%; color:#fff; background:var(--land-ink); font-size:1.15rem; font-weight:500; }.faq-list details[open] summary span { background:var(--land-coral); transform:rotate(45deg); }.faq-list details p { max-width:52ch; padding:0 0 18px; color:var(--land-muted); font-size:.91rem; line-height:1.6; }
.landing-foot { color:#d7e6e1; background:#103e45; }.footer-grid { display:grid; gap:42px; padding-top:62px; padding-bottom:52px; }.landing-foot .footer-grid { display:grid; }.landing-foot .brand,.landing-foot .brand:hover { color:#fff; }.landing-foot .brand-mark { color:#103e45; background:#f5c655; }.footer-brand { display:flex; flex-direction:column; align-items:flex-start; gap:15px; }.footer-brand p { margin:0; color:#a9c1bc; font-size:.88rem; }.footer-links { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }.landing-foot .footer-links { grid-template-columns:1fr; }.footer-links div { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }.footer-links strong { color:#fff; font-size:.78rem; }.footer-links a { color:#b7cfca; font-size:.82rem; }.footer-links a:hover { color:#fff; }.footer-bottom { display:flex; flex-direction:column; gap:8px; padding-top:17px; padding-bottom:25px; border-top:1px solid rgba(255,255,255,.13); color:#98b5ae; font-size:.72rem; }
@media (min-width: 620px) { .landing-refresh .nav-login { display:inline; }.value-grid, .tools-grid { grid-template-columns:repeat(3,1fr); }.value-card { min-height:300px; }.footer-grid { grid-template-columns:1fr 1fr; align-items:start; }.footer-bottom { flex-direction:row; justify-content:space-between; } }
@media (min-width: 840px) { .landing-refresh .hero-grid { grid-template-columns:1.05fr .95fr; gap:60px; min-height:640px; }.showcase-row { grid-template-columns:1fr 1fr; gap:90px; }.showcase-row-reverse .showcase-copy { order:2; }.showcase-row-reverse .dashboard-art { order:1; }.showcase-visual { min-height:490px; }.cta-wrap { grid-template-columns:1fr .8fr; }.faq-grid { grid-template-columns:.85fr 1.15fr; gap:95px; }.footer-grid { grid-template-columns:1.4fr 1fr; } }
@media (max-width: 560px) { .landing-hero { padding-top:30px; }.landing-refresh .hero-grid { min-height:0; }.landing-refresh .hero-copy h1 { max-width:11ch; font-size:clamp(2.6rem,13vw,3.7rem); }.landing-refresh .hero-actions { align-items:stretch; }.landing-refresh .hero-actions .button { width:100%; }.landing-art { min-height:385px !important; transform:scale(.9); transform-origin:center top; margin:-8px 0 -37px; }.art-note-top { left:-8%; }.art-note-bottom { right:-4%; }.art-tag-one { right:-3%; }.landing-intro,.landing-tools,.landing-faq { padding:78px 0; }.showcase-section { padding:74px 0; }.showcase-visual { min-height:360px; }.dashboard-art { padding:18px; }.landing-cta { padding:76px 0; }.cta-art { min-height:190px; }.cta-orb { width:115px; height:115px; font-size:2.6rem; }.cta-badge { right:12%; }.footer-grid { padding-top:48px; } }

.hero-avatar { overflow: hidden; border: 4px solid #fff; box-shadow: 0 5px 12px rgba(94, 42, 42, .18); }
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; transform: rotate(8deg) scale(1.13); }
.preview-person-avatar { overflow: hidden; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(16, 62, 69, .15); }
.preview-person-avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); }