@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --navy:#101827; --red:#ee1f2d; --ink:#172033; --muted:#647087; --line:#e7eaf0; --soft:#f5f7fb; }
* { box-sizing:border-box; } html { max-width:100%; overflow-x:clip; scroll-behavior:smooth; } body { max-width:100%; margin:0; overflow-x:clip; background:#fff; color:var(--ink); font-family:Arial,Helvetica,sans-serif; } #root { width:100%; max-width:100%; overflow-x:clip; } a { color:inherit; text-decoration:none; }
.shell { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }.nav-wrap { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(16px); border-bottom:1px solid rgba(231,234,240,.85); }.nav { height:82px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:10px; min-width:212px; }.brand-mark { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:var(--navy); color:white; }.brand-mark .signal { position:absolute; left:3px; font-size:14px; color:var(--red); letter-spacing:-5px; transform:scaleX(.65); }.brand-mark .play { font-size:17px; color:var(--red); transform:translateX(4px); }.brand-mark .live-dot { width:5px; height:5px; border-radius:50%; background:var(--red); position:absolute; top:7px; right:7px; }.brand>span:last-child { display:grid; grid-template-columns:auto auto; font-size:20px; line-height:18px; letter-spacing:-.5px; }.brand b { color:var(--navy); }.brand strong { color:var(--red); }.brand small { grid-column:1/3; font-size:6px; letter-spacing:2.2px; color:#7a8498; margin-top:4px; }
.nav-links { display:flex; gap:32px; color:#515c70; font-size:14px; font-weight:600; }.nav-links a:hover { color:var(--red); }.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 23px; border-radius:12px; background:var(--red); color:#fff; font-weight:700; box-shadow:0 11px 24px rgba(238,31,45,.22); transition:.2s ease; }.button:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(238,31,45,.28); }.button-small { min-height:42px; padding:0 17px; border-radius:10px; font-size:13px; }
.hero { min-height:680px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:65px; padding-block:80px 68px; }.eyebrow { display:inline-flex; align-items:center; gap:9px; padding:9px 13px; border:1px solid #ffd4d8; background:#fff6f7; border-radius:99px; color:#b91d29; font-size:12px; font-weight:700; }.pulse { width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px rgba(238,31,45,.12); } h1 { margin:24px 0 20px; max-width:650px; font-size:64px; line-height:1.03; letter-spacing:-3.8px; color:var(--navy); } h1 em { color:var(--red); font-style:normal; }.hero-lead { max-width:590px; color:var(--muted); font-size:18px; line-height:1.7; }.hero-actions { display:flex; align-items:center; gap:26px; margin-top:32px; }.text-link { font-size:14px; font-weight:700; color:#334057; }.text-link span { color:var(--red); margin-left:6px; }.trust-list { display:flex; flex-wrap:wrap; gap:18px; padding:0; margin:30px 0 0; list-style:none; color:#626d80; font-size:12px; }.trust-list li { display:flex; align-items:center; gap:6px; }.trust-list svg { color:var(--red); }
.hero-visual { position:relative; min-width:0; }.dashboard-card { position:relative; z-index:3; padding:0 18px 18px; border:1px solid #dfe3ea; border-radius:20px; background:#fff; box-shadow:0 35px 80px rgba(16,24,39,.18); transform:rotate(1deg); }.browser-bar { height:40px; display:flex; align-items:center; gap:5px; color:#8a94a6; font-size:8px; }.browser-bar i { width:6px; height:6px; border-radius:50%; background:#d8dde6; }.browser-bar i:first-child { background:#ff6b72; }.browser-bar span { margin:auto; padding:5px 32px; border-radius:20px; background:#f4f6f9; }.event-head { display:flex; align-items:center; gap:11px; padding:11px 5px 14px; }.mini-logo { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--navy); color:#fff; font-weight:800; font-size:11px; }.event-head small { color:var(--red); font-weight:800; font-size:6px; letter-spacing:1.4px; }.event-head h3 { margin:3px 0 0; font-size:12px; color:var(--navy); }.live-pill { margin-left:auto; color:var(--red); background:#fff0f1; padding:6px 8px; border-radius:7px; font-size:7px; font-weight:800; }
.event-grid { display:grid; grid-template-columns:1.65fr .85fr; gap:10px; }.video-frame { min-height:230px; border-radius:12px; background:linear-gradient(140deg,#111827,#26344e); position:relative; overflow:hidden; display:grid; place-items:center; }.video-frame:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.18),transparent 42%); }.stage-light { position:absolute; width:240px; height:240px; border-radius:50%; border:1px solid rgba(255,255,255,.08); box-shadow:0 0 50px rgba(238,31,45,.18); }.speaker { position:absolute; bottom:0; left:40%; width:84px; height:145px; }.speaker-head { display:block; width:42px; height:46px; margin:auto; border-radius:50%; background:#aab3c1; }.speaker-body { display:block; width:84px; height:105px; margin-top:-2px; border-radius:36px 36px 0 0; background:linear-gradient(#657187,#303b50); }.video-frame button { position:relative; z-index:2; width:46px; height:46px; padding-left:5px; border:0; border-radius:50%; background:rgba(238,31,45,.94); color:white; cursor:pointer; }.video-caption { position:absolute; z-index:2; left:14px; bottom:12px; display:grid; color:white; font-size:8px; }.video-caption span { color:#b9c1cf; margin-top:3px; font-size:6px; }
.side-panel { border:1px solid #e9ecf1; border-radius:12px; padding:11px; }.tabs { display:flex; gap:18px; padding-bottom:10px; border-bottom:1px solid #edf0f4; font-size:8px; }.tabs b { color:var(--red); }.tabs span { color:#8791a3; }.question { display:flex; gap:7px; padding:11px 0; border-bottom:1px solid #f0f2f5; }.question i { flex:0 0 22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#fff0f1; color:var(--red); font-size:6px; font-style:normal; font-weight:800; }.question p { display:grid; gap:4px; margin:0; font-size:6px; }.question span { color:#687387; line-height:1.5; }.ask { display:flex; justify-content:space-between; margin-top:25px; padding:8px; border:1px solid #e7eaf0; border-radius:7px; color:#9aa2b0; font-size:6px; }.ask span { width:16px; height:16px; margin:-4px; display:grid; place-items:center; border-radius:5px; background:var(--red); color:#fff; }.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }.stats-row div { display:grid; gap:3px; padding:10px 11px; border-radius:9px; background:#f6f8fb; }.stats-row b { color:var(--navy); font-size:11px; }.stats-row span { color:#7d8798; font-size:6px; }
.float-card { position:absolute; z-index:5; display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid #e4e8ef; border-radius:12px; background:#fff; box-shadow:0 13px 35px rgba(17,24,39,.16); }.float-card>span { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#eafff3; color:#0d9d59; font-weight:900; }.float-card p { display:grid; gap:3px; margin:0; font-size:8px; }.float-card small { color:#8993a4; font-size:6px; }.float-one { left:-28px; bottom:58px; }.float-two { right:-25px; top:68px; }.float-two>span { background:#fff0f1; color:var(--red); }.orbit { position:absolute; border-radius:50%; background:#fff1f2; }.orbit-one { width:190px; height:190px; right:-40px; top:-50px; }.orbit-two { width:120px; height:120px; left:-35px; bottom:-35px; background:#eef2f8; }
.logo-strip { border-block:1px solid var(--line); background:#fbfcfe; }.proof-row { min-height:126px; display:flex; align-items:center; justify-content:space-between; gap:35px; }.proof-row p { width:200px; margin:0; color:#7c8698; font-size:11px; line-height:1.5; }.proof-row div { flex:1; display:flex; justify-content:space-between; gap:28px; color:#9aa3b2; font-size:11px; font-weight:800; letter-spacing:.7px; }
.section { padding:105px 0; }.section-head { margin-bottom:55px; }.section-head.centered { max-width:760px; margin:0 auto 55px; text-align:center; }.section-label { display:block; margin-bottom:15px; color:var(--red); font-size:11px; font-weight:800; letter-spacing:2px; }.section-label.light { color:#ff8c95; }.section-head h2,.unique-copy h2,.faq-grid h2,.contact-copy h2 { margin:0; color:var(--navy); font-size:44px; line-height:1.12; letter-spacing:-2.2px; }.section-head h2 em { color:var(--red); font-style:normal; }.section-head p { max-width:620px; margin:18px auto 0; color:var(--muted); font-size:16px; line-height:1.7; }.section-head.split { display:flex; align-items:end; justify-content:space-between; gap:60px; }.section-head.split p { max-width:460px; margin:0; }.intro { background:linear-gradient(#fff,#fafbfe); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.feature-card { min-height:345px; position:relative; overflow:hidden; padding:28px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 7px 25px rgba(17,24,39,.04); }.feature-icon { width:42px; height:42px; display:grid; place-items:center; margin-bottom:25px; border-radius:11px; background:#fff0f1; color:var(--red); font-weight:900; }.feature-card h3 { margin:0 0 10px; color:var(--navy); font-size:19px; }.feature-card>p { max-width:440px; margin:0; color:var(--muted); font-size:13px; line-height:1.65; }.feature-card>ul { display:grid; gap:12px; padding:0; margin:30px 0 0; list-style:none; color:#596579; font-size:12px; }.feature-card>ul li { display:flex; align-items:center; gap:8px; }.feature-card>ul svg { color:#10a360; }.stream-status { display:flex; justify-content:space-between; align-items:center; margin-top:50px; padding:14px; border-radius:10px; background:#f6f8fb; color:var(--navy); font-size:9px; }.stream-status span { color:#667186; }.stream-status i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#11b36b; }.poll-mini { display:grid; gap:12px; margin-top:28px; color:#556074; font-size:9px; }.poll-mini>b { color:var(--navy); }.poll-mini span { display:grid; grid-template-columns:1fr auto; position:relative; padding-bottom:5px; border-bottom:5px solid #edf0f4; }.poll-mini span i { height:5px; position:absolute; left:0; bottom:-5px; border-radius:4px; background:var(--red); }.poll-mini em { color:#8a94a5; font-style:normal; }.dashboard-mini { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:45px; }.dashboard-mini span { display:grid; gap:5px; padding:14px; border-radius:10px; background:#f6f8fb; }.dashboard-mini b { color:var(--navy); font-size:18px; }.dashboard-mini small { color:#7f8999; font-size:7px; }.file-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:55px; }.file-pills span { padding:8px 11px; border-radius:8px; background:#f1f4f8; color:#687387; font-size:8px; font-weight:800; }.file-pills span:last-child { color:var(--red); background:#fff0f1; }
.unique-section { overflow:hidden; color:#fff; background:var(--navy); }.unique-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:100px; }.unique-copy h2 { color:#fff; font-size:50px; }.unique-copy>p { max-width:540px; color:#aeb8c8; font-size:16px; line-height:1.7; }.journey-list { display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; margin-top:40px; }.journey-list>div { display:flex; gap:13px; align-items:center; }.journey-list>div>b { color:#526077; font-size:12px; }.journey-list span { display:grid; gap:5px; }.journey-list strong { font-size:13px; }.journey-list small { color:#8591a4; font-size:9px; }.phone-wrap { position:relative; height:550px; display:grid; place-items:center; }.phone-wrap:before { content:""; width:520px; height:520px; position:absolute; border-radius:50%; background:radial-gradient(circle,rgba(238,31,45,.26),transparent 66%); }.phone { width:260px; height:535px; position:relative; z-index:2; overflow:hidden; padding:10px; border:7px solid #283448; border-radius:37px; background:#fff; color:var(--ink); box-shadow:0 35px 70px rgba(0,0,0,.35); transform:rotate(3deg); }.phone-notch { width:85px; height:19px; position:absolute; z-index:3; top:7px; left:50%; transform:translateX(-50%); border-radius:0 0 12px 12px; background:#283448; }.mobile-banner { min-height:180px; display:flex; flex-direction:column; align-items:center; padding:46px 20px 20px; border-radius:24px 24px 9px 9px; color:#fff; text-align:center; background:linear-gradient(135deg,#2b3b58,var(--navy)); }.mobile-banner span { color:#ff8189; font-size:6px; letter-spacing:1.5px; }.mobile-banner b { margin-top:16px; font-size:17px; line-height:1.25; }.mobile-banner small { margin-top:10px; color:#b8c0cc; font-size:7px; }.mobile-count { display:flex; justify-content:center; gap:22px; padding:14px; }.mobile-count span { display:grid; text-align:center; }.mobile-count b { color:var(--navy); font-size:14px; }.mobile-count small { color:#929aa7; font-size:6px; }.mobile-form { display:grid; gap:9px; padding:16px; border-top:1px solid #edf0f4; }.mobile-form>b { font-size:11px; }.mobile-form span { padding:10px; border:1px solid #e6e9ee; border-radius:7px; color:#9aa2ae; font-size:7px; }.mobile-form button { padding:11px; border:0; border-radius:8px; background:var(--red); color:#fff; font-size:8px; font-weight:800; }.link-chip { position:absolute; z-index:4; top:70px; right:-45px; padding:14px 17px; border:1px solid #38465d; border-radius:11px; background:#1d293b; color:#aeb8c8; font-size:8px; box-shadow:0 18px 40px rgba(0,0,0,.25); }.link-chip b { color:#fff; }
.solution-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.solution-grid article { min-height:310px; display:flex; flex-direction:column; padding:27px; border:1px solid var(--line); border-radius:18px; transition:.2s ease; }.solution-grid article:hover { transform:translateY(-5px); border-color:#ffc9ce; box-shadow:0 20px 40px rgba(17,24,39,.08); }.solution-grid article>span { width:45px; height:45px; display:grid; place-items:center; border-radius:50%; background:#f5f7fa; color:var(--red); font-size:20px; }.solution-grid h3 { margin:28px 0 12px; color:var(--navy); font-size:18px; }.solution-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }.solution-grid a { display:flex; align-items:center; gap:8px; margin-top:auto; color:var(--red); font-size:11px; font-weight:800; }
.process-section { background:#f7f9fc; }.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }.process-grid article { min-height:240px; position:relative; padding:30px; border-left:1px solid #dfe4ec; }.process-grid article:last-child { border-right:1px solid #dfe4ec; }.process-grid b { color:#c9d0dc; font-size:38px; }.process-grid span { display:block; margin:35px 0 12px; color:var(--navy); font-size:16px; font-weight:800; }.process-grid p { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }
.faq-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:100px; align-items:start; }.faq-grid>div:first-child { position:sticky; top:120px; }.faq-grid h2 { margin-bottom:18px; }.faq-grid>div:first-child p { color:var(--muted); font-size:14px; line-height:1.7; }.faq-grid .text-link { display:inline-block; margin-top:18px; }.faq-list details { border-bottom:1px solid var(--line); }.faq-list summary { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; color:var(--navy); font-size:15px; font-weight:700; list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary b { color:var(--red); font-size:18px; }.faq-list details[open] summary b { transform:rotate(45deg); }.faq-list details p { max-width:650px; margin:-6px 0 25px; color:var(--muted); font-size:13px; line-height:1.7; }
.contact-section { padding:100px 0; color:#fff; background:linear-gradient(125deg,#111a2a,#1c293e); }.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:95px; align-items:center; }.contact-copy h2 { color:#fff; font-size:48px; }.contact-copy>p { color:#aeb8c8; font-size:15px; line-height:1.7; }.contact-copy ul { display:grid; gap:14px; padding:0; margin:32px 0 0; list-style:none; color:#d6dbe5; font-size:12px; }.contact-copy li { display:flex; align-items:center; gap:9px; }.contact-copy svg { color:#ff6974; }.lead-form { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:30px; border:1px solid rgba(255,255,255,.12); border-radius:22px; background:#fff; color:var(--ink); box-shadow:0 25px 60px rgba(0,0,0,.2); }.lead-form>div { display:grid; gap:7px; }.lead-form .full { grid-column:1/3; }.lead-form label { color:#4d586c; font-size:9px; font-weight:800; }.lead-form input,.lead-form select,.lead-form textarea { width:100%; padding:12px 13px; border:1px solid #dfe3e9; border-radius:9px; outline:none; color:var(--ink); background:#fff; font:inherit; font-size:11px; }.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(238,31,45,.08); }.lead-form .button { border:0; cursor:pointer; }.form-note { grid-column:1/3; color:#929aa7; text-align:center; font-size:7px; }
.form-honeypot { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.lead-form .button:disabled { cursor:wait; opacity:.72; }
.form-status { grid-column:1/3; margin:0; padding:11px 13px; border-radius:8px; text-align:center; font-size:10px; line-height:1.5; }
.form-status.success { color:#17643a; background:#eaf8f0; }
.form-status.error { color:#a71d2a; background:#fff0f1; }
.form-status.submitting { color:#4d586c; background:#f1f4f8; }
.lead-form [aria-invalid="true"] { border-color:#d82133; background:#fff8f8; box-shadow:0 0 0 3px rgba(216,33,51,.08); }
.field-error { color:#b91d29; font-size:9px; line-height:1.45; }
footer { color:#b0b9c8; background:#0b111d; }.footer-main { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:55px; padding:65px 0 45px; }.footer-main .brand b { color:#fff; }.footer-main>div { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }.footer-main>div:first-child p { max-width:280px; color:#7e899b; font-size:11px; line-height:1.7; }.footer-main div>b { margin-bottom:8px; color:#fff; font-size:11px; }.footer-main div>a:not(.brand) { color:#838ea0; font-size:10px; }.footer-main div>a:hover { color:#fff; }.footer-bottom { min-height:75px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #222b3a; color:#667185; font-size:9px; }
@media (max-width:960px) { .nav-links { display:none; }.hero { grid-template-columns:1fr; gap:70px; }.hero-copy { text-align:center; }.eyebrow,.hero-actions { margin-inline:auto; }.hero-lead { margin-inline:auto; }.hero-actions,.trust-list { justify-content:center; }.hero-visual { max-width:680px; width:100%; margin:auto; }.proof-row { flex-direction:column; justify-content:center; padding-block:30px; }.proof-row p { width:auto; }.proof-row div { width:100%; flex-wrap:wrap; justify-content:center; }.feature-grid { grid-template-columns:1fr 1fr; }.feature-card.featured { grid-column:span 2; }.unique-grid { gap:40px; }.solution-grid,.process-grid { grid-template-columns:1fr 1fr; }.process-grid article:nth-child(2) { border-right:1px solid #dfe4ec; }.faq-grid,.contact-grid { gap:45px; }.footer-main { grid-template-columns:1.4fr 1fr 1fr; }.footer-main>div:last-child { grid-column:2; } }
@media (max-width:620px) { .shell { width:calc(100% - 24px); max-width:1180px; }.nav { height:70px; }.nav .button { display:none; }.hero { width:100%; padding-top:58px; }.hero:before { inset:0; }.hero-copy,.hero-visual { width:100%; min-width:0; }.eyebrow { font-size:10px; }.hero h1 { max-width:100%; font-size:clamp(38px,12vw,45px); letter-spacing:-2.5px; overflow-wrap:anywhere; }.hero-lead { font-size:16px; }.hero-actions { flex-direction:column; gap:18px; }.dashboard-card { width:100%; padding-inline:9px; transform:none; }.orbit-one { right:0; }.orbit-two { left:0; }.event-grid { grid-template-columns:1fr; }.side-panel { display:none; }.stats-row { grid-template-columns:1fr 1fr; }.float-card { display:none; }.proof-row div { gap:18px; }.proof-row div span { font-size:9px; }.section { padding:72px 0; }.section-head h2,.unique-copy h2,.faq-grid h2,.contact-copy h2 { font-size:36px; letter-spacing:-1.6px; }.section-head.split { display:block; }.section-head.split p { margin-top:20px; }.feature-grid { grid-template-columns:1fr; }.feature-card.featured { grid-column:auto; min-height:500px; }.site-preview { width:84%; right:-2%; }.unique-grid { grid-template-columns:1fr; }.unique-copy { text-align:center; }.journey-list { text-align:left; }.link-chip { right:-5px; }.solution-grid,.process-grid { grid-template-columns:1fr; }.process-grid article,.process-grid article:last-child,.process-grid article:nth-child(2) { border:0; border-top:1px solid #dfe4ec; }.faq-grid,.contact-grid { grid-template-columns:1fr; }.faq-grid>div:first-child { position:static; }.lead-form { grid-template-columns:1fr; padding:20px; }.lead-form .full,.form-note { grid-column:auto; }.footer-main { grid-template-columns:1fr 1fr; }.footer-main>div:first-child { grid-column:1/3; }.footer-main>div:last-child { grid-column:auto; }.footer-bottom { align-items:flex-start; flex-direction:column; justify-content:center; gap:8px; } }

@media (max-width:620px) { .form-status { grid-column:auto; } }

/* Futuristic typography and interface treatment */
:root {
  --navy:#091222;
  --ink:#111b31;
  --line:#dfe5ee;
  --font-display:"Exo 2","Arial Narrow",sans-serif;
  --font-body:"Space Grotesk",Arial,sans-serif;
}
body { font-family:var(--font-body); }
.brand>span:last-child { font-family:var(--font-display); font-size:21px; letter-spacing:-.4px; transform:skewX(-3deg); }
.brand small { font-family:var(--font-body); letter-spacing:2.5px; transform:skewX(3deg); }
.nav-links,.button,.text-link,.eyebrow,.section-label,.feature-card h3,.solution-grid h3,.process-grid span,.faq-list summary { font-family:var(--font-display); }
.nav-links { font-size:13px; letter-spacing:.35px; }
.button { border:1px solid rgba(255,255,255,.2); border-radius:5px 13px 5px 13px; background:linear-gradient(135deg,#ff3341,var(--red)); letter-spacing:.35px; }
.button-small { border-radius:4px 11px 4px 11px; }
.hero { position:relative; }
.hero:before { content:""; position:absolute; inset:0 45% 0 -40vw; z-index:-1; opacity:.52; background-image:linear-gradient(rgba(16,24,39,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(16,24,39,.04) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(90deg,#000,transparent); }
.eyebrow { border-radius:4px 10px 4px 10px; font-size:10px; letter-spacing:1px; text-transform:uppercase; }
h1,.section-head h2,.unique-copy h2,.faq-grid h2,.contact-copy h2 { font-family:var(--font-display); font-weight:700; letter-spacing:-1.5px; }
h1 { line-height:1.01; letter-spacing:-2.7px; }
h1 em,.section-head h2 em { font-style:italic; }
.section-label { font-size:10px; letter-spacing:2.8px; }
.section-label:before { content:"// "; opacity:.42; }
.feature-card { border-radius:5px 20px 5px 20px; background:linear-gradient(145deg,#fff,#fbfcff); }
.feature-card:before { content:""; width:32px; height:2px; position:absolute; top:0; right:28px; background:var(--red); }
.feature-icon { border:1px solid #ffd7da; border-radius:4px 11px 4px 11px; font-family:var(--font-display); }
.dashboard-card,.float-card,.lead-form { border-radius:6px 20px 6px 20px; }
.solution-grid article { border-radius:5px 18px 5px 18px; }
.solution-grid article>span { border-radius:4px 12px 4px 12px; }
.process-grid b { font-family:var(--font-display); font-style:italic; letter-spacing:-2px; }
.unique-section,.contact-section,footer { background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:38px 38px; }
.unique-section { background-color:var(--navy); }
.contact-section { background-color:#101a2b; }
footer { background-color:#080f1b; }
@media (max-width:620px) { h1 { letter-spacing:-1.7px; }.brand>span:last-child { font-size:20px; } }

/* Event photography showcase */
.visual-showcase { padding:110px 0; background:#fff; }
.visual-heading { margin-bottom:48px; }
.event-photo-grid { display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:255px 255px; gap:16px; }
.event-photo { min-width:0; min-height:0; position:relative; overflow:hidden; margin:0; border:1px solid #253148; border-radius:5px 20px 5px 20px; background:var(--navy); box-shadow:0 20px 45px rgba(9,18,34,.13); }
.event-photo-large { grid-row:1/3; }
.event-photo img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .3s ease; }
.event-photo:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(5,11,22,.9)); pointer-events:none; }
.event-photo:hover img { transform:scale(1.035); filter:saturate(1.08); }
.event-photo figcaption { position:absolute; z-index:2; left:24px; right:24px; bottom:22px; display:flex; align-items:center; gap:14px; color:#fff; }
.event-photo figcaption>span { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.32); border-radius:4px 10px 4px 10px; color:#ff7a84; font-family:var(--font-display); font-size:9px; font-weight:800; backdrop-filter:blur(8px); }
.event-photo figcaption div { display:grid; gap:4px; }
.event-photo figcaption b { font-family:var(--font-display); font-size:16px; letter-spacing:.15px; }
.event-photo figcaption small { color:#b8c2d2; font-size:9px; }
@media (max-width:960px) { .event-photo-grid { grid-template-columns:1fr 1fr; grid-template-rows:390px 270px; }.event-photo-large { grid-column:1/3; grid-row:auto; } }
@media (max-width:620px) { .visual-showcase { padding:72px 0; }.event-photo-grid { grid-template-columns:1fr; grid-template-rows:330px 230px 230px; }.event-photo-large { grid-column:auto; }.event-photo figcaption { left:17px; right:17px; bottom:16px; }.event-photo figcaption b { font-size:14px; }.event-photo figcaption small { font-size:8px; } }

/* Product interface showcase */
.portal-showcase { padding:110px 0; overflow:hidden; background:linear-gradient(180deg,#f7f9fc 0%,#fff 100%); }
.portal-showcase-head { margin-bottom:48px; }
.portal-screen-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.portal-screen { min-width:0; margin:0; overflow:hidden; border:1px solid #dce3ed; border-radius:6px 22px 6px 22px; background:#fff; box-shadow:0 22px 55px rgba(9,18,34,.11); }
.portal-screen-wide { grid-column:1/3; }
.screen-bar { min-height:76px; display:grid; grid-template-columns:38px auto 1fr; align-items:center; gap:13px; padding:14px 20px; border-bottom:1px solid #e3e8ef; background:#fff; }
.screen-bar>span { width:36px; height:36px; display:grid; place-items:center; border-radius:4px 11px 4px 11px; background:#fff0f1; color:var(--red); font-family:var(--font-display); font-size:10px; font-weight:800; }
.screen-bar>b { color:var(--navy); font-family:var(--font-display); font-size:15px; }
.screen-bar>small { justify-self:end; color:#7b8698; font-size:9px; }
.portal-screen img { width:100%; height:auto; display:block; }
@media (max-width:760px) {
  .portal-showcase { padding:72px 0; }
  .portal-screen-grid { grid-template-columns:1fr; gap:16px; }
  .portal-screen-wide { grid-column:auto; }
  .screen-bar { grid-template-columns:34px 1fr; min-height:68px; padding:12px 14px; }
  .screen-bar>span { width:32px; height:32px; }
  .screen-bar>small { display:none; }
  .screen-bar>b { font-size:13px; }
}

/* Compact microsite preview stays fully inside the feature card. */
.microsite-preview { width:34%; max-width:122px; height:158px; position:absolute; right:18px; bottom:-20px; overflow:hidden; border:5px solid #263248; border-radius:18px; background:#fff; box-shadow:0 12px 28px rgba(9,18,34,.16); pointer-events:none; }
.microsite-notch { width:35px; height:7px; position:absolute; z-index:2; top:0; left:50%; transform:translateX(-50%); border-radius:0 0 5px 5px; background:#263248; }
.microsite-browser { height:24px; display:flex; align-items:end; justify-content:center; padding:0 5px 4px; background:#f1f4f8; }
.microsite-browser span { max-width:100%; overflow:hidden; color:#8993a3; font-size:4px; text-overflow:ellipsis; white-space:nowrap; }
.microsite-cover { height:calc(100% - 24px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px; color:#fff; text-align:center; background:radial-gradient(circle at 50% 0,#4b5b78,var(--navy) 70%); }
.microsite-cover small { color:#ff8089; font-size:5px; letter-spacing:1px; }
.microsite-cover b { max-width:150px; margin-top:7px; font-size:10px; line-height:1.15; }
.microsite-cover span { margin-top:4px; color:#b7c0d0; font-size:5px; }
.microsite-cover em { margin-top:8px; padding:5px 10px; border-radius:4px; background:var(--red); font-size:5px; font-style:normal; font-weight:800; }
@media (max-width:620px) { .microsite-preview { width:34%; max-width:116px; height:150px; right:16px; bottom:-17px; } }

/* Direct contact options */
.contact-options { display:grid; gap:16px; }
.contact-option { min-height:142px; display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:20px; padding:25px; border:1px solid rgba(255,255,255,.13); border-radius:6px 20px 6px 20px; color:#fff; background:rgba(255,255,255,.065); box-shadow:0 24px 60px rgba(0,0,0,.16); transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.contact-option:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.1); }
.contact-option-icon { width:64px; height:64px; display:grid; place-items:center; border-radius:5px 18px 5px 18px; background:#fff; }
.contact-option-icon svg { width:31px; height:31px; }
.contact-option.whatsapp .contact-option-icon { color:#128c5e; }
.contact-option.email .contact-option-icon { color:var(--red); }
.contact-option>span:nth-child(2) { min-width:0; display:grid; gap:6px; }
.contact-option small { color:#8f9db1; font-family:var(--font-display); font-size:8px; font-weight:800; letter-spacing:1.8px; }
.contact-option strong { overflow-wrap:anywhere; font-family:var(--font-display); font-size:20px; line-height:1.2; }
.contact-option em { color:#aeb8c8; font-size:10px; font-style:normal; }
.contact-option>b { color:#ff6974; font-size:24px; }
@media (max-width:620px) { .contact-option { grid-template-columns:52px 1fr auto; gap:14px; padding:19px; }.contact-option-icon { width:52px; height:52px; }.contact-option strong { font-size:15px; }.contact-option em { font-size:9px; } }