:root {
  --bg: #07101a;
  --panel: #0b1623;
  --panel-2: #0f2032;
  --text: #f6f9ff;
  --muted: #a9b8ca;
  --blue: #1688ff;
  --blue-2: #42b7ff;
  --line: rgba(255,255,255,.14);
  --shadow: 0 24px 70px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Montserrat', system-ui, sans-serif; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
.site-header { position: sticky; top: 0; z-index: 30; height: 78px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; background: rgba(5,12,20,.86); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.brand { display:flex; align-items:center; gap:16px; }
.brand-mark { font-weight:800; font-size:30px; letter-spacing:-3px; background: linear-gradient(135deg,#fff,#cbd4df 44%,var(--blue) 60%,#fff); -webkit-background-clip:text; color:transparent; text-shadow: 0 0 24px rgba(22,136,255,.25); }
.brand-mark.small { font-size:24px; }
.brand-name { font-size:12px; letter-spacing:5px; font-weight:600; }
.brand-name em { color: var(--blue); font-style:normal; }
.nav { display:flex; gap:28px; font-size:13px; }
.nav a:hover { color: var(--blue-2); }
.nav-toggle { display:none; background:none; color:white; border:0; font-size:24px; }
.hero { min-height: 720px; position:relative; overflow:hidden; display:grid; grid-template-columns: 1.25fr .75fr; align-items:center; padding: 110px 7vw 90px; background:
  radial-gradient(circle at 72% 30%, rgba(255,183,86,.25), transparent 18%),
  radial-gradient(circle at 82% 16%, rgba(22,136,255,.32), transparent 30%),
  linear-gradient(180deg, rgba(2,10,18,.12), rgba(2,10,18,.76)),
  linear-gradient(125deg, #050c14 0%, #0d1c2d 48%, #193d66 76%, #08121e 100%);
}
.hero:after { content:""; position:absolute; inset:auto 0 0; height:42%; background: linear-gradient(180deg, transparent, rgba(3,9,14,.95)), repeating-linear-gradient(165deg, transparent 0 36px, rgba(49,106,155,.08) 36px 39px); clip-path: polygon(0 44%,16% 27%,28% 38%,41% 18%,55% 46%,68% 22%,81% 42%,100% 12%,100% 100%,0 100%); }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,8,13,.78),rgba(2,8,13,.24) 55%,rgba(2,8,13,.08)); }
.hero-content, .hero-side { position:relative; z-index:2; }
.eyebrow { font-size:12px; letter-spacing:7px; color:#dfe9f7; margin:0 0 18px; }
h1 { font-size: clamp(46px, 6.2vw, 92px); line-height:.98; margin:0; max-width:940px; letter-spacing:-4px; }
h1 span { display:block; }
h1 .accent, h1 b { color: var(--blue); }
h1 b { font-weight:800; }
.hero-copy { max-width:620px; font-size:18px; line-height:1.65; color:#d6e0ec; margin:26px 0 32px; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 28px; border-radius:999px; font-weight:700; font-size:14px; }
.btn-primary { background:linear-gradient(135deg,#1aa8ff,#125fff); box-shadow:0 10px 35px rgba(22,136,255,.3); }
.btn-secondary { border:1px solid rgba(255,255,255,.78); background:rgba(4,11,18,.34); }
.hero-side { justify-self:end; display:flex; flex-direction:column; gap:10px; font-size:13px; letter-spacing:7px; color:#d9e5f3; padding-right:6vw; }
.hero-side strong { margin-top:12px; font-size:14px; line-height:1.9; }
.section { padding: 88px 7vw; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:42px; }
.section-heading h2, .story-section h2, .support-section h2, .contact-section h2 { font-size:clamp(32px,4vw,58px); margin:0; letter-spacing:-2px; }
.section-heading > p { max-width:400px; color:var(--muted); }
.apps-section { background:linear-gradient(180deg,#050c13,#08131f); }
.app-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.app-card { padding:28px; border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); border-radius:24px; min-height:370px; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:flex-start; box-shadow:var(--shadow); }
.app-card.featured { border-color:rgba(22,136,255,.5); }
.app-card h3 { margin:22px 0 8px; font-size:22px; }
.app-card h3 span { color:var(--blue-2); }
.app-card p { color:#d7e1ec; line-height:1.5; min-height:48px; }
.status { margin-top:auto; color:var(--blue-2); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.textlife-logo { width:170px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.text-box { width:100%; padding:12px 8px; border:3px solid #3db4ff; border-radius:14px; background:linear-gradient(180deg,#1c8eff,#0f55d4); font-size:33px; font-weight:800; box-shadow:0 0 28px rgba(22,136,255,.3); }
.element-row { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.element { position:relative; border-radius:10px; padding:10px 6px 8px; font-weight:800; font-size:34px; border:2px solid rgba(255,255,255,.75); }
.element small { position:absolute; top:5px; left:7px; font-size:9px; font-weight:600; }
.li { background:linear-gradient(135deg,#56de74,#27bb55); }
.fe { background:linear-gradient(135deg,#ff4ea8,#d40b67); }
.app-icon { width:132px; height:132px; border-radius:26px; display:flex; align-items:center; justify-content:center; font-size:60px; box-shadow:0 0 35px rgba(22,136,255,.18); }
.keyboard-icon { background:linear-gradient(145deg,#1bc4ff,#0c75d8); color:#06101a; flex-direction:column; font-size:24px; gap:0; letter-spacing:2px; }
.heart-icon { background:radial-gradient(circle,#ff5fcf,#8e0b80 60%,#19051b); color:#ff72da; text-shadow:0 0 22px #ff46cc; }
.game-icon { background:linear-gradient(145deg,#258cff,#0c41bd); }
.story-section { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; background:linear-gradient(135deg,#0b1622,#07101a); }
.story-copy p:not(.eyebrow) { color:var(--muted); line-height:1.8; max-width:760px; }
.values-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:center; }
.values-grid div { border:1px solid var(--line); border-radius:20px; padding:28px; background:rgba(255,255,255,.025); }
.values-grid strong { display:block; color:var(--blue); font-size:30px; margin-bottom:12px; }
.pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding-top:0; padding-bottom:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pillar { padding:48px 28px; border-right:1px solid var(--line); }
.pillar:last-child { border-right:0; }
.pillar > span { color:var(--blue-2); font-size:28px; }
.pillar h3 { margin:14px 0 8px; }
.pillar p { color:var(--muted); line-height:1.5; }
.support-section, .contact-section { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.support-section { background:linear-gradient(135deg,#0b1725,#102a45); }
.support-section p { color:#c7d4e3; max-width:760px; line-height:1.7; }
.contact-section { background:#050b11; }
.contact-card { max-width:520px; width:100%; border:1px solid var(--line); border-radius:22px; padding:28px; background:rgba(255,255,255,.025); }
.contact-card a { color:var(--blue-2); font-weight:700; font-size:20px; }
.contact-card small { display:block; color:var(--muted); margin-top:16px; line-height:1.5; }
footer { padding:44px 7vw; display:grid; grid-template-columns:1fr auto; gap:25px; align-items:center; border-top:1px solid var(--line); background:#03080d; }
.footer-brand { display:flex; gap:16px; align-items:center; }
.footer-brand strong { letter-spacing:4px; font-size:12px; }
.footer-brand p { color:var(--muted); font-size:12px; margin:6px 0 0; }
.footer-brand p span { color:var(--blue-2); }
.footer-links { display:flex; gap:20px; font-size:12px; }
.copyright { grid-column:1/-1; color:#6f8093; font-size:11px; margin:0; }
@media (max-width: 980px) {
  .nav-toggle { display:block; }
  .nav { display:none; position:absolute; top:78px; left:0; right:0; padding:18px 5vw 26px; flex-direction:column; background:#07101a; border-bottom:1px solid var(--line); }
  .nav.open { display:flex; }
  .hero { grid-template-columns:1fr; min-height:760px; padding-top:90px; }
  .hero-side { justify-self:start; margin-top:50px; padding:0; }
  .app-grid, .pillars { grid-template-columns:1fr 1fr; }
  .story-section { grid-template-columns:1fr; }
  .support-section, .contact-section { align-items:flex-start; flex-direction:column; }
  .pillars .pillar:nth-child(2) { border-right:0; }
}
@media (max-width: 620px) {
  .site-header { height:68px; padding:0 20px; }
  .brand-name { display:none; }
  .nav { top:68px; }
  .hero { min-height:700px; padding:78px 22px 70px; }
  h1 { font-size:47px; letter-spacing:-2.6px; }
  .hero-copy { font-size:16px; }
  .hero-side { font-size:10px; letter-spacing:5px; }
  .section { padding:70px 22px; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .app-grid, .pillars { grid-template-columns:1fr; }
  .pillar { border-right:0; border-bottom:1px solid var(--line); }
  .values-grid { grid-template-columns:1fr 1fr; }
  footer { grid-template-columns:1fr; }
  .footer-links { flex-wrap:wrap; }
}

/* Launch-ready multipage additions */
.app-card { color: var(--text); }
.page-hero { min-height:520px; padding:110px 7vw 80px; display:flex; flex-direction:column; justify-content:center; background:radial-gradient(circle at 80% 20%,rgba(22,136,255,.28),transparent 28%),linear-gradient(135deg,#050c14,#0e2238 68%,#07101a); border-bottom:1px solid var(--line); }
.page-hero.compact { min-height:390px; }
.page-title { font-size:clamp(46px,7vw,88px); letter-spacing:-4px; margin:0; line-height:1; }
.lead { font-size:clamp(20px,2.4vw,32px); color:#d8e7f7; margin:22px 0 0; }
.page-copy { max-width:720px; color:var(--muted); line-height:1.8; font-size:17px; }
.product-hero-grid { display:grid; grid-template-columns:260px 1fr; align-items:center; gap:70px; max-width:1100px; }
.textlife-logo.large { width:220px; }
.product-icon { width:180px; height:180px; font-size:34px; }
.accent-text { color:var(--blue-2); }
.disabled { opacity:.72; cursor:default; }
.detail-grid { display:grid; grid-template-columns:1.4fr .7fr; gap:70px; align-items:start; }
.detail-grid h2,.prose h2,.support-cards h2 { font-size:clamp(28px,3vw,44px); margin:0 0 18px; letter-spacing:-1.4px; }
.detail-grid > div > p:not(.eyebrow),.prose p { color:var(--muted); line-height:1.85; max-width:850px; }
.info-card { display:block; border:1px solid var(--line); border-radius:22px; padding:30px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); box-shadow:var(--shadow); }
.info-card strong { color:var(--blue-2); font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.info-card p { color:var(--muted); line-height:1.65; }
.info-card a,.prose a { color:var(--blue-2); font-weight:650; }
.support-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.support-cards .info-card { min-height:240px; }
.support-cards .info-card > span { color:var(--blue-2); font-weight:700; }
.prose { max-width:1050px; }
.prose h2 { margin-top:42px; }
@media(max-width:800px){.product-hero-grid,.detail-grid,.support-cards{grid-template-columns:1fr}.product-hero-grid{gap:38px}.page-hero{padding:90px 22px 65px}.page-title{letter-spacing:-2.5px}.textlife-logo.large{width:190px}}