:root {
  /* SkySuite brand palette supplied by the owner */
  --cream: #F2E8D8;
  --gold: #C9A46D;
  --burgundy: #8B1E2D;
  --burgundy-deep: #5B0F1A;
  --wine: #2D070D;

  --ink: #2D070D;
  --ink-soft: #6B504C;
  --navy: #5B0F1A;
  --navy-deep: #2D070D;
  --teal: #8B1E2D;
  --teal-bright: #A83B49;
  --sky: #F7F0E6;
  --sky-2: #FBF7F1;
  --green: #8B1E2D;
  --white: #FFFFFF;
  --line: rgba(91, 15, 26, .14);
  --surface: #FFFFFF;
  --surface-2: #FBF7F1;
  --shadow-sm: 0 8px 26px rgba(45, 7, 13, .08);
  --shadow: 0 24px 70px rgba(45, 7, 13, .14);
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 34px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #FFFDFC;
  font-family: Inter, Aptos, Segoe UI, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.section { padding: 92px 0; }
.section.compact { padding: 68px 0; }
.section.alt { background: var(--sky-2); }
.section.dark { background: var(--navy-deep); color: var(--white); }
.section-title { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.06; letter-spacing: -.04em; }
.section-lead { margin: 0; color: var(--ink-soft); font-size: 1.08rem; max-width: 720px; }
.dark .section-lead { color: #E8D8C4; }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 14px; color: var(--teal); font-size: .76rem; letter-spacing: .13em; font-weight: 800; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 99px; background: var(--gold); }
.dark .eyebrow { color: #E0CBAE; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251,247,241,.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(91,15,26,.12);
}
.navbar { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.27rem; letter-spacing: -.03em; }
.brand-mark { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--wine), var(--burgundy)); color: var(--gold); box-shadow: 0 8px 24px rgba(45,7,13,.20); }
.brand-mark svg { width: 22px; height: 22px; }
.brand-name span { color: var(--teal); }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: .94rem; font-weight: 650; }
.nav-links a { color: #5B0F1A; transition: color .2s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--teal); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.mobile-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); }
.mobile-panel { display: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 18px; border-radius: 13px; border: 1px solid transparent; font-weight: 750; font-size: .94rem; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--teal); color: var(--white); box-shadow: 0 10px 22px rgba(139,30,45,.22); }
.btn.primary:hover { background: #721724; }
.btn.secondary { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,.3); color: var(--white); }
.btn.gold { background: var(--gold); color: #2D070D; }
.btn.large { min-height: 52px; padding: 0 23px; border-radius: 15px; }

.hero { position: relative; overflow: hidden; padding: 68px 0 82px; background: linear-gradient(180deg, #fff 0%, #FBF7F1 100%); }
.hero::before { content: ""; position: absolute; width: 650px; height: 650px; border-radius: 50%; background: radial-gradient(circle, rgba(201,164,109,.24), rgba(201,164,109,0) 67%); right: -220px; top: -260px; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 54px; }
.hero h1 { margin: 0 0 22px; font-size: clamp(3rem, 6.4vw, 5.8rem); line-height: .96; letter-spacing: -.065em; max-width: 760px; }
.hero h1 .accent { color: var(--teal); }
.hero-copy { margin: 0 0 28px; max-width: 650px; color: var(--ink-soft); font-size: clamp(1.06rem, 1.8vw, 1.25rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 18px; color: #6B504C; font-size: .9rem; }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #F2E8D8; color: var(--green); font-style: normal; font-size: .74rem; font-weight: 900; }

.product-window { position: relative; border-radius: 28px; background: #f8fbfc; border: 1px solid #E6D7C6; box-shadow: 0 30px 80px rgba(45,7,13,.18); overflow: hidden; transform: perspective(1300px) rotateY(-3deg) rotateX(1deg); }
.product-window::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); border-radius: inherit; }
.product-top { height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; background: var(--navy-deep); color: #E6D7C6; }
.product-dots { display: flex; gap: 6px; }
.product-dots span { width: 8px; height: 8px; border-radius: 50%; background: #C9A46D; }
.product-label { font-size: .71rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.product-body { display: grid; grid-template-columns: 155px 1fr; min-height: 430px; }
.product-side { background: #5B0F1A; padding: 22px 13px; color: #E9D9C4; }
.product-side .mini-brand { display: flex; align-items: center; gap: 8px; color: #fff; font-size: .86rem; font-weight: 800; margin-bottom: 26px; }
.product-side .side-pill { height: 35px; border-radius: 10px; padding: 0 11px; display: flex; align-items: center; margin-bottom: 7px; font-size: .72rem; font-weight: 650; }
.product-side .side-pill.active { background: rgba(255,255,255,.12); color: #fff; }
.product-main { padding: 18px; background: #F7F0E6; }
.mock-hero { background: linear-gradient(135deg, var(--wine), var(--burgundy)); color: #fff; border-radius: 18px; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
.mock-hero small { display: block; color: #E8D8C4; text-transform: uppercase; letter-spacing: .1em; font-size: .58rem; font-weight: 800; }
.mock-hero h3 { margin: 4px 0 2px; font-size: 1.32rem; }
.mock-badge { padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: .66rem; }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 11px 0; }
.mock-stat { background: #fff; border: 1px solid #E7D9C8; border-radius: 14px; padding: 13px; }
.mock-stat small { display: block; color: #806B64; text-transform: uppercase; letter-spacing: .07em; font-size: .52rem; font-weight: 800; }
.mock-stat strong { display: block; margin-top: 3px; font-size: 1.15rem; }
.mock-panels { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; }
.mock-panel { background: #fff; border: 1px solid #E7D9C8; border-radius: 14px; padding: 14px; min-height: 155px; }
.mock-panel h4 { margin: 0 0 11px; font-size: .74rem; }
.mock-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid #F4ECE1; font-size: .62rem; }
.mock-row:first-of-type { border-top: none; }
.mock-dot { width: 25px; height: 25px; border-radius: 9px; background: #F2E8D8; display: grid; place-items: center; font-weight: 800; color: var(--navy); }
.mock-row-left { display: flex; align-items: center; gap: 7px; }
.mock-status { color: var(--green); font-weight: 800; }
.mock-chart { height: 80px; display: flex; align-items: end; gap: 6px; padding-top: 9px; }
.mock-chart span { flex: 1; border-radius: 5px 5px 2px 2px; background: #D8B7A2; }
.mock-chart span:nth-child(2n) { background: #8B1E2D; }

.logo-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.logo-strip .container { min-height: 94px; display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); align-items: center; gap: 20px; }
.logo-strip strong { font-size: .86rem; color: #806B64; font-weight: 700; }
.logo-word { color: #6B504C; font-size: .95rem; font-weight: 800; text-align: center; letter-spacing: -.02em; }

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 38px; }
.value-card { border-top: 1px solid var(--line); padding: 24px 0 0; }
.value-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--sky); color: var(--navy); margin-bottom: 18px; }
.value-card h3 { margin: 0 0 9px; font-size: 1.18rem; }
.value-card p { margin: 0; color: var(--ink-soft); }

.feature-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.feature-sticky { position: sticky; top: 110px; }
.feature-list { display: grid; gap: 1px; border-top: 1px solid var(--line); }
.feature-row { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 14px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.feature-icon { width: 42px; height: 42px; border-radius: 13px; background: var(--sky); display: grid; place-items: center; color: var(--navy); }
.feature-row h3 { margin: 0 0 4px; font-size: 1rem; }
.feature-row p { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.feature-tag { font-size: .72rem; color: var(--teal); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.campus-shell { margin-top: 42px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; }
.campus-copy { padding-right: 20px; }
.campus-copy h3 { margin: 0 0 12px; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -.035em; }
.campus-copy p { color: var(--ink-soft); }
.check-list { display: grid; gap: 12px; margin-top: 22px; }
.check-item { display: flex; gap: 10px; align-items: flex-start; color: #5B0F1A; }
.check-item b { min-width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #F2E8D8; color: var(--green); font-size: .72rem; }
.org-map { background: #fff; border: 1px solid #E6D7C6; border-radius: 28px; box-shadow: var(--shadow-sm); padding: 28px; }
.org-root { width: min(360px, 90%); margin: 0 auto; background: #5B0F1A; color: #fff; border-radius: 18px; padding: 18px 20px; text-align: center; font-weight: 800; }
.org-root small { display: block; color: #E4D1B6; font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.org-line { width: 2px; height: 28px; margin: 0 auto; background: #D7BC95; }
.org-branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; padding-top: 20px; }
.org-branches::before { content: ""; position: absolute; top: 0; left: 16.66%; right: 16.66%; height: 2px; background: #D7BC95; }
.campus-node { position: relative; border: 1px solid #E6D7C6; border-radius: 16px; padding: 18px 13px; text-align: center; background: #FBF7F1; }
.campus-node::before { content: ""; position: absolute; width: 2px; height: 20px; background: #D7BC95; top: -20px; left: 50%; }
.campus-node strong { display: block; font-size: .92rem; }
.campus-node span { display: block; margin-top: 4px; color: #806B64; font-size: .72rem; }

.quote-section { background: linear-gradient(135deg, var(--burgundy-deep), var(--wine)); color: #fff; border-radius: 34px; padding: 52px; display: grid; grid-template-columns: 1fr auto; gap: 38px; align-items: center; }
.quote-section blockquote { margin: 0; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: -.04em; }
.quote-section p { margin: 14px 0 0; color: #E8D8C4; max-width: 720px; }

.pilot-grid { margin-top: 38px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; }
.pilot-main { border: 1px solid var(--line); border-radius: 26px; padding: 32px; background: #fff; box-shadow: var(--shadow-sm); }
.pilot-main h3 { margin: 0 0 10px; font-size: 1.55rem; }
.pilot-main p { color: var(--ink-soft); }
.pilot-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
.pilot-step { padding: 18px; border-radius: 17px; background: var(--sky-2); }
.pilot-step span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--navy); color: #fff; font-size: .75rem; font-weight: 800; margin-bottom: 12px; }
.pilot-step strong { display: block; margin-bottom: 4px; }
.pilot-step small { color: #806B64; }
.pilot-side { border-radius: 26px; padding: 32px; background: #5B0F1A; color: #fff; }
.pilot-side h3 { margin: 0 0 10px; font-size: 1.55rem; }
.pilot-side p { color: #E9D9C4; }

.cta { padding: 86px 0; }
.cta-box { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--wine), var(--burgundy)); color: #fff; border-radius: 34px; padding: 60px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; }
.cta-box::after { content: ""; position: absolute; width: 330px; height: 330px; border-radius: 50%; right: -100px; top: -150px; border: 60px solid rgba(255,255,255,.05); }
.cta-box h2 { margin: 0 0 12px; font-size: clamp(2.1rem, 4vw, 3.7rem); line-height: 1; letter-spacing: -.05em; max-width: 720px; }
.cta-box p { margin: 0; color: #E8D8C4; max-width: 650px; }
.cta-actions { position: relative; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.footer { background: #2D070D; color: #F2E8D8; padding: 60px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, .7fr); gap: 42px; }
.footer .brand { color: #fff; }
.footer-intro { margin: 16px 0 0; max-width: 380px; color: #CDB8A0; font-size: .92rem; }
.footer h4 { margin: 3px 0 16px; font-size: .85rem; color: #fff; }
.footer-links { display: grid; gap: 10px; font-size: .88rem; color: #D9C7B0; }
.footer-links a:hover { color: #fff; }
.footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 20px; color: #B79C7B; font-size: .78rem; }

.page-hero { padding: 72px 0 66px; background: linear-gradient(180deg, #FBF7F1, #fff); border-bottom: 1px solid var(--line); }
.page-hero h1 { margin: 0 0 16px; font-size: clamp(2.8rem, 6vw, 5rem); line-height: .98; letter-spacing: -.055em; max-width: 850px; }
.page-hero p { margin: 0; color: var(--ink-soft); font-size: 1.12rem; max-width: 760px; }
.page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.info-card { padding: 27px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.info-card h3 { margin: 14px 0 8px; }
.info-card p { color: var(--ink-soft); margin: 0; }

.contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 42px; align-items: start; }
.contact-panel { padding: 30px; border-radius: 24px; background: #5B0F1A; color: #fff; }
.contact-panel h3 { margin: 0 0 11px; font-size: 1.5rem; }
.contact-panel p { color: #E8D8C4; }
.contact-points { display: grid; gap: 16px; margin-top: 26px; }
.contact-point { display: flex; gap: 11px; align-items: flex-start; }
.contact-point b { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.1); }
.form-shell { padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .78rem; font-weight: 800; color: #5B0F1A; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid #E1D0BE; border-radius: 13px; padding: 13px 14px; outline: none; background: #fff; color: var(--ink); transition: border .2s ease, box-shadow .2s ease; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--teal-bright); box-shadow: 0 0 0 4px rgba(139,30,45,.12); }
.field textarea { min-height: 130px; resize: vertical; }
.form-note { margin-top: 12px; color: #806B64; font-size: .78rem; }
.form-message { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #F2E8D8; color: #5B0F1A; font-size: .85rem; }
.form-message.show { display: block; }

.legal { max-width: 830px; }
.legal h2 { margin-top: 40px; font-size: 1.35rem; }
.legal p, .legal li { color: #6B504C; }
.legal ul { padding-left: 20px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .nav-links, .nav-actions .btn.secondary { display: none; }
  .mobile-toggle { display: grid; place-items: center; }
  .mobile-panel.open { display: grid; gap: 5px; padding: 0 20px 18px; background: rgba(255,255,255,.98); border-top: 1px solid var(--line); }
  .mobile-panel a { padding: 12px 0; border-bottom: 1px solid #F3EADF; font-weight: 700; color: #5B0F1A; }
  .mobile-panel .btn { margin-top: 8px; }
  .hero-grid, .feature-layout, .campus-shell, .pilot-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 52px; }
  .hero h1 { max-width: 850px; }
  .product-window { max-width: 720px; margin: 0 auto; transform: none; }
  .feature-sticky { position: static; }
  .quote-section, .cta-box { grid-template-columns: 1fr; }
  .cta-actions { justify-content: flex-start; }
  .footer-grid { grid-template-columns: 1.3fr repeat(2, 1fr); }
  .footer-grid > div:last-child { grid-column: 2 / 4; }
  .page-grid, .value-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .container { width: min(var(--container), calc(100% - 28px)); }
  .navbar { height: 68px; }
  .section { padding: 68px 0; }
  .hero { padding: 44px 0 58px; }
  .hero h1 { font-size: clamp(2.7rem, 14vw, 4.4rem); }
  .hero-actions .btn { width: 100%; }
  .product-body { grid-template-columns: 1fr; }
  .product-side { display: none; }
  .mock-stats { grid-template-columns: repeat(3, 1fr); }
  .mock-panels { grid-template-columns: 1fr; }
  .logo-strip .container { grid-template-columns: 1fr 1fr; padding: 22px 0; }
  .logo-strip strong { grid-column: 1 / -1; text-align: center; }
  .value-grid, .page-grid, .pilot-steps, .form-grid { grid-template-columns: 1fr; }
  .org-branches { grid-template-columns: 1fr; padding-top: 0; }
  .org-branches::before { display: none; }
  .campus-node::before { display: none; }
  .org-line { height: 20px; }
  .quote-section, .cta-box { padding: 34px 26px; border-radius: 25px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child, .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
  .page-hero { padding: 52px 0 46px; }
}

/* =========================================================
   SkySuite Website v1.3 — WOW hero + transparent navigation
   ========================================================= */
.home-page { background: #FFFDFC; }
.home-page .site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: transparent; border: 0; backdrop-filter: none;
  transition: padding .35s ease, background .35s ease, box-shadow .35s ease;
  padding-top: 14px;
}
.home-page .glass-nav {
  height: 68px; padding: 0 14px 0 16px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(45,7,13,.18);
  box-shadow: 0 14px 40px rgba(18,2,6,.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, border-radius .35s ease;
}
.home-page .brand { color: #fff; }
.home-page .brand-name span { color: #E6C38F; }
.home-page .brand-mark { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); color: #E7C58F; box-shadow: none; }
.home-page .nav-links a { color: rgba(255,255,255,.78); }
.home-page .nav-links a:hover, .home-page .nav-links a.active { color: #fff; }
.home-page .nav-signin { color: #fff; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); min-height: 42px; }
.home-page .nav-demo { background: #F2E8D8; color: #2D070D; min-height: 42px; box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.home-page .site-header.is-scrolled { padding-top: 8px; }
.home-page .site-header.is-scrolled .glass-nav { background: rgba(255,253,252,.88); border-color: rgba(91,15,26,.10); box-shadow: 0 14px 42px rgba(45,7,13,.10); }
.home-page .site-header.is-scrolled .brand, .home-page .site-header.is-scrolled .nav-links a { color: #5B0F1A; }
.home-page .site-header.is-scrolled .brand-name span { color: #8B1E2D; }
.home-page .site-header.is-scrolled .brand-mark { background: linear-gradient(135deg,#2D070D,#8B1E2D); color:#C9A46D; border-color:transparent; }
.home-page .site-header.is-scrolled .nav-signin { color:#5B0F1A; border-color:rgba(91,15,26,.14); background:#fff; }
.home-page .site-header.is-scrolled .nav-demo { background:#8B1E2D; color:#fff; }

.hero-wow {
  min-height: 100vh; padding: 146px 0 54px; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(circle at 18% 24%, rgba(139,30,45,.46), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(201,164,109,.17), transparent 27%),
    linear-gradient(135deg, #210408 0%, #3C0911 43%, #5B0F1A 100%);
  color:#fff;
}
.hero-wow::before { content:""; position:absolute; inset:0; width:auto; height:auto; border-radius:0; right:auto; top:auto; background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(0,0,0,.10)); z-index:-2; }
.hero-grid-lines { position:absolute; inset:0; z-index:-1; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:78px 78px; mask-image:linear-gradient(to bottom,black,transparent 80%); }
.hero-orb { position:absolute; border-radius:999px; filter:blur(2px); pointer-events:none; z-index:-1; }
.hero-orb-one { width:520px; height:520px; right:-180px; top:105px; background:radial-gradient(circle,rgba(201,164,109,.18),rgba(201,164,109,0) 70%); }
.hero-orb-two { width:460px; height:460px; left:-180px; bottom:10px; background:radial-gradient(circle,rgba(139,30,45,.34),rgba(139,30,45,0) 70%); }
.hero-wow-copy { text-align:center; max-width:1060px; margin:0 auto; position:relative; z-index:2; }
.hero-kicker { width:max-content; max-width:100%; margin:0 auto 24px; display:flex; align-items:center; gap:9px; padding:8px 14px; border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.06); color:#E8D8C4; font-size:.78rem; font-weight:750; letter-spacing:.03em; backdrop-filter:blur(10px); }
.pulse-dot { width:7px; height:7px; border-radius:50%; background:#C9A46D; box-shadow:0 0 0 0 rgba(201,164,109,.55); animation:skyPulse 2s infinite; }
@keyframes skyPulse { 70%{box-shadow:0 0 0 9px rgba(201,164,109,0)} 100%{box-shadow:0 0 0 0 rgba(201,164,109,0)} }
.hero-wow h1 { margin:0 auto 26px; max-width:1000px; font-size:clamp(3.8rem,8.5vw,8.4rem); line-height:.83; letter-spacing:-.075em; text-wrap:balance; }
.hero-wow h1 span { display:inline-block; color:#F2E8D8; text-shadow:0 8px 50px rgba(0,0,0,.18); }
.hero-wow-copy > p { max-width:790px; margin:0 auto 30px; color:#D9C7B0; font-size:clamp(1.03rem,1.7vw,1.24rem); }
.hero-wow-copy > p strong { color:#fff; font-weight:750; transition:opacity .18s ease, transform .18s ease; display:inline-block; }
.hero-actions-wow { justify-content:center; margin-bottom:24px; }
.hero-primary,.hero-secondary { min-height:56px; padding:0 25px; border-radius:17px; font-weight:800; }
.hero-primary { background:#F2E8D8; color:#2D070D; box-shadow:0 15px 45px rgba(0,0,0,.22); }
.hero-primary:hover { background:#fff; }
.hero-secondary { color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(12px); }
.hero-secondary:hover { background:rgba(255,255,255,.12); }
.play-icon { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.11); font-size:.66rem; }
.hero-microproof { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 22px; color:#BFA99A; font-size:.82rem; }
.hero-microproof span { display:flex; align-items:center; gap:7px; }
.hero-microproof b { color:#C9A46D; font-size:.76rem; }

.product-marquee-wrap { position:relative; margin-top:58px; width:100%; overflow:hidden; z-index:2; }
.product-marquee { width:100%; overflow:hidden; padding:18px 0 28px; }
.marquee-track { display:flex; width:max-content; gap:22px; will-change:transform; animation:skyMarquee 42s linear infinite; }
.product-marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes skyMarquee { from{transform:translate3d(0,0,0)} to{transform:translate3d(var(--marquee-distance,-50%),0,0)} }
.screen-card { flex:0 0 clamp(340px,42vw,590px); margin:0; border-radius:28px; padding:9px; background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.12); box-shadow:0 22px 70px rgba(0,0,0,.24); backdrop-filter:blur(14px); transform:translateZ(0); transition:transform .35s ease,border-color .35s ease,background .35s ease; }
.screen-card:hover { transform:translateY(-8px) scale(1.012); border-color:rgba(201,164,109,.42); background:rgba(255,255,255,.11); }
.screen-card img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:21px; box-shadow:0 12px 34px rgba(0,0,0,.18); }
.screen-card figcaption { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:11px; align-items:center; padding:14px 10px 8px; color:#fff; }
.screen-card figcaption > span { grid-row:1 / 3; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:rgba(201,164,109,.13); color:#E5C28D; font-size:.68rem; font-weight:900; }
.screen-card figcaption strong { font-size:.92rem; line-height:1.1; }
.screen-card figcaption small { color:#BFA99A; font-size:.72rem; margin-top:3px; }
.marquee-fade { position:absolute; top:0; bottom:0; width:9vw; z-index:3; pointer-events:none; }
.marquee-fade.left { left:0; background:linear-gradient(90deg,#2D070D,transparent); }
.marquee-fade.right { right:0; background:linear-gradient(-90deg,#5B0F1A,transparent); }
.hero-scroll-cue { width:max-content; margin:6px auto 0; display:flex; align-items:center; gap:10px; color:#BFA99A; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; }
.hero-scroll-cue i { width:30px; height:30px; border:1px solid rgba(255,255,255,.16); border-radius:50%; display:grid; place-items:center; font-style:normal; color:#F2E8D8; animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 50%{transform:translateY(5px)} }

@media (max-width:980px){
  .home-page .glass-nav { width:min(var(--container),calc(100% - 28px)); }
  .home-page .mobile-toggle { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; position:relative; }
  .mobile-toggle span { display:block; width:18px; height:2px; background:currentColor; position:absolute; left:12px; transition:.25s ease; }
  .mobile-toggle span:first-child { top:16px; }.mobile-toggle span:last-child { top:24px; }
  .home-page .site-header.is-scrolled .mobile-toggle { color:#5B0F1A; border-color:rgba(91,15,26,.15); background:#fff; }
  .home-page .mobile-panel.open { margin:8px 14px 0; border-radius:20px; padding:14px 20px 20px; box-shadow:0 24px 60px rgba(45,7,13,.18); }
  .hero-wow { padding-top:132px; }
  .screen-card { flex-basis:min(76vw,540px); }
}
@media (max-width:700px){
  .home-page .site-header { padding-top:8px; }
  .home-page .glass-nav { height:60px; padding:0 10px 0 12px; border-radius:18px; }
  .home-page .nav-actions .nav-demo { display:none; }
  .hero-wow { min-height:auto; padding:116px 0 42px; }
  .hero-wow h1 { font-size:clamp(3.35rem,17vw,5.25rem); line-height:.86; }
  .hero-wow-copy > p { font-size:1rem; padding:0 4px; }
  .hero-actions-wow .btn { width:auto; min-width:0; flex:1 1 190px; }
  .hero-microproof { font-size:.75rem; gap:8px 14px; }
  .product-marquee-wrap { margin-top:42px; }
  .marquee-track { gap:14px; animation-duration:30s; }
  .screen-card { flex-basis:82vw; border-radius:22px; padding:7px; }
  .screen-card img { border-radius:17px; }
  .marquee-fade { width:4vw; }
  .hero-scroll-cue { display:none; }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track,.pulse-dot,.hero-scroll-cue i { animation:none !important; }
  .screen-card:hover { transform:none; }
}

/* =========================================================
   SkySuite Website v1.4 — Mobile experience
   ========================================================= */
html, body { max-width:100%; overflow-x:hidden; }
body.menu-open { overflow:hidden; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
.mobile-toggle { position:relative; padding:0; }
.mobile-toggle span { display:block; width:18px; height:2px; border-radius:99px; background:currentColor; position:absolute; left:12px; transition:transform .24s ease, top .24s ease, opacity .2s ease; }
.mobile-toggle span:first-child { top:16px; }
.mobile-toggle span:last-child { top:24px; }
.mobile-toggle[aria-expanded="true"] span:first-child { top:20px; transform:rotate(45deg); }
.mobile-toggle[aria-expanded="true"] span:last-child { top:20px; transform:rotate(-45deg); }

@media (max-width:980px){
  .nav-actions .nav-signin,
  .nav-actions > .btn.secondary { display:none; }
  .mobile-toggle { display:grid; place-items:center; min-width:44px; min-height:44px; color:#5B0F1A; }
  .mobile-panel {
    display:grid;
    position:fixed;
    top:82px;
    left:14px;
    right:14px;
    z-index:98;
    gap:4px;
    padding:14px;
    border:1px solid rgba(91,15,26,.11);
    border-radius:24px;
    background:rgba(255,253,252,.965);
    box-shadow:0 28px 70px rgba(45,7,13,.18);
    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px) scale(.985);
    transform-origin:top center;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
    max-height:calc(100dvh - 98px);
    overflow:auto;
  }
  .mobile-panel.open {
    display:grid;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .mobile-panel a:not(.btn) {
    min-height:48px;
    display:flex;
    align-items:center;
    padding:0 13px;
    border:0;
    border-radius:13px;
    color:#5B0F1A;
    font-weight:760;
  }
  .mobile-panel a:not(.btn):hover,
  .mobile-panel a:not(.btn):focus-visible { background:#F7EFE5; }
  .mobile-panel .btn { width:100%; min-height:50px; margin-top:5px; }
  .site-header:not(.home-header) .navbar { position:relative; z-index:100; }
}

@media (max-width:700px){
  :root { --radius:20px; --radius-lg:26px; }
  .container { width:calc(100% - 28px); }
  .section { padding:58px 0; }
  .section.compact { padding:48px 0; }
  .section-title { font-size:clamp(2rem,9vw,2.65rem); line-height:1.02; letter-spacing:-.045em; }
  .section-lead { font-size:.98rem; line-height:1.62; }
  .eyebrow { margin-bottom:11px; font-size:.7rem; }
  .eyebrow::before { width:22px; }
  .btn { min-height:50px; border-radius:14px; }

  /* Mobile navigation */
  .site-header:not(.home-header) {
    padding:7px 0;
    background:rgba(255,253,252,.9);
    border-bottom:0;
    box-shadow:0 8px 28px rgba(45,7,13,.06);
  }
  .site-header:not(.home-header) .navbar {
    width:calc(100% - 20px);
    height:58px;
    padding:0 9px 0 11px;
    border:1px solid rgba(91,15,26,.09);
    border-radius:18px;
    background:rgba(255,255,255,.8);
    backdrop-filter:blur(18px);
  }
  .brand { gap:8px; font-size:1.08rem; }
  .brand-mark { width:34px; height:34px; border-radius:11px; }
  .brand-mark svg { width:20px; height:20px; }
  .nav-actions { gap:6px; }
  .nav-actions .btn.primary,
  .nav-actions .nav-demo { display:none; }
  .mobile-toggle { width:42px; height:42px; border-radius:13px; }
  .mobile-toggle span { left:11px; width:18px; }
  .mobile-panel { top:76px; left:10px; right:10px; border-radius:22px; padding:12px; max-height:calc(100dvh - 88px); }

  /* Home transparent navigation */
  .home-page .site-header { padding-top:max(8px, env(safe-area-inset-top)); }
  .home-page .glass-nav {
    width:calc(100% - 20px);
    height:58px;
    padding:0 8px 0 11px;
    border-radius:18px;
    background:rgba(45,7,13,.28);
    border-color:rgba(255,255,255,.13);
    box-shadow:0 14px 36px rgba(17,2,5,.15);
  }
  .home-page .brand { font-size:1.06rem; }
  .home-page .brand-mark { width:34px; height:34px; border-radius:11px; }
  .home-page .mobile-toggle { width:42px; height:42px; border-radius:13px; }
  .home-page .mobile-panel { top:74px; margin:0; }
  .home-page .mobile-panel.open { margin:0; padding:12px; }

  /* Mobile hero */
  .hero-wow {
    min-height:auto;
    padding:106px 0 34px;
    background:
      radial-gradient(circle at 15% 20%, rgba(139,30,45,.44), transparent 33%),
      radial-gradient(circle at 86% 9%, rgba(201,164,109,.18), transparent 31%),
      linear-gradient(145deg,#210408 0%,#39080F 48%,#5B0F1A 100%);
  }
  .hero-grid-lines { background-size:54px 54px; opacity:.12; }
  .hero-orb-one { width:340px; height:340px; right:-170px; top:70px; }
  .hero-orb-two { width:300px; height:300px; left:-150px; bottom:80px; }
  .hero-wow-copy { text-align:left; }
  .hero-kicker {
    margin:0 0 19px;
    padding:7px 11px;
    font-size:.68rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hero-wow h1 {
    margin:0 0 20px;
    max-width:100%;
    font-size:clamp(3.05rem,15.3vw,4.45rem);
    line-height:.88;
    letter-spacing:-.068em;
    text-wrap:balance;
  }
  .hero-wow h1 span { display:inline; }
  .hero-wow-copy > p {
    margin:0 0 24px;
    padding:0;
    max-width:34rem;
    color:#DCCABA;
    font-size:.98rem;
    line-height:1.6;
  }
  .hero-actions-wow {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:18px;
  }
  .hero-actions-wow .btn { width:100%; min-height:54px; flex:none; }
  .hero-primary,.hero-secondary { border-radius:15px; }
  .hero-microproof {
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:8px;
    margin:0 -14px;
    padding:1px 14px 8px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .hero-microproof::-webkit-scrollbar { display:none; }
  .hero-microproof span {
    flex:0 0 auto;
    scroll-snap-align:start;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    background:rgba(255,255,255,.05);
    font-size:.7rem;
  }

  /* Product motion: still right-to-left, optimized for touch */
  .product-marquee-wrap { margin-top:31px; overflow:visible; }
  .product-marquee { margin-left:-14px; width:calc(100% + 28px); padding:10px 0 20px; overflow:hidden; }
  .marquee-track { gap:12px; animation-duration:34s; }
  .screen-card {
    flex-basis:min(86vw,360px);
    border-radius:21px;
    padding:6px;
    box-shadow:0 18px 50px rgba(0,0,0,.22);
  }
  .screen-card img { border-radius:16px; }
  .screen-card figcaption { padding:11px 8px 7px; column-gap:9px; }
  .screen-card figcaption > span { width:29px; height:29px; border-radius:9px; }
  .screen-card figcaption strong { font-size:.84rem; }
  .screen-card figcaption small { font-size:.67rem; }
  .marquee-fade { width:18px; }
  .hero-scroll-cue { display:none; }

  /* Swipeable audience strip instead of cramped two-column text */
  .logo-strip .container {
    min-height:auto;
    display:flex;
    align-items:center;
    gap:9px;
    padding:17px 14px;
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .logo-strip .container::-webkit-scrollbar { display:none; }
  .logo-strip strong {
    flex:0 0 auto;
    grid-column:auto;
    text-align:left;
    padding-right:7px;
    font-size:.75rem;
  }
  .logo-word {
    flex:0 0 auto;
    scroll-snap-align:start;
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    font-size:.77rem;
    white-space:nowrap;
  }

  /* Content sections */
  .value-grid { gap:12px; margin-top:26px; }
  .value-card {
    padding:20px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#fff;
    box-shadow:0 10px 34px rgba(45,7,13,.055);
  }
  .value-icon { width:43px; height:43px; margin-bottom:14px; border-radius:13px; }
  .value-card h3 { font-size:1.08rem; }
  .value-card p { font-size:.91rem; }

  .feature-layout { gap:28px; }
  .feature-sticky .btn { width:100%; }
  .feature-list { border-top:0; gap:10px; }
  .feature-row {
    grid-template-columns:42px minmax(0,1fr);
    gap:12px;
    align-items:start;
    padding:17px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
  }
  .feature-icon { width:40px; height:40px; border-radius:12px; }
  .feature-row h3 { font-size:.98rem; }
  .feature-row p { font-size:.84rem; line-height:1.55; }
  .feature-tag { grid-column:2; margin-top:-2px; font-size:.64rem; }

  .campus-shell { margin-top:28px; gap:24px; }
  .campus-copy { padding-right:0; }
  .campus-copy h3 { font-size:2rem; }
  .org-map { padding:17px; border-radius:22px; }
  .org-root { width:100%; }
  .check-item { font-size:.91rem; }

  .quote-section,
  .cta-box { padding:27px 20px; border-radius:22px; }
  .cta-box .section-title { font-size:2.1rem; }
  .cta-actions { width:100%; display:grid; gap:9px; }
  .cta-actions .btn { width:100%; }

  /* Internal pages */
  .page-hero { padding:44px 0 40px; }
  .page-hero h1 { font-size:clamp(2.65rem,13vw,3.65rem); line-height:.95; }
  .page-hero p { font-size:1rem; }
  .page-grid { margin-top:26px; gap:12px; }
  .info-card { padding:20px; border-radius:19px; }
  .contact-grid { gap:18px; }
  .contact-panel,
  .form-shell { padding:21px; border-radius:20px; }
  .form-grid { gap:12px; }
  .field input, .field textarea, .field select { min-height:50px; font-size:16px; }
  .field textarea { min-height:125px; }
  .legal h2 { margin-top:31px; }

  /* Footer */
  .footer { padding-bottom:max(22px, env(safe-area-inset-bottom)); }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-grid > div:first-child,
  .footer-grid > div:last-child { grid-column:auto; }
  .footer-bottom { gap:9px; align-items:flex-start; }
}

@media (max-width:430px){
  .container { width:calc(100% - 24px); }
  .hero-wow { padding-top:101px; }
  .hero-wow h1 { font-size:clamp(2.82rem,15vw,3.8rem); }
  .hero-kicker { max-width:100%; font-size:.64rem; }
  .hero-wow-copy > p { font-size:.93rem; }
  .screen-card { flex-basis:88vw; }
  .section { padding:52px 0; }
  .section-title { font-size:clamp(1.92rem,9.6vw,2.35rem); }
  .page-hero h1 { font-size:2.72rem; }
  .contact-panel,.form-shell { padding:18px; }
}

@supports (padding: max(0px)) {
  @media (max-width:700px){
    .home-page .site-header { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
    .mobile-panel { left:max(10px, env(safe-area-inset-left)); right:max(10px, env(safe-area-inset-right)); }
  }
}

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  .product-marquee { overflow-x:auto; scrollbar-width:none; }
  .product-marquee::-webkit-scrollbar { display:none; }
  .marquee-track { animation:none !important; padding-inline:14px; }
}