/* Landing page */
body.landing .top { background: color-mix(in srgb, var(--night) 90%, transparent); border-bottom-color: rgba(255,255,255,.07); }
body.landing .top .logo, body.landing .top .signin { color: #e9edf7 !important; }
@media (min-width: 961px) {
  body.landing .top .nav-top { color: #d6dbf3; }
  body.landing .top .nav-top:hover, body.landing .top .nav-group.open > .nav-top { color: #fff; background: rgba(255,255,255,.08); }
}
@media (min-width: 961px) { body.landing .top .theme-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); color: #d6dbf3; } body.landing .top .theme-btn:hover { color: #fff; border-color: rgba(255,255,255,.35); } }
body.landing .top .avatar { box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px rgba(240,140,62,.75); }
body.landing .top .pro-chip.on { background: rgba(255,255,255,.08); color: #e9edf7 !important; }
body.landing .top .pro-chip { color: #c9cfff !important; border-color: rgba(201,207,255,.45); }
body.landing .top .menu-btn span { background: #e9edf7; }
body.landing .top.open { background: var(--night); }
body.landing .top.open .nav { background: var(--card); }

.l-hero { position: relative; background: radial-gradient(1100px 520px at 72% -12%, rgba(86,100,230,.42), transparent 62%), radial-gradient(760px 420px at 50% 112%, rgba(240,140,62,.10), transparent 62%), var(--night); color: #eef0fb; padding: 76px 0 0; overflow: hidden; isolation: isolate; }
/* a faint lattice behind the hero, fading out towards the screenshot */
.l-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(201,207,255,.16) 1.1px, transparent 1.6px); background-size: 30px 30px; background-position: center top; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 40%, transparent 72%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 40%, transparent 72%); }
.l-hero-in { text-align: center; }
.l-kicker { display: inline-flex; align-items: center; gap: 9px; font: 600 12.5px Inter, sans-serif; text-transform: uppercase; letter-spacing: .14em; color: #f6b27a; margin: 0 0 18px; }
.l-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(240,140,62,.22); }
.l-kicker.dark { color: var(--accent-ink); margin-bottom: 10px; }
.l-kicker.dark::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.l-hero h1 { font: 700 clamp(38px, 6.2vw, 72px)/1.02 var(--display); letter-spacing: -0.035em; max-width: 900px; margin: 0 auto 22px; text-wrap: balance; }
.l-hero h1 em { font-style: normal; background: linear-gradient(100deg, #ffc28e 0%, #f08c3e 55%, #e3693a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l-lede { font-size: clamp(17px, 2vw, 19.5px); color: #c4c9e2; max-width: 690px; margin: 0 auto 30px; line-height: 1.6; text-wrap: pretty; }
.l-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn.ghost-light { background: rgba(255,255,255,.05); color: #eef0fb; border-color: rgba(255,255,255,.22); }
.btn.ghost-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.l-note { color: #8f96bb; font-size: 13.5px; margin: 18px 0 44px; letter-spacing: .01em; }
.l-shot { max-width: 1120px; margin: 0 auto; border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: 0 -12px 90px -12px rgba(86,100,230,.5), 0 0 0 1px rgba(255,255,255,.1); background: #fff; }
.l-shot img { display: block; width: 100%; height: auto; }
.l-fields { border-bottom: 1px solid var(--line); background: var(--card); }
.l-fields .wrap { display: flex; gap: 14px 24px; align-items: center; padding-block: 18px; flex-wrap: wrap; justify-content: center; }
.l-fields p { margin: 0; font: 600 12px Inter, sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }
.l-fields ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; justify-content: center; }
.l-fields li { font-size: 13.5px; font-weight: 500; color: var(--ink-2); padding: 2px 0; }
.l-fields li + li::before { content: '·'; color: var(--axis); margin-right: 14px; }
.l-fields ul { gap: 4px 14px; }
.sec-head.center { text-align: center; margin-inline: auto; }
.l-why { padding-top: 72px; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 980px; margin: 0 auto; }
.cmp-col { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; }
.cmp-col.good { border: 2px solid var(--brand); box-shadow: 0 20px 50px -30px rgba(42,91,214,.5); }
.cmp-col h3 { font-size: 18px; margin-bottom: 14px; }
.cmp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cmp li { padding-left: 28px; position: relative; color: var(--ink-2); font-size: 15px; }
.cmp ul.x li::before { content: '×'; position: absolute; left: 4px; top: -2px; color: var(--bad); font-weight: 700; font-size: 18px; }
.cmp ul.ok li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
#features { padding-top: 40px; }
.feat { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 56px; align-items: center; padding: 64px 0; border-bottom: 1px solid var(--line); }
.feat.rev { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); }
.feat.rev .feat-t { order: 2; }
.feat h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.025em; margin-bottom: 14px; }
.feat-t > p { color: var(--ink-2); font-size: 16.5px; line-height: 1.65; margin: 0 0 16px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ticks li { padding-left: 26px; position: relative; color: var(--ink-2); font-size: 14.5px; }
.ticks li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.feat-i { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 70px -40px rgba(16,24,40,.45); background: #fff; }
.feat-i img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .feat, .feat.rev { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 44px 0; } .feat.rev .feat-t { order: 0; } .cmp { grid-template-columns: minmax(0, 1fr); } }
.ex-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ex-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink) !important; text-decoration: none !important; transition: transform .15s, border-color .15s; }
.ex-card:hover { transform: translateY(-2px); border-color: var(--brand); }
.ex-card .fld { font: 600 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-ink); }
.ex-card b { font-size: 16px; font-family: var(--display); }
.ex-card span:not(.fld) { color: var(--ink-2); font-size: 14px; }
.ex-card i { font-style: normal; margin-top: auto; padding-top: 6px; color: var(--brand-ink); font-weight: 600; font-size: 13.5px; }
.cat { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 26px 36px; }
.cat h3 { font-size: 16px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--brand); display: inline-block; }
.cat ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; display: grid; gap: 5px; }

.early-tag { display: inline-block; font: 600 12px Inter, sans-serif; color: var(--accent-ink); background: var(--accent-soft); padding: 4px 11px; border-radius: 999px; margin-bottom: 12px; letter-spacing: .02em; }

/* Discover band */
.l-gen { position: relative; background: radial-gradient(900px 440px at 88% 0%, rgba(86,100,230,.36), transparent 60%), radial-gradient(800px 420px at 0% 100%, rgba(240,140,62,.12), transparent 60%), var(--night); color: #eef0fb; padding-block: 88px 76px; margin-top: 80px; isolation: isolate; overflow: hidden; }
.l-gen::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(201,207,255,.12) 1.1px, transparent 1.6px); background-size: 30px 30px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 45%); mask-image: linear-gradient(to bottom, #000, transparent 45%); }
.gen-head { max-width: 820px; margin-bottom: 36px; }
.gen-head h2 { font: 700 clamp(30px, 4vw, 48px)/1.06 var(--display); letter-spacing: -0.03em; margin-bottom: 16px; text-wrap: balance; }
.gen-head h2 em { font-style: normal; color: #f6b27a; }
.gen-head p:last-child { color: #c4c9e2; font-size: 17px; line-height: 1.65; margin: 0; text-wrap: pretty; }
.gen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gen-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 22px 22px 0; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.gen-n { font: 500 12px var(--mono); color: #f6b27a; letter-spacing: .08em; }
.gen-card h3 { font-size: 19px; margin: 8px 0 8px; color: #fff; }
.gen-card p { color: #b9bfdb; font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.gen-card img { display: block; width: calc(100% + 22px); max-width: none; height: auto; margin-top: auto; border-radius: 10px 0 0 0; border: 1px solid rgba(255,255,255,.12); border-right: 0; border-bottom: 0; }
.gen-foot { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; margin-top: 30px; }
.gen-foot .l-cta { justify-content: flex-start; }
.gen-note { color: #8f96bb; font-size: 13.5px; max-width: 560px; margin: 0; line-height: 1.55; }
@media (max-width: 960px) { .gen-grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; } .l-gen { padding-block: 64px 56px; } }

.ai-teaser-wrap .sec-head { max-width: 760px; }
.sec-head .l-kicker { font-size: 12.5px; margin-bottom: 10px; }
.ai-more { margin: 22px 0 0; }

/* What Lattent solves */
.solve { padding-top: 72px; }
.solve-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.solve-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); min-width: 0; }
.solve-card span { display: block; font: 600 11.5px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.sv-p { padding: 22px 22px 18px; }
.sv-p span { color: var(--ink-3); }
.sv-p h3 { font-size: 20px; margin-bottom: 8px; }
.sv-p p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.sv-s { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; background: linear-gradient(160deg, var(--brand-soft), color-mix(in srgb, var(--accent-soft) 60%, var(--card))); border-top: 1px solid var(--line); }
.sv-s span { color: var(--brand-ink); margin-bottom: 0; }
.sv-s p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.6; }
.sv-s a { margin-top: auto; padding-top: 4px; font-weight: 600; font-size: 14px; }
@media (max-width: 900px) { .solve-grid { grid-template-columns: minmax(0, 1fr); } }

/* data privacy band */
.l-priv { margin-top: 72px; padding-block: 64px; color: #eef0fb; background: radial-gradient(700px 320px at 90% 0%, rgba(86,100,230,.38), transparent 62%), radial-gradient(520px 280px at 0% 100%, rgba(240,140,62,.12), transparent 62%), var(--night); }
.pv-head { max-width: 760px; margin-bottom: 30px; }
.pv-head h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.03em; margin-bottom: 14px; }
.pv-head p { color: #c4c9e2; font-size: 17px; line-height: 1.65; margin: 0; }
.pv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pv-grid > div { padding: 20px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.pv-grid h3 { font-size: 16.5px; color: #fff; margin-bottom: 6px; }
.pv-grid p { margin: 0; color: #b9bfdb; font-size: 14px; line-height: 1.6; }
.pv-foot { margin: 22px 0 0; color: #8f96bb; font-size: 13.5px; }
.pv-foot a { color: #c9cfff; }
@media (max-width: 960px) { .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pv-grid { grid-template-columns: minmax(0, 1fr); } }