/* AM Cloud Solutions — enterprise theme layer (loads after styles.css)
   Deep navy base, steel slate, icy-blue accent; editorial serif headings; flat surfaces with fine borders. */
:root{
  --bg:#070E1E; --bg-2:#0D1B2A; --panel:#0D1B2A; --panel-2:#12233A;
  --line:rgba(148,163,184,.20); --line-2:rgba(148,163,184,.08);
  --txt:#E8EDF5; --mut:#9FB0C6; --dim:#7F91AA;
  --blue:#3B82F6; --blue-d:#2563EB; --ind:#3B82F6; --sky:#9CC2FF; --cyan:#9CC2FF;
  --paper:#F5F7FA; --paper-3:#EDF1F6; --ink:#0D1B2A; --ink-2:#334155; --ink-3:#5B6B80; --pline:#DDE3EC;
  --grad:linear-gradient(135deg,#3B82F6,#3B82F6); --grad-cta:linear-gradient(180deg,#3B82F6,#3B82F6);
  --radius:6px;
  --sh-1:0 1px 0 rgba(13,27,42,.04); --sh-2:0 18px 40px -22px rgba(7,14,30,.35);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-d:'Playfair Display','Georgia','Times New Roman',serif;
}
body{background:var(--bg)}
h1,h2,h3,h4,h5{font-family:var(--font-d);font-weight:600;letter-spacing:-.01em;line-height:1.15}
/* UI-level headings stay in the sans for density */
.mod h3,.bcard h3,.vcard h3,.hw-item h3,.step h3,.fit h3,footer h3,.quick h3,.plan h3,.nav h3,.chip b,.strip b{font-family:var(--font);font-weight:650;letter-spacing:0}
.grad-text,.hero .grad-text,.page-hero .grad-text,.custom .grad-text{background:none;-webkit-text-fill-color:currentColor;color:#9CC2FF}
.light .grad-text{color:var(--blue-d)}
section{padding:96px 0}
.eyebrow{letter-spacing:.16em;color:#9CC2FF;font-size:11.5px}
.eyebrow::before{background:#3B82F6;height:1px;width:28px}
.light .eyebrow{color:var(--blue-d)}
.head h2{font-weight:600}

/* flat controls, fine borders */
.btn{border-radius:4px;padding:14px 24px;letter-spacing:.01em}
.btn-primary{background:#3B82F6;box-shadow:none;border-color:#3B82F6}
.btn-primary:hover{background:#2563EB;transform:none;box-shadow:0 10px 24px -14px rgba(59,130,246,.9)}
.btn-ghost{border-color:rgba(203,213,225,.35);background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(226,232,240,.6)}
.light .btn-ghost:hover{background:var(--paper-3)}
.btn-wa{background:transparent;color:#E8EDF5;border-color:rgba(203,213,225,.35);box-shadow:none}
.btn-wa:hover{background:rgba(255,255,255,.06);transform:none}
.light .btn-wa{color:var(--ink);border-color:#CBD5E1}

/* header */
.nav{background:rgba(7,14,30,.88);border-bottom:1px solid var(--line)}
.nav-in{padding:10px 24px}
.logo{gap:12px}
.logo .lm{width:36px;height:36px;border:1px solid rgba(156,194,255,.55);display:grid;place-items:center;border-radius:3px;font:600 15px/1 'Playfair Display',Georgia,serif;color:#fff;letter-spacing:-.02em;background:linear-gradient(180deg,rgba(59,130,246,.18),rgba(59,130,246,.04))}
.logo .lt{display:flex;flex-direction:column}
.logo .lt b{font:600 17px/1.1 'Playfair Display',Georgia,serif;letter-spacing:-.02em;color:#fff}
.logo .lt b i{font-style:normal;color:#9CC2FF}
.logo .lt small{font:600 9.5px/1.2 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#7F91AA;margin-top:3px}
.nav nav a{font-size:13.5px;letter-spacing:.01em}
.nav .cta,.nav a.cta{border-radius:4px;background:#3B82F6;border:1px solid #3B82F6;box-shadow:none}

/* hero */
.hero{background:linear-gradient(180deg,#070E1E 0%,#0D1B2A 100%);padding-top:140px}
.hero::before{opacity:.5;background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px)}
.hero h1{font-size:clamp(32px,4vw,52px);font-weight:600;letter-spacing:-.02em;line-height:1.08}
.hero .lead{color:#AEBCCF;font-size:18px}
.pill{border-radius:2px;background:transparent;letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:#9CC2FF;border-color:rgba(156,194,255,.35)}
.pill i{display:none}
.hero .meta span::before{color:#9CC2FF}
.strip{background:#0A1424;border-top:1px solid var(--line)}
.strip b{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:34px;letter-spacing:-.02em}
.strip span{text-transform:uppercase;letter-spacing:.1em;font-size:11.5px}

/* device frame (hero) */
.device{position:relative}
.laptop{position:relative;margin:0 auto;max-width:640px}
.laptop .lid{background:#0A1424;border:1px solid rgba(148,163,184,.35);border-radius:12px 12px 4px 4px;padding:10px 10px 12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.03) inset}
.laptop .scr{border-radius:3px;overflow:hidden;background:#fff;border:1px solid #0b1220}
.laptop .scr img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.laptop .base{height:14px;margin:0 -4%;background:linear-gradient(180deg,#1b2a40,#0e1828);border-radius:0 0 14px 14px;border:1px solid rgba(148,163,184,.25);border-top:0;position:relative}
.laptop .base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:16%;height:5px;background:#0A1424;border-radius:0 0 8px 8px}
.phone{position:absolute;right:-6px;bottom:-26px;width:26%;max-width:150px;background:#0A1424;border:1px solid rgba(148,163,184,.4);border-radius:18px;padding:6px;box-shadow:0 30px 50px -20px rgba(0,0,0,.8)}
.phone img{border-radius:13px;width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top left}
.glass{position:absolute;right:-8px;bottom:-34px;z-index:3;padding:14px 16px;border-radius:8px;background:rgba(13,27,42,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(156,194,255,.28);color:#E8EDF5;max-width:210px}
.glass small{display:block;font:600 10px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#9CC2FF;margin-bottom:6px}
.glass b{font:500 13.5px/1.4 var(--font)}

/* light content: flat panels with fine borders */
.pcard,.mod,.bcard,.hw-callout,.fit,details{border-radius:6px;border-color:#DDE3EC;box-shadow:none}
.pcard:hover,.mod:hover,.bcard:hover{transform:none;border-color:#9CB4D6;box-shadow:var(--sh-2)}
.mod .ic,.bcard .ic,.vcard .ic,.hw-item .ic,.addr-ic,.cbox .ic,.fit h3 .ic{background:#0D1B2A;border-radius:4px}
.mod .tag{background:transparent;color:#1D4ED8;border:1px solid #B8CCEA;border-radius:2px;letter-spacing:.12em}
.pshot,.frame{border-radius:0}
.tagline{letter-spacing:.14em}
.bestfor span,.chips-row span{border-radius:2px}
.vcard,.custom .vcard{border-radius:6px;background:rgba(255,255,255,.03)}
.custom{background:linear-gradient(180deg,#0D1B2A,#070E1E)}
.page-hero{background:linear-gradient(180deg,#070E1E,#0D1B2A)}
.page-hero h1,.hero h1{color:#fff}
footer{background:#050A15}
.chip{border-radius:6px}

/* tablet/phone */
@media (max-width:900px){
  .hero{padding-top:112px}
  .phone,.glass{display:none}
  .strip-in{grid-template-columns:repeat(2,1fr)}
}

.page-hero h1,.hero h1{letter-spacing:-.01em}
.price,.plan .amt{font-family:var(--font-d)}

/* contained icons (never let an inline SVG fill its card) */
.ic{display:grid;place-items:center;flex:none}
.ic svg{width:22px;height:22px;max-width:100%;max-height:100%}
.fit h3 .ic{width:40px;height:40px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.35);border-radius:8px}
.fit h3 .ic svg{width:20px;height:20px;stroke:#2563EB;fill:none}
.fit{padding:24px;border-radius:8px}
.fit:hover{border-color:#9CB4D6;box-shadow:var(--sh-2);transform:none}

/* header logo: larger, no boxed mark */
.logo{gap:11px}
.logo .lm{width:44px;height:44px;border:0;border-radius:10px;background:#3B82F6;font:700 19px/1 'Playfair Display',Georgia,serif;color:#fff;letter-spacing:-.03em}
.logo .lt b{font:500 21px/1 'Inter',system-ui,sans-serif;letter-spacing:.01em;color:#fff;text-transform:uppercase}
.logo .lt b em{font:800 21px/1 'Playfair Display',Georgia,serif;font-style:normal;color:#fff;margin-right:2px}
.logo .lt small{font:600 10px/1 var(--font);letter-spacing:.32em;margin-top:6px;color:#9CB0CC}
@media (max-width:420px){.logo .lm{width:38px;height:38px}.logo .lt b{font-size:18px}.logo .lt small{letter-spacing:.24em}}

/* brand mark: bespoke monogram, no box */
.logo{gap:11px}
.logo .lmark{width:36px;height:36px;flex:none;filter:drop-shadow(0 0 10px rgba(59,130,246,.35))}
.logo .lt b{display:flex;align-items:center;gap:6px;font:700 20px/1 'Inter',system-ui,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.logo .lt b .dot{width:6px;height:6px;border-radius:50%;background:#9CC2FF;box-shadow:0 0 8px rgba(156,194,255,.9)}
.logo .lt small{font:600 9.5px/1 'Inter',sans-serif;letter-spacing:.25em;color:#94A3B8;margin-top:6px}