/* ══════════════════════════════════════════════
   Sibasi Sentinel — landing.css
   Public landing page. Loaded on its own so the
   app shell's fixed-height layout does not apply.
   Palette taken from the Sibasi logo.
   ══════════════════════════════════════════════ */

:root {
    /* Sibasi blues (logo) */
    --b-ink:   #082a4d;   /* deep navy — headings, dark panels */
    --b-deep:  #0b3966;   /* navy hover */
    --b1:      #0070c0;   /* primary logo blue — accent */
    --b2:      #2e75b6;   /* mid logo blue */
    --b3:      #9dc3e6;   /* light logo blue */
    --b-tint:  #e9f2fb;

    --bg:      #f7f8fa;
    --bg-alt:  #eef2f7;
    --card:    #ffffff;
    --txt:     #0f1b2b;
    --muted:   #5a6676;
    --line:    #dfe5ec;

    /* Neutral "material" tones for the decorative panels */
    --stone:   #d9dde2;
    --stone-2: #c7ccd3;

    --ease: cubic-bezier(.4,0,.2,1);
    --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: 16px; line-height: 1.6;
    background: var(--bg); color: var(--txt);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg { display: block }
a { color: inherit; text-decoration: none }
:focus-visible { outline: 2px solid var(--b1); outline-offset: 3px; border-radius: 6px }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; position: relative }
.accent { color: var(--b1) }

.eyebrow {
    display: block; font-size: 12px; font-weight: 600; color: var(--b-ink);
    letter-spacing: .28em; text-transform: uppercase; margin-bottom: 20px;
}

/* ── BUTTONS ── */
.btn {
    display: inline-flex; align-items: center; gap: 12px;
    height: 50px; padding: 0 24px; border-radius: 999px;
    font: 600 15px/1 'Outfit', sans-serif; white-space: nowrap;
    transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.btn svg { flex-shrink: 0 }
.btn .arrow { transition: transform .15s var(--ease) }
.btn:hover .arrow { transform: translateX(3px) }
.btn-dark { background: var(--b-ink); color: #fff }
.btn-dark:hover { background: var(--b-deep) }
.btn-light { background: #fff; color: var(--b-ink) }
.btn-light:hover { background: var(--b-tint) }
.btn-ghost { background: var(--card); border: 1px solid var(--line); color: var(--txt) }
.btn-ghost:hover { border-color: var(--b3) }
.btn-sm { height: 42px; padding: 0 20px; font-size: 14px }

/* ── HEADER ── */
.top {
    position: sticky; top: 0; z-index: 30;
    background: rgba(247,248,250,.94); backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s var(--ease);
}
.top.scrolled { border-bottom-color: var(--line) }
.top-inner { display: flex; align-items: center; justify-content: space-between; height: 76px }
.brand { display: flex; align-items: center; gap: 12px }
.brand img { height: 34px; width: auto; mix-blend-mode: multiply }
.brand-name {
    padding-left: 12px; border-left: 1px solid var(--line);
    font-weight: 600; font-size: 16px; color: var(--b-ink);
}
.top-nav { display: flex; align-items: center; gap: 36px }
.top-nav a:not(.btn) { font-size: 15px; color: var(--muted); transition: color .15s }
.top-nav a:not(.btn):hover { color: var(--b-ink) }

/* ── DECORATIVE PANELS ── */
/* Vertical timber-style slats, drawn in blue-grey so they sit with the palette */
.slats {
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(8,42,77,.18)),
        repeating-linear-gradient(90deg, #a9b8c9 0 10px, #7f93aa 10px 13px, #b7c4d3 13px 22px);
}
/* Soft lit concrete wall */
.stone {
    background:
        radial-gradient(120% 90% at 85% 10%, rgba(255,255,255,.75), transparent 60%),
        linear-gradient(160deg, var(--stone) 0%, var(--stone-2) 100%);
}

/* ── HERO ── */
/* overflow clips the decorative shapes at the header line */
.hero { padding: 56px 0 96px; position: relative; overflow: hidden }
h1, h2 { text-wrap: balance }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center }
.hero h1 {
    font-size: clamp(40px, 5.4vw, 64px); line-height: 1.04;
    font-weight: 700; letter-spacing: -.03em; color: var(--b-ink);
}
.hero-lede { margin-top: 26px; font-size: 17px; color: var(--muted); max-width: 31em }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--muted) }

.hero-visual { position: relative; padding: 40px 0 56px 24px }
.hero-visual .arch {
    position: absolute; top: -40px; left: 18%; width: 52%; height: 70%;
    background: var(--b-ink); border-radius: 999px 999px 0 0;
}
.hero-visual .panel {
    position: absolute; top: -96px; right: -32px; width: 34%; height: 76%;
    border-radius: 0 0 0 28px;
}
.hero-visual .ring {
    position: absolute; bottom: 0; right: 4%; width: 46%; aspect-ratio: 1;
    border-radius: 50%; background: var(--b3); opacity: .55;
}
.preview {
    position: relative; z-index: 2;
    background: var(--card); border-radius: 18px;
    box-shadow: 0 2px 4px rgba(8,42,77,.04), 0 24px 48px -16px rgba(8,42,77,.22);
    overflow: hidden;
}
.preview-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.preview-head b { display: block; font-size: 15px; font-weight: 600; color: var(--b-ink) }
.preview-head small { font-size: 12px; color: var(--muted) }
.preview-tools { display: flex; gap: 6px; color: var(--b-ink) }
.preview-tools span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px }
.preview-tools span:first-child { background: var(--b-tint) }

.row {
    display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 14px;
    padding: 16px 22px; border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: none }
.row-ico {
    grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; background: var(--b-tint); color: var(--b1);
}
.row-ico.call { background: #e6f5ee; color: #11845b }
.row-subj { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.row-time { font-size: 12px; color: var(--muted) }
.row-from { grid-column: 2 / -1; font-size: 13px; color: var(--muted) }
.row-meta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px }
.tag {
    display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
    border-radius: 999px; font-size: 12px; font-weight: 500;
}
.t-blue   { background: #e5f0fb; color: #0b5ea8 }
.t-sky    { background: #eaf4fd; color: #2e6da4 }
.t-green  { background: #e3f5ec; color: #11744f }
.t-amber  { background: #fdf2e0; color: #8f5a0b }
.t-violet { background: #efeafd; color: #5b3bb8 }
.t-rose   { background: #fde9ea; color: #a8343f }

/* ── INTRO (image + statement) ── */
.intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; padding: 24px 0 72px }
.intro-visual { position: relative; height: 340px }
.intro-visual .stone {
    position: absolute; inset: 0 22% 0 -32px;
    border-radius: 0 0 140px 0; overflow: hidden;
}
/* Diagonal shadow, as if cast across the wall */
.intro-visual .stone::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(118deg, transparent 0 38%, rgba(8,42,77,.10) 38% 58%, transparent 58%);
}
.intro-visual .stone::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 46%; width: 1px; background: rgba(8,42,77,.12);
}
.intro-visual .arch {
    position: absolute; top: 0; right: 10%; width: 34%; height: 50%;
    background: var(--b-ink); border-radius: 0 999px 0 0;
}
.intro-visual .dot {
    position: absolute; bottom: 16%; right: 10%; width: 30%; aspect-ratio: 1;
    border-radius: 50%; background: var(--b1);
}
.intro h2, .sect-title {
    font-size: clamp(30px, 3.6vw, 42px); line-height: 1.12;
    font-weight: 700; letter-spacing: -.025em; color: var(--b-ink);
}
.intro p { margin-top: 20px; font-size: 17px; color: var(--muted); max-width: 28em }

/* ── CAPABILITIES ── */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); padding: 40px 0 88px }
.cap { padding: 0 40px }
.cap:first-child { padding-left: 0 }
.cap:last-child { padding-right: 0 }
.cap + .cap { border-left: 1px solid var(--line) }
.cap-icon { color: var(--b-ink); margin-bottom: 22px }
.cap h3 { font-size: 20px; font-weight: 600; color: var(--b-ink) }
.cap > p { margin-top: 10px; color: var(--muted); font-size: 15px }
.cap ul { list-style: none; margin-top: 24px; display: grid; gap: 14px }
.cap li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 15px; color: #34404f }
.cap li svg { color: var(--b1); margin-top: 4px }

/* ── HOW IT WORKS ── */
.how { background: var(--bg-alt); padding: 88px 0 96px }
.how-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; margin-bottom: 64px }
.how-head p { font-size: 16px; color: var(--muted); max-width: 26em; justify-self: end }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px }
.step-top { display: flex; align-items: center; gap: 18px; margin-bottom: 26px }
.step-n { font-size: 15px; font-weight: 600; color: var(--b1) }
.step-ico {
    width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center; background: var(--card); color: var(--b-ink);
    box-shadow: 0 4px 16px -6px rgba(8,42,77,.18);
}
.step-line { flex: 1; height: 1px; background: var(--b3) }
.step:last-child .step-line { display: none }
.step h3 { font-size: 19px; font-weight: 600; color: var(--b-ink) }
.step p { margin-top: 8px; font-size: 15px; color: var(--muted) }

/* ── CONTROL ── */
.control { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; padding: 96px 0 }
.control > div > p { margin-top: 20px; font-size: 17px; color: var(--muted); max-width: 24em }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.check {
    display: grid; grid-template-columns: 36px 1fr; gap: 16px;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px;
}
.check-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--b-tint); color: var(--b1) }
.check b { display: block; font-size: 16px; font-weight: 600; color: var(--b-ink) }
.check span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted) }

/* ── CLOSING ── */
.closing { position: relative; background: var(--b-ink); color: #fff; overflow: hidden }
.closing-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 380px }
.closing-visual { position: relative; align-self: stretch }
.closing-visual .slats {
    position: absolute; top: 56px; bottom: 0; left: -32px; right: 18%;
    border-radius: 0 220px 0 0;
}
.closing-visual .dot {
    position: absolute; top: -70px; left: -90px; width: 260px; aspect-ratio: 1;
    border-radius: 50%; background: var(--b1);
}
.closing-visual .glow {
    position: absolute; bottom: 0; right: 6%; width: 38%; height: 70%;
    border-radius: 999px 999px 0 0; background: var(--b2); opacity: .55;
}
.closing-copy { padding: 72px 0 72px 24px; position: relative }
.closing .eyebrow { color: var(--b3) }
.closing h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em }
.closing p { margin-top: 14px; color: rgba(255,255,255,.74); font-size: 16px }
.closing .btn { margin-top: 32px }

/* ── FOOTER ── */
.foot { padding: 32px 0 }
.foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; color: var(--muted) }
.foot-inner img { height: 28px; width: auto; mix-blend-mode: multiply }
.foot-links { display: flex; align-items: center; gap: 14px }
.foot-links i { width: 1px; height: 14px; background: var(--line) }
.foot a:hover { color: var(--b-ink) }

section { scroll-margin-top: 84px }

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
    .hero-grid, .intro, .control, .how-head { grid-template-columns: minmax(0,1fr); gap: 48px }
    .hero-visual { padding: 32px 0 48px }
    .hero-visual .arch { top: 0; height: 60% }
    .hero-visual .panel { top: 0; right: -32px; height: 70% }
    .intro { padding-top: 0 }
    .intro-visual { height: 260px }
    .caps { grid-template-columns: 1fr; gap: 40px }
    .cap, .cap:first-child, .cap:last-child { padding: 0 }
    .cap + .cap { border-left: none; border-top: 1px solid var(--line); padding-top: 40px }
    .how-head p { justify-self: start }
    .steps { grid-template-columns: 1fr 1fr; gap: 40px 32px }
    .step:nth-child(2) .step-line { display: none }
    .closing-grid { grid-template-columns: 1fr }
    .closing-visual { height: 200px }
    .closing-copy { padding: 48px 0 64px }
}
@media (max-width: 640px) {
    .wrap { padding: 0 16px }
    .top-nav a:not(.btn), .brand-name { display: none }
    .hero { padding: 32px 0 72px }
    .hero-visual .panel { right: -16px }
    .row { grid-template-columns: 32px 1fr; padding: 14px 16px; gap: 2px 12px }
    .row-ico { width: 32px; height: 32px }
    .row-time { display: none }
    .preview-head { padding: 16px }
    .intro-visual .stone { left: -16px }
    .steps { grid-template-columns: 1fr }
    .step-line { display: none }
    .checks { grid-template-columns: 1fr }
    .control { padding: 72px 0 }
    .closing-visual .slats { left: -16px }
    .foot-inner { flex-direction: column; align-items: flex-start }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }
    * { transition: none !important }
}