@import "tailwindcss";

@font-face {
  font-family:"Aileron";
  src:url("/fonts/Aileron-Regular-400.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:"Aileron";
  src:url("/fonts/Aileron-Bold-700.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

:root { --red:#e53935; --navy:#3c3b6e; --blue:#1e4fa8; --white:#fff; --ink:#23233b; --muted:#62647a; --line:#dfe2ec; --soft:#f4f5f9; --font:"Aileron", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; background:var(--white); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.65; }
a { color:inherit; text-decoration:none; }
button, a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #1e4fa8; outline-offset:2px; box-shadow:0 0 0 2px #fff; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:100; padding:.75rem 1rem; background:var(--white); color:var(--navy); border:2px solid var(--navy); font-weight:700; }
.skip-link:focus { top:1rem; }
.shell { width:min(1180px, calc(100% - 3rem)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:50; height:82px; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:0 max(1.5rem, calc((100vw - 1180px)/2)); background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.brand-link { flex:none; }
.brand-art { display:block; width:210px; height:56px; object-fit:contain; object-position:left center; }
.brand-art-compact { width:52px; }
nav { display:flex; align-items:center; gap:1.5rem; font-size:.9rem; font-weight:700; }
nav > a:not(.button) { padding:.5rem 0; border-bottom:2px solid transparent; }
nav > a:not(.button):hover { color:var(--blue); border-color:var(--red); }
.menu-toggle { display:none; border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--navy); padding:.65rem .8rem; font:700 .85rem var(--font); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:50px; padding:.78rem 1.35rem; border:2px solid transparent; border-radius:7px; font-weight:700; line-height:1.15; transition:transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-small { min-height:42px; padding:.65rem 1.1rem; }
.button-navy { background:var(--navy); color:var(--white); }
.button-red { background:#c92724; color:#fff; }
.button-red:hover { background:#c92724; }
.button-ghost { border-color:rgba(255,255,255,.62); color:var(--white); }
.hero { position:relative; min-height:720px; display:flex; align-items:center; overflow:hidden; background:var(--navy); color:var(--white); }
.hero-photo { position:absolute; inset:0; background:linear-gradient(90deg, rgba(23,23,58,.92) 0%, rgba(60,59,110,.8) 48%, rgba(60,59,110,.44) 100%), radial-gradient(circle at 75% 34%, rgba(255,255,255,.14), transparent 28%), linear-gradient(135deg, #202046, #565582); }
.hero-content { position:relative; padding-block:7rem; }
.eyebrow,.kicker { margin:0 0 1.1rem; color:var(--red); font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.hero .eyebrow { color:#fff; opacity:.78; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { color:var(--navy); line-height:1.02; letter-spacing:-.035em; }
h1 { max-width:850px; margin-bottom:1.5rem; color:var(--white); font-size:clamp(3.5rem, 7vw, 6.4rem); font-weight:700; text-transform:uppercase; }
h1 span { color:var(--red); }
h2 { max-width:850px; margin-bottom:1.5rem; font-size:clamp(2.2rem, 4.5vw, 4.3rem); font-weight:700; }
h3 { font-size:1.35rem; }
.hero-copy { max-width:650px; margin-bottom:2rem; font-size:1.3rem; line-height:1.55; }
.button-row { display:flex; flex-wrap:wrap; gap:.9rem; }
.section { padding:clamp(5rem, 9vw, 8rem) 0; }
.section-light { background:var(--white); }
.split { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(3rem, 7vw, 7rem); }
.copy-column p { max-width:640px; font-size:1.06rem; }
.photo-placeholder { min-height:590px; display:flex; align-items:flex-end; padding:1.5rem; border-radius:18px; overflow:hidden; background:linear-gradient(25deg, rgba(60,59,110,.9), rgba(30,79,168,.28)), repeating-linear-gradient(120deg,#d8dae5 0 32px,#f0f1f6 32px 64px); color:rgba(255,255,255,.8); box-shadow:0 24px 60px rgba(43,44,73,.15); }
.photo-placeholder span { font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.section-navy { position:relative; overflow:hidden; background:var(--navy); color:rgba(255,255,255,.88); }
.section-navy::before { content:""; position:absolute; width:520px; height:520px; right:-180px; top:-240px; border:1px solid rgba(255,255,255,.12); border-radius:50%; }
.section-navy h2,.section-navy h3 { color:var(--white); }
.kicker-light { color:#ff8c88; }
.building-intro { max-width:760px; font-size:1.08rem; }
.platform-map { display:grid; grid-template-columns:1fr 80px 1.2fr; align-items:center; margin-top:3.2rem; padding:2rem; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(255,255,255,.045); }
.platform { text-align:center; }
.platform-live { display:flex; align-items:center; gap:1.4rem; text-align:left; }
.app-icon-art { flex:none; width:110px; height:110px; border-radius:26px; box-shadow:0 14px 30px rgba(0,0,0,.18); }
.platform-connector { height:1px; background:rgba(255,255,255,.35); }
.platform-coming { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.device { width:130px; height:190px; display:grid; place-items:center; margin:0 auto 1rem; border:2px solid rgba(255,255,255,.24); border-radius:30px; background:rgba(30,79,168,.25); }
.device img { display:block; width:62px; height:62px; border-radius:15px; }
.status { display:inline-block; margin:0 0 .8rem; padding:.25rem .65rem; border:1px solid rgba(255,255,255,.2); border-radius:99px; color:rgba(255,255,255,.8); font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.status-live { background:var(--red); border-color:var(--red); color:var(--white); }
.platform h3 { margin-bottom:.35rem; }
.platform p:last-child { margin-bottom:0; color:rgba(255,255,255,.68); font-size:.9rem; }
.section-intro { margin-bottom:3rem; font-size:1.2rem; }
.audience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.audience-card { padding:2rem; border:1px solid var(--line); border-radius:14px; background:var(--white); transition:border .2s ease, transform .2s ease, box-shadow .2s ease; }
.audience-card:hover { transform:translateY(-4px); border-color:#b6c5e4; box-shadow:0 18px 40px rgba(60,59,110,.08); }
.card-index { display:inline-block; margin-bottom:1.4rem; color:var(--blue); font-size:.72rem; font-weight:700; letter-spacing:.12em; }
.audience-card h3 { margin-bottom:.9rem; text-transform:uppercase; }
.audience-card p { margin:0; color:var(--muted); font-size:.96rem; }
.audience-card strong { color:var(--ink); }
.follow-section { background:var(--soft); }
.follow-layout { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:6rem; }
.follow-layout p { max-width:550px; }
.social-list { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.social-placeholder { display:grid; grid-template-columns:40px 1fr; align-items:center; min-height:88px; padding:1.1rem; border:1px solid var(--line); border-radius:12px; background:var(--white); color:var(--navy); font-weight:700; }
.social-placeholder b { grid-row:1/3; color:var(--red); font-size:.72rem; }
.social-placeholder small { color:var(--muted); font-size:.65rem; font-weight:400; }
.support-section { border-top:1px solid var(--line); }
.support-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6rem; }
.support-layout > div:first-child p { max-width:560px; }
.support-action { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; padding-left:2rem; border-left:4px solid var(--red); }
.support-action small { max-width:390px; color:var(--muted); }
.support-action em { width:100%; color:#8b8c9b; font-size:.72rem; font-style:normal; }
.button-disabled { cursor:not-allowed; opacity:.72; }
.contact-section { background:linear-gradient(90deg, #fff 0 63%, #f5f7fb 63%); }
.contact-layout { display:grid; grid-template-columns:1fr .72fr; align-items:center; gap:7rem; }
.contact-layout > div > p { max-width:620px; font-size:1.1rem; }
.email-link { display:block; width:max-content; margin-top:1rem; color:var(--blue); font-size:.9rem; text-decoration:underline; text-underline-offset:3px; }
.code-note { display:flex; gap:1.3rem; padding:1.5rem 0; border-block:1px solid #cfd8e9; }
.code-note > span { color:var(--blue); font-weight:700; }
.code-note h3 { margin-bottom:.65rem; color:var(--blue); }
.code-note p { margin:0; color:var(--muted); }
.site-footer { padding:4.5rem 0 1.5rem; background:var(--soft); border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:4rem; }
.footer-grid > div:first-child > p { margin-top:1.5rem; color:var(--navy); font-weight:700; }
.footer-grid h2 { margin-bottom:1rem; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; }
.footer-grid a,.footer-grid div > span { display:block; margin:.5rem 0; color:var(--muted); font-size:.86rem; }
.footer-grid small { color:#9697a6; }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; margin-top:4rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; }
.footer-bottom > span:last-child { display:flex; gap:1.5rem; }

@media (max-width:1000px) {
  .site-header { height:72px; }
  .menu-toggle { display:block; }
  nav { position:absolute; left:1rem; right:1rem; top:calc(100% + .5rem); display:none; align-items:stretch; flex-direction:column; gap:0; padding:.8rem; border:1px solid var(--line); border-radius:12px; background:var(--white); box-shadow:0 18px 50px rgba(30,30,55,.18); }
  nav.nav-open { display:flex; }
  nav > a:not(.button) { padding:.75rem; }
  nav .button { margin-top:.5rem; }
  .split,.follow-layout,.support-layout,.contact-layout { grid-template-columns:1fr; gap:3rem; }
  .photo-placeholder { min-height:460px; }
  .audience-grid { grid-template-columns:1fr 1fr; }
  .contact-section { background:var(--white); }
  .platform-map { grid-template-columns:1fr; gap:2rem; }
  .platform-connector { width:1px; height:40px; margin:auto; }
}
@media (max-width:680px) {
  .shell { width:min(100% - 2rem, 1180px); }
  .site-header { padding-inline:1rem; }
  .brand-art { width:164px; height:48px; }
  .hero { min-height:670px; }
  .hero-content { padding-block:5rem; }
  h1 { font-size:clamp(3rem, 16vw, 4.6rem); }
  h2 { font-size:clamp(2.1rem, 11vw, 3.1rem); }
  .hero-copy { font-size:1.08rem; }
  .button-row { align-items:stretch; flex-direction:column; }
  .button-row .button { width:100%; }
  .section { padding:4.5rem 0; }
  .photo-placeholder { min-height:360px; }
  .platform-map { padding:1.2rem; }
  .platform-live { align-items:flex-start; flex-direction:column; text-align:center; }
  .platform-live > div:last-child { width:100%; }
  .platform-coming { grid-template-columns:1fr; }
  .audience-grid,.social-list { grid-template-columns:1fr; }
  .audience-card { padding:1.5rem; }
  .support-action { padding-left:1.2rem; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { align-items:flex-start; flex-direction:column; }
  .footer-bottom > span:last-child { flex-direction:column; gap:.3rem; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }