/* ============================================================
   OmniPremise — property-management operations.
   Brand-quiet Material-3: composed dark-slate surfaces, a single
   quiet cobalt accent, Inter + JetBrains Mono, minimal ambiance.
   Deliberately calmer than the other products (operators are working).
   Uses shared frame.css for nav/footer/portal/reveal.
   ============================================================ */

:root{
  --ink:#0f1720;
  --surface:#16212e;
  --surface-2:#111b26;
  --paper:#eef2f7;
  --paper-dim:#9fb0c4;
  --paper-faint:#6b7c90;
  --hair:rgba(255,255,255,.09);
  --hair-strong:rgba(255,255,255,.16);
  --accent:#5b82c4;      /* quiet cobalt */
  --accent-2:#4f6ef7;
  --ease:cubic-bezier(.16,1,.3,1);
}

html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--ink); color:var(--paper);
  font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased; line-height:1.65; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* subtle, composed backdrop (no particles/glow) */
.bg{ position:fixed; inset:0; z-index:-1; background:
  radial-gradient(120% 90% at 85% -10%, rgba(91,130,196,.10), transparent 55%),
  linear-gradient(180deg,#111c28,#0f1720 60%,#0c141d); }

/* type */
h1,h2,h3,h4{ font-family:"Inter",sans-serif; font-weight:800; line-height:1.1; letter-spacing:-.01em; }
.eyebrow{ font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:.7em; }
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--accent); display:inline-block; }
.display{ font-size:clamp(2.4rem,5.6vw,4.6rem); }
.h-big{ font-size:clamp(1.9rem,4vw,3rem); }
.lede{ font-size:clamp(1.02rem,1.7vw,1.28rem); color:var(--paper-dim); line-height:1.62; max-width:56ch; }
.lede strong{ color:var(--paper); font-weight:600; }

section{ position:relative; padding:clamp(60px,10vh,116px) 24px; }
.inner{ max-width:var(--frame-maxw,1200px); margin:0 auto; }
.section-head{ max-width:62ch; margin-bottom:clamp(30px,5vh,52px); }
.section-head .lede{ margin-top:16px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:"Inter",sans-serif; font-weight:600; font-size:.95rem;
  padding:13px 22px; border-radius:11px; cursor:pointer; transition:transform .25s var(--ease),box-shadow .25s,border-color .25s,color .25s; }
.btn-primary{ background:var(--accent); color:#0a0f16; font-weight:700; border:none; }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(91,130,196,.32); }
.btn-ghost{ border:1px solid var(--hair-strong); color:var(--paper); background:transparent; }
.btn-ghost:hover{ border-color:var(--accent); transform:translateY(-3px); }

/* hero */
.hero{ min-height:88vh; display:flex; flex-direction:column; justify-content:center; padding-top:120px; }
.hero .eyebrow{ margin-bottom:22px; }
.hero h1{ margin:0 0 16px; max-width:18ch; }
.hero .accent{ color:var(--accent); }
.hero .lede{ margin-bottom:30px; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* two-level model */
.levels{ border-top:1px solid var(--hair); background:var(--surface-2); }
.levels-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.level{ background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:26px; }
.level .num{ font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.2em; color:var(--accent); }
.level h3{ font-size:1.2rem; margin:8px 0 8px; }
.level p{ color:var(--paper-dim); font-size:.92rem; }

/* feature cards */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card{ background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:26px 24px;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s; }
.card:hover{ transform:translateY(-5px); border-color:var(--hair-strong); box-shadow:0 20px 44px rgba(0,0,0,.4); }
.card .ci{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:15px; background:rgba(91,130,196,.14); }
.card .ci svg{ width:24px; height:24px; fill:none; stroke:var(--accent); stroke-width:1.7; }
.card h4{ font-size:1.12rem; margin-bottom:7px; }
.card p{ color:var(--paper-dim); font-size:.9rem; line-height:1.55; }

/* everything-in-the-box checklist */
.feature-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px 28px; }
.fl-col h4{ font-size:1.05rem; margin-bottom:13px; }
.fl-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.fl-col li{ position:relative; padding-left:24px; font-size:.9rem; color:var(--paper-dim); line-height:1.5; }
.fl-col li::before{ content:""; position:absolute; left:0; top:.5em; width:12px; height:7px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }

/* pricing */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tier{ border:1px solid var(--hair); border-radius:18px; padding:32px 26px; background:var(--surface);
  display:flex; flex-direction:column; gap:15px; transition:transform .35s var(--ease); }
.tier.feature{ border-color:color-mix(in srgb,var(--accent) 55%,transparent); box-shadow:0 0 0 1px rgba(91,130,196,.2),0 22px 54px rgba(0,0,0,.4); }
.tier:hover{ transform:translateY(-5px); }
.tier .t-name{ font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.tier .t-price{ font-weight:800; font-size:1.9rem; }
.tier .t-price small{ font-weight:400; font-size:.8rem; color:var(--paper-faint); }
.tier ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.tier li{ font-size:.88rem; color:var(--paper-dim); padding-left:24px; position:relative; }
.tier li::before{ content:""; position:absolute; left:0; top:.5em; width:12px; height:7px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }
.tier .btn{ margin-top:auto; justify-content:center; }
.price-note{ text-align:center; margin-top:20px; font-family:"JetBrains Mono",monospace; font-size:.72rem; color:var(--paper-faint); }

/* contact */
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.contact form{ display:flex; flex-direction:column; gap:13px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-faint); }
.field input,.field textarea{ background:var(--ink); border:1px solid var(--hair); border-radius:10px; padding:12px 14px;
  color:var(--paper); font-family:"Inter",sans-serif; font-size:.94rem; transition:border-color .2s; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:104px; }
.contact-or{ display:flex; align-items:center; gap:12px; margin:18px 0 12px; color:var(--paper-faint);
  font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; }
.contact-or::before,.contact-or::after{ content:""; flex:1; height:1px; background:var(--hair); }
.wa-btn{ background:#25D366; color:#06281a; border:none; }
.wa-btn:hover{ background:#22c35e; transform:translateY(-3px); box-shadow:0 12px 30px rgba(37,211,102,.3); }
.wa-btn svg{ width:20px; height:20px; }

/* reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease),transform .75s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s }

/* responsive */
@media (max-width:900px){ .grid,.levels-grid,.price-grid,.feature-list{ grid-template-columns:1fr 1fr; } .contact-wrap{ grid-template-columns:1fr; } }
@media (max-width:560px){ .grid,.levels-grid,.price-grid,.feature-list{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* ============================================================
   JBNC BRAND LAYER (brand pack, 2026-08) — brand-quiet application.
   Navy #173140 surfaces, calm teal #46A9A9 accent, cyan #10E7F0
   reserved for hover/focus. Michroma display + Space Mono labels.
   ============================================================ */
:root{
  --ink:#0D1C26; --surface:#173140; --surface-2:#122835;
  --paper:#F3F3F4; --paper-dim:#A7BFC9; --paper-faint:#6F8A96;
  --hair:rgba(243,243,244,.10); --hair-strong:rgba(243,243,244,.20);
  --accent:#46A9A9; --accent-2:#10E7F0;
}
.bg{ background:
  radial-gradient(120% 90% at 85% -10%, rgba(70,169,169,.12), transparent 55%),
  linear-gradient(180deg,#14303C,#0D1C26 60%,#0A161E); }
.display, .h-big{ font-family:"Michroma",sans-serif; font-weight:400; letter-spacing:.01em; line-height:1.16; }
.display{ font-size:clamp(1.9rem,4.4vw,3.6rem); }
.h-big{ font-size:clamp(1.4rem,3vw,2.3rem); }
.eyebrow, .level .num, .tier .t-name, .price-note, .contact-or, .field label,
.portal-btn, .frame-foot-copy{ font-family:"Space Mono",monospace; }
.btn-primary{ background:#46A9A9; color:#0A161E; }
.btn-primary:hover{ box-shadow:0 14px 34px rgba(70,169,169,.35); }
.btn-ghost:hover{ border-color:#10E7F0; color:#10E7F0; }
.frame-link:hover, .frame-back:hover{ color:#10E7F0; }
.portal-btn.solid{ background:#46A9A9; border-color:#46A9A9; color:#0A161E; }
.card .ci{ background:rgba(70,169,169,.14); }
.card .ci svg{ stroke:#46A9A9; }
.tier.feature{ border-color:rgba(70,169,169,.55); box-shadow:0 0 0 1px rgba(70,169,169,.2),0 22px 54px rgba(0,0,0,.4); }
.field input:focus, .field textarea:focus{ border-color:#10E7F0; }