/* Reusable UI: navigation, cards, buttons, portal preview and contact */
.brand{display:inline-flex;align-items:center;gap:12px;font:600 22px "Space Grotesk",sans-serif;letter-spacing:-1px;white-space:nowrap}
.brand strong{color:var(--accent)}
.brand-icon{width:38px;height:38px;border:1px solid rgba(73,239,193,.4);border-radius:11px;display:grid;place-items:center;color:var(--accent);font-size:29px;background:rgba(73,239,193,.08)}
.nav{display:flex;align-items:center;gap:34px;font-size:14px;color:#c5d6e3}
.nav a:hover{color:var(--accent)}
.nav-cta{border:1px solid var(--line);padding:12px 20px;border-radius:12px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;border-radius:13px;padding:17px 23px;font-size:14px;font-weight:700;transition:transform .2s,background .2s}
.button:hover{transform:translateY(-3px)}
.hero-art{height:490px;position:relative;display:grid;place-items:center}
.orbit{position:absolute;border:1px solid rgba(73,239,193,.13);border-radius:50%;transform:rotate(-23deg)}
.orbit-one{width:340px;height:340px;box-shadow:0 0 100px rgba(73,239,193,.06)}
.orbit-two{width:470px;height:470px;border-style:dashed;animation:spin 80s linear infinite}
.core{width:260px;height:260px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#1d4a58,#0a1d2d 65%);box-shadow:inset 0 0 0 1px rgba(73,239,193,.3),0 0 110px rgba(48,221,191,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.core span{font:700 80px "Space Grotesk";letter-spacing:-8px;color:var(--accent)}
.core strong{font:600 25px "Space Grotesk";letter-spacing:-1px}
.core small{font-size:9px;letter-spacing:3px;color:#92b3be}
.floating-chip{position:absolute;padding:13px 18px;background:rgba(18,39,55,.88);border:1px solid rgba(133,203,216,.2);border-radius:13px;box-shadow:0 15px 35px #0003;backdrop-filter:blur(10px);color:var(--accent);font-size:20px;display:flex;gap:10px;align-items:center;animation:float 5s ease-in-out infinite}
.floating-chip span{color:#d9edf2;font-size:12px}
.chip-one{top:14%;left:3%}
.chip-two{top:24%;right:0;animation-delay:1s}
.chip-three{bottom:13%;left:10%;animation-delay:2s}
.service-card{min-height:325px;background:linear-gradient(145deg,rgba(23,46,64,.8),rgba(10,25,39,.7));border:1px solid var(--line);border-radius:20px;padding:26px;position:relative;transition:transform .25s,border-color .25s}
.service-card:hover{transform:translateY(-7px);border-color:rgba(73,239,193,.5)}
.service-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:rgba(73,239,193,.09);color:var(--accent);font-size:29px;margin-bottom:30px}
.service-number{font-size:10px;letter-spacing:1.7px;color:var(--accent)}
.service-card h3{font-size:22px;line-height:1.25;margin:13px 0}
.service-card p{font-size:13px;line-height:1.8;color:var(--muted)}
.card-arrow{position:absolute;bottom:23px;right:26px;color:var(--accent)}
.feature{display:flex;gap:15px;align-items:center;margin:24px 0}
.feature-icon{flex:none;width:45px;height:45px;border-radius:12px;background:rgba(73,239,193,.08);display:grid;place-items:center;color:var(--accent);font-size:24px}
.feature strong,.feature small{display:block}
.feature strong{font-size:15px}
.feature small{font-size:13px;color:var(--muted);margin-top:5px}
.dashboard{background:linear-gradient(145deg,#142b40,#0c1c2b);border:1px solid rgba(134,197,220,.2);border-radius:24px;padding:26px;box-shadow:0 30px 100px #0005;transform:rotate(1deg)}
.dashboard-top,.dashboard-title,.demo-row,.dashboard-footer{display:flex;align-items:center;justify-content:space-between}
.dashboard-top{padding-bottom:25px;border-bottom:1px solid var(--line)}
.dashboard-logo{color:var(--accent);font-size:12px;letter-spacing:2px;font-weight:700}
.demo-pill{color:#8cb9ca;background:#203b4b;border-radius:50px;padding:8px 10px;font-size:9px;letter-spacing:1px}
.dashboard-title{font:600 26px "Space Grotesk";margin-top:25px}
.dashboard-title span{color:var(--accent)}
.dashboard-sub{color:var(--muted);font-size:12px;margin:8px 0 23px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.stat-grid>div{padding:20px;background:#0a1d2d;border:1px solid var(--line);border-radius:13px}
.stat-grid small,.stat-grid strong,.stat-grid span{display:block}
.stat-grid small{color:var(--muted);font-size:11px}
.stat-grid strong{font:600 36px "Space Grotesk";margin:9px 0}
.stat-grid span{color:var(--accent);font-size:10px}
.table-label{font-size:10px;color:#7e9fb1;letter-spacing:1.5px;margin:28px 0 10px}
.demo-row{gap:12px;border-bottom:1px solid var(--line);padding:15px 0;font-size:12px}
.demo-row>span:nth-child(2){flex:1}
.demo-row small{display:block;color:var(--muted);margin-top:5px}
.demo-check{color:var(--accent);border:1px solid rgba(73,239,193,.25);border-radius:8px;padding:7px}
.status{color:var(--accent);font-size:10px}
.dashboard-footer{justify-content:center;color:#6c8ba0;font-size:10px;padding-top:25px}
.soon-label{display:inline-flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:100px;padding:15px 23px;font-size:11px;letter-spacing:2px;color:#c4e4e1}
.footer{max-width:1320px;margin:auto;padding:35px 40px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.footer>span,.footer small{color:#829caf;font-size:12px}
.menu-toggle{display:none}
.contact-section{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr);gap:clamp(2rem,5vw,5rem);align-items:center;border:1px solid rgba(110,238,216,.18);border-radius:30px;background:linear-gradient(120deg,rgba(17,45,61,.94),rgba(8,21,36,.97));padding:clamp(2rem,5vw,5rem)!important;margin-block:3rem;isolation:isolate}
.contact-orb{position:absolute;inset:auto -130px -210px auto;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(59,225,190,.22),transparent 68%);filter:blur(15px);z-index:-1}
.contact-content{position:relative;z-index:1}
.contact-content h2{font-size:clamp(2.2rem,4.8vw,4.6rem);line-height:1.08;letter-spacing:-.055em;margin:1.1rem 0 1.3rem}
.contact-content>p{max-width:620px;color:#b8cbd9;line-height:1.75}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin:2rem 0 1rem}
.contact-actions .button{cursor:pointer;font:inherit;text-decoration:none}
.contact-email{display:inline-block;margin-top:10px;color:#7ff3d7;text-decoration:none;font-size:clamp(1.05rem,2vw,1.45rem);font-weight:700;overflow-wrap:anywhere}
.contact-email:hover{text-decoration:underline}
.contact-content .contact-note{font-size:.83rem;opacity:.75;margin-top:1.5rem;max-width:570px}
.contact-visual{position:relative;display:grid;place-items:center;min-height:300px;border-radius:26px;border:1px solid rgba(133,235,222,.15);background:radial-gradient(circle at 50% 40%,rgba(43,214,180,.18),transparent 55%),linear-gradient(145deg,rgba(28,63,78,.55),rgba(5,18,31,.65));box-shadow:inset 0 1px rgba(255,255,255,.06)}
.mail-symbol{font-size:clamp(5rem,12vw,9rem);color:#68e8cf;filter:drop-shadow(0 0 38px rgba(78,240,201,.28));animation:mailFloat 6s ease-in-out infinite}
.contact-visual-label{position:absolute;bottom:25px;left:28px;font-size:.7rem;letter-spacing:.2em;color:#79e5d1}
.contact-visual-label span{display:block;color:#a5bbcc;letter-spacing:.13em;margin-top:8px}
.footer>a[href^="mailto:"]{color:#8fe8d5;text-decoration:none}
.copy-email.copied{border-color:#6de9c9;color:#8ff8d9}