/* ============================================================================
   Sirocco Innovations LLC — site styles
   ----------------------------------------------------------------------------
   Self-contained on purpose: no web fonts, no CDN, no external requests. The
   whole site is three HTML files and this stylesheet, so it serves correctly
   from any host without configuration, and there is nothing to break later.

   DARK PALETTE NOTES, since dark is not just light-with-colours-flipped:

   • The background is #14161a, not #000. Pure black against light text creates
     harsh edges and halation, and it leaves no room to raise a surface above
     it. Panels sit at #1c1f25 so cards read as lifted without needing shadows.
   • Text is #f2f3f5, not #fff. Pure white on near-black is the highest
     contrast a screen can produce, which reads as glare in long paragraphs.
   • Headings are LIGHTER here than they would be on white. Light type on a
     dark ground optically gains weight, so the same numeric weight looks
     heavier. 600 on dark reads about like 650 on white.
   ========================================================================= */

:root {
    --bg:         #14161a;
    --surface:    #1c1f25;
    --surface-hi: #22262e;
    --ink:        #f2f3f5;
    --ink-soft:   #c4cad3;
    --muted:      #9aa3ae;
    --line:       #2a2e36;
    --line-soft:  #23272e;
    --accent:     #7fb2d9;
    --accent-dim: #a3c8e6;

    --measure: 34rem;
    --page:    62rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.wrap {
    width: 100%;
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 1.75rem;
}

main { padding-bottom: 5rem; }

section + section { margin-top: 4.5rem; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-head {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.site-head .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.011em;
}

.wordmark .mark {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
    transform: translateY(-0.05rem);
}

nav ul {
    display: flex;
    gap: 1.9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.94rem;
    padding-bottom: 0.2rem;
    border-bottom: 1.5px solid transparent;
    transition: color 0.15s ease;
}

nav a:hover { color: var(--ink); }

nav a[aria-current="page"] {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

/* ── Products dropdown ───────────────────────────────────────────────────────
   Built on <details> rather than a scripted menu. It opens on click, closes on
   click, is reachable and operable from the keyboard, and works on touch, all
   natively. The only script involved closes it on Escape or an outside click,
   which <details> does not do on its own. With scripting off the menu still
   works, it just stays open until you click the label again.
   ------------------------------------------------------------------------- */

.has-menu { position: relative; }

.menu > summary {
    list-style: none;          /* Firefox */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--muted);
    font-size: 0.94rem;
    padding-bottom: 0.2rem;
    border-bottom: 1.5px solid transparent;
    transition: color 0.15s ease;
    user-select: none;
}

.menu > summary::-webkit-details-marker { display: none; }  /* Safari/Chrome */

.menu > summary:hover { color: var(--ink); }

.menu[open] > summary,
.menu.is-current > summary { color: var(--ink); }

.menu.is-current > summary { border-bottom-color: var(--accent); }

.menu > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Chevron, drawn from two borders so there is no icon file to load. */
.menu > summary::after {
    content: "";
    width: 0.34rem;
    height: 0.34rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.11rem) rotate(45deg);
    transition: transform 0.15s ease;
}

.menu[open] > summary::after {
    transform: translateY(0.04rem) rotate(-135deg);
}

.menu-panel {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    z-index: 30;
    min-width: 12.5rem;
    display: block;             /* the parent nav ul is flex; this one is not */
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: var(--surface-hi);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
}

.menu-panel li + li { margin-top: 0.12rem; }

.menu-panel a {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: 7px;
    border-bottom: 0;
    color: var(--ink-soft);
    font-size: 0.93rem;
    white-space: nowrap;
}

.menu-panel a:hover {
    background: rgba(127, 178, 217, 0.11);
    color: var(--ink);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { padding: 5.5rem 0 4.25rem; }

.eyebrow {
    margin: 0 0 1.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent);
}

h1 {
    margin: 0 0 1.25rem;
    font-size: clamp(2.1rem, 5.2vw, 3.15rem);
    line-height: 1.13;
    letter-spacing: -0.026em;
    font-weight: 600;
}

/* The home page leads with the company name rather than a statement, so it is set
   larger and tighter than a normal page heading. Names carry tighter tracking than
   sentences at the same size: the eye reads a name as one shape, and default
   spacing at this scale makes it look loose and set-in-parts. */
h1.name {
    font-size: clamp(2.55rem, 7.4vw, 4.35rem);
    line-height: 1.04;
    letter-spacing: -0.034em;
    margin-bottom: 1.45rem;
}

.lede {
    margin: 0;
    max-width: var(--measure);
    font-size: 1.16rem;
    line-height: 1.64;
    color: var(--ink-soft);
}

/* ── Type ────────────────────────────────────────────────────────────────── */

h2 {
    margin: 0 0 1.15rem;
    font-size: 1.32rem;
    letter-spacing: -0.016em;
    font-weight: 600;
}

h3 {
    margin: 0 0 0.5rem;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.007em;
}

p { margin: 0 0 1.05rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.prose { color: var(--ink-soft); }

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-dim); }

.rule {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}

/* ── Product cards ───────────────────────────────────────────────────────── */

.card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.85rem 1.9rem;
    text-decoration: none;
    color: inherit;
    max-width: 40rem;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

a.card:hover {
    border-color: #3f5568;
    background: var(--surface-hi);
    transform: translateY(-1px);
}

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
}

.card h3 { margin: 0; font-size: 1.14rem; }

.card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.98rem;
}

.tag {
    flex: none;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: var(--accent);
    /* Translucent rather than a flat swatch, so the chip sits on the card
       instead of punching a hole in it. */
    background: rgba(127, 178, 217, 0.13);
    border: 1px solid rgba(127, 178, 217, 0.22);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
}

.card-more {
    display: inline-block;
    margin-top: 1.05rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent);
}

/* ── Feature list ────────────────────────────────────────────────────────── */

.points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    max-width: 52rem;
}

.points li { padding-left: 0.95rem; border-left: 2px solid var(--line); }
.points p { font-size: 0.96rem; color: var(--muted); margin: 0; }

/* ── Contact ─────────────────────────────────────────────────────────────── */

.contact-grid {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    max-width: 46rem;
}

.contact-grid dt {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

.contact-grid dd {
    margin: 0;
    font-size: 0.98rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-foot {
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 2.4rem 0;
}

.site-foot .wrap {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.87rem;
    color: var(--muted);
}

.site-foot p { margin: 0; max-width: none; }

/* ── Focus, for keyboard users ───────────────────────────────────────────── */

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ── Small screens ───────────────────────────────────────────────────────── */

@media (max-width: 34rem) {
    .site-head .wrap { justify-content: flex-start; }
    nav ul { gap: 1.35rem; }
    .hero { padding: 3.75rem 0 3rem; }
    section + section { margin-top: 3.5rem; }

    /* On a narrow screen the header wraps, and an absolutely positioned panel
       anchored to a wrapped item can run off the right edge. Pin it to the nav
       instead of the summary so it always opens within the viewport. */
    .has-menu { position: static; }
    nav { position: relative; }
    .menu-panel { left: 0; right: auto; min-width: 11rem; }
}