/* ==========================================================================
   SFERA SOLUTIONS — CORPORATE SITE STYLESHEET
   Dark, static, dependency-free. Palette echoes the SKLO app (sklo.css):
     --blue #2563eb  |  --ink surfaces from #030712  |  --green ok accent
   No external fonts, no CDN, no frameworks — the medium is the message.
   ========================================================================== */

:root {
    --blue:        #2563eb;
    --blue-hover:  #94b6ed;
    --blue-soft:   rgba(37, 99, 235, 0.14);
    --green:       #10b981;
    --green-soft:  rgba(16, 185, 129, 0.12);
    --red:         #ef4444;

    --bg:          #030712;
    --bg-2:        #060b1a;
    --panel:       rgba(255, 255, 255, 0.035);
    --panel-hover: rgba(255, 255, 255, 0.06);
    --border:      rgba(255, 255, 255, 0.10);
    --border-soft: rgba(255, 255, 255, 0.06);

    --text:        #e8edf6;
    --text-strong: #ffffff;
    --muted:       #93a1b8;
    --faint:       #64748b;

    --radius:      16px;
    --radius-sm:   10px;
    --maxw:        1120px;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            Helvetica, Arial, sans-serif;
    --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { color: var(--text-strong); line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }

/* ---- Background glow blobs ------------------------------------------------ */
.glow-blob {
    position: fixed;
    width: 620px; height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.16) 0%, transparent 68%);
    filter: blur(60px);
    z-index: 0;
    top: -160px; left: -140px;
    pointer-events: none;
    animation: blob-float 26s infinite alternate ease-in-out;
    /* Placeholder light while the WebGL scene loads — see #bg3d-canvas and
       bg3d.js. Stays fully visible (not hidden at construction time) until
       the first real frame is ready, then cross-fades out. This closes the
       gap where layout was visible but no light was — the actual cause of
       the "flares pop in late" feel, not three.js being slow per se. */
    opacity: 1;
    transition: opacity .7s ease;
}
.glow-blob.blob-2 {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.10) 0%, transparent 68%);
    top: auto; bottom: -220px; left: auto; right: -180px;
    animation-delay: -8s;
    animation-duration: 32s;
}
@keyframes blob-float {
    from { transform: translate(0, 0); }
    to   { transform: translate(90px, 60px); }
}
@media (prefers-reduced-motion: reduce) {
    .glow-blob { animation: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---- 3D flare background (bg3d.js) ---------------------------------------- */
/* The WebGL canvas cross-fades in over the CSS blobs once bg3d.js has
   rendered its first real frame (html.bg3d-ready, set in bg3d.js after
   renderer.render() first succeeds) — not the moment the module starts
   loading (html.bg3d, set at construction). That gap between "starts
   loading" and "has pixels" is exactly the loading time of three.js +
   WebGL init + texture generation; showing the blob throughout it means
   there is never a blank moment, only a soft handoff. */
#bg3d-canvas {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .7s ease;
}
#bg3d-canvas.ready { opacity: 1; }
.bg3d-ready .glow-blob {
    opacity: 0;
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    #bg3d-canvas { transition: none; }
}

/* Frosted glass is unconditional (not gated on .bg3d): it blurs whichever
   light source is behind it — CSS blob before WebGL is ready, three.js
   flares after — so the panel style itself never has to "pop" mid-crossfade. */
.card,
.honesty .col,
.contact-item,
.table-wrap,
.callout,
.cta-strip {
    background: rgba(8, 13, 28, 0.30);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
}

/* Edge sheen: thin rings on the glass border that catch the flares' light.
   TWO layers per block — ::before = flare 1, ::after = flare 2 — each with
   its own angle/intensity (bg3d.js: --sheen-a1/-i1, --sheen-a2/-i2), so both
   lights tint a block at once and blend where they overlap. Layer colors
   --sheen-c1/--sheen-c2 are set once on :root. All default to 0 → invisible
   without JS/WebGL. */
.bg3d .card, .bg3d .honesty .col, .bg3d .contact-item,
.bg3d .table-wrap, .bg3d .callout, .bg3d .cta-strip { position: relative; }

/* .site-header stays out of the position rule above — it is sticky and
   relative would break it; sticky already establishes a containing block. */
.bg3d .card::before, .bg3d .honesty .col::before, .bg3d .contact-item::before,
.bg3d .table-wrap::before, .bg3d .callout::before, .bg3d .cta-strip::before,
.bg3d .site-header::before, .bg3d .site-footer::before,
.bg3d .card::after, .bg3d .honesty .col::after, .bg3d .contact-item::after,
.bg3d .table-wrap::after, .bg3d .callout::after, .bg3d .cta-strip::after,
.bg3d .site-header::after, .bg3d .site-footer::after {
    content: "";
    position: absolute; inset: -1px;
    border-radius: inherit;
    padding: 2px;                   /* ring thickness over the 1px border */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
/* --sheen-w = half-width of the lit sector (bg3d.js widens it while
   scrolling). Layer 1 — first flare. */
.bg3d .card::before, .bg3d .honesty .col::before, .bg3d .contact-item::before,
.bg3d .table-wrap::before, .bg3d .callout::before, .bg3d .cta-strip::before,
.bg3d .site-header::before, .bg3d .site-footer::before {
    background: conic-gradient(from calc(var(--sheen-a1, 0deg) - var(--sheen-w, 70deg)),
        transparent 0deg,
        rgba(var(--sheen-c1, 37, 99, 235), 0.70) calc(var(--sheen-w, 70deg) * 0.61),
        color-mix(in srgb, rgb(var(--sheen-c1, 37, 99, 235)) 40%, white) var(--sheen-w, 70deg),
        rgba(var(--sheen-c1, 37, 99, 235), 0.70) calc(var(--sheen-w, 70deg) * 1.39),
        transparent calc(var(--sheen-w, 70deg) * 2));
    filter: drop-shadow(0 0 7px rgba(var(--sheen-c1, 37, 99, 235), 0.55));
    opacity: var(--sheen-i1, 0);
}
/* Layer 2 — second flare. */
.bg3d .card::after, .bg3d .honesty .col::after, .bg3d .contact-item::after,
.bg3d .table-wrap::after, .bg3d .callout::after, .bg3d .cta-strip::after,
.bg3d .site-header::after, .bg3d .site-footer::after {
    background: conic-gradient(from calc(var(--sheen-a2, 0deg) - var(--sheen-w, 70deg)),
        transparent 0deg,
        rgba(var(--sheen-c2, 172, 56, 199), 0.70) calc(var(--sheen-w, 70deg) * 0.61),
        color-mix(in srgb, rgb(var(--sheen-c2, 172, 56, 199)) 40%, white) var(--sheen-w, 70deg),
        rgba(var(--sheen-c2, 172, 56, 199), 0.70) calc(var(--sheen-w, 70deg) * 1.39),
        transparent calc(var(--sheen-w, 70deg) * 2));
    filter: drop-shadow(0 0 7px rgba(var(--sheen-c2, 172, 56, 199), 0.55));
    opacity: var(--sheen-i2, 0);
}
/* Full-width bars glow on their facing edge only, not around the whole
   perimeter: header — bottom edge, footer — top edge. */
.bg3d .site-header::before, .bg3d .site-header::after {
    clip-path: inset(calc(100% - 3px) 0 0 0);
}
/* The sticky header doesn't move relative to the lights during scroll —
   pin its sector width so the global scroll widening (--sheen-w on :root)
   doesn't pulse it. Keep in sync with SHEEN_WIDTH_BASE in bg3d.js. */
.bg3d .site-header { --sheen-w: 70deg; }
.bg3d .site-footer::before, .bg3d .site-footer::after {
    clip-path: inset(0 0 calc(100% - 3px) 0);
}

/* ---- Layout helpers ------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { position: relative; z-index: 1; padding: 88px 0; }
.section.tight { padding: 56px 0; }
.eyebrow {
    font-family: var(--mono);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--blue-hover);
    margin-bottom: 18px;
}
.section-lead { color: var(--muted); max-width: 640px; margin-top: 16px; font-size: 18px; }

/* ---- Header / nav --------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    background: rgba(3, 7, 18, 0.72);
    border-bottom: 1px solid var(--border-soft);
}
.nav {
    display: flex; align-items: center; gap: 24px;
    height: 66px;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 300; color: var(--text-strong); letter-spacing: -0.01em; }
.brand .brand-logo { width: 36px; height: 36px; flex: none; object-fit: contain; }
.brand .brand-sub { color: var(--muted); font-weight: 300; }
.footer-brand .brand-logo { width: 120px; height: 120px; }
.nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-links a {
    padding: 8px 13px; border-radius: 9px;
    color: var(--muted); font-size: 15px; font-weight: 500;
    transition: color .15s ease, background .15s ease;
}
.nav-links a:hover { color: var(--text-strong); background: var(--panel-hover); }
.nav-links a.active { color: var(--text-strong); }

.lang-switch { display: flex; gap: 2px; margin-left: 8px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; }
.lang-switch button {
    font-family: var(--font);
    border: 0; background: transparent; color: var(--faint);
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    padding: 5px 8px; border-radius: 7px; cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active { color: var(--text-strong); background: var(--blue-soft); }

.nav-toggle { display: none; margin-left: auto; background: transparent; border: 1px solid var(--border); border-radius: 9px; color: var(--text); width: 40px; height: 38px; cursor: pointer; font-size: 18px; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font); font-size: 15px; font-weight: 600;
    padding: 12px 20px; border-radius: 11px; cursor: pointer;
    border: 1px solid transparent; transition: all .16s ease;
    white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 24px -8px rgba(37,99,235,.7); }
.btn-primary:hover { background: var(--blue-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--panel-hover); border-color: var(--muted); }

/* ---- Hero ----------------------------------------------------------------- */
.hero { position: relative; z-index: 1; padding: 104px 0 84px; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; max-width: 16ch; }

/* Technology hero: the "forty years" line gets display treatment — slightly
   larger, a deliberate two-line break (in the i18n strings), and a gradient
   accent in the two flare colors. */
[data-title-key="tech"] .hero h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); max-width: 24ch; }
.hero h1 .accent {
    background: linear-gradient(90deg, var(--blue-hover), #ac38c7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero .hero-sub { color: var(--muted); font-size: clamp(1.05rem, 2.2vw, 1.32rem); margin-top: 24px; max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 46px; color: var(--faint); font-size: 14px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot.amber { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }

/* ---- Cards / grids -------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
}
.card h3 { font-size: 1.28rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 15.5px; }
.card-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--blue-hover); font-weight: 600; font-size: 14.5px; }

/* product cards larger */
.product-card { display: flex; flex-direction: column; }
.product-card .tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.product-card ul { margin: 16px 0 0; padding-left: 18px; color: var(--muted); font-size: 15px; }
.product-card ul li { margin-bottom: 6px; }

/* ---- Feature list --------------------------------------------------------- */
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature .fi { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-hover); font-size: 16px; }
.feature h4 { margin: 0 0 4px; color: var(--text-strong); font-size: 1.02rem; }
.feature p { color: var(--muted); font-size: 14.5px; }

/* ---- Manifesto / quote ---------------------------------------------------- */
.manifesto { text-align: center; }
.quote { font-size: clamp(1.35rem, 3.4vw, 2.05rem); font-weight: 600; color: var(--text-strong); line-height: 1.4; max-width: 20ch; margin: 0 auto; letter-spacing: -0.02em; }
.quote-mark { color: var(--blue-hover); }
.attrib { color: var(--muted); margin-top: 20px; font-size: 15px; }
.manifesto-body { max-width: 60ch; margin: 34px auto 0; color: var(--muted); font-size: 18px; }

/* ---- Honesty / two-column see/don't --------------------------------------- */
.honesty { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.honesty .col { border-radius: var(--radius); border: 1px solid var(--border); padding: 26px; background: var(--panel); }
.honesty .col.sees { border-color: rgba(245, 158, 11, .28); }
.honesty .col.blind { border-color: rgba(16, 185, 129, .30); }
.honesty .col h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 1.05rem; color: var(--text-strong); }
.honesty ul { margin: 0; padding-left: 20px; color: var(--muted); }
.honesty ul li { margin-bottom: 8px; }
.honesty .badge { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 6px; letter-spacing: .06em; }
.badge.amber { background: rgba(245,158,11,.14); color: #fbbf24; }
.badge.green { background: var(--green-soft); color: var(--green); }

/* ---- Crypto / spec table -------------------------------------------------- */
/* No inner scrolling: the table always fits its block — cells wrap instead. */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
table.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
table.spec th, table.spec td { text-align: left; padding: 15px 22px; border-bottom: 1px solid var(--border-soft); }
table.spec thead th { color: var(--faint); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
table.spec tbody tr:last-child td { border-bottom: 0; }
table.spec td:first-child { color: var(--text); font-weight: 500; }
table.spec td.mono, table.spec code { font-family: var(--mono); color: var(--blue-hover); font-size: 14px; }

/* ---- Callout -------------------------------------------------------------- */
.callout { border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: 12px; background: var(--panel); padding: 22px 26px; color: var(--muted); }
.callout.green { border-left-color: var(--green); }
.callout strong { color: var(--text-strong); font-weight: 600; }

/* ---- CTA strip ------------------------------------------------------------ */
.cta-strip { text-align: center; border: 1px solid var(--border); border-radius: 22px; padding: 56px 28px; background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(37,99,235,.02)); }
.cta-strip h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.cta-strip p { color: var(--muted); max-width: 46ch; margin: 16px auto 0; }
.cta-strip .hero-cta { justify-content: center; }

/* ---- Footer --------------------------------------------------------------- */
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--border-soft); background: var(--bg-2); padding: 54px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; }
.footer-grid h5 { color: var(--text-strong); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 14px; }
.footer-grid a, .footer-grid p { display: block; color: var(--muted); font-size: 14.5px; margin-bottom: 9px; }
.footer-grid a:hover { color: var(--text-strong); }
.footer-grid .brand { display: flex; gap: 11px; margin-bottom: 0; }
.footer-brand { display: flex; flex-direction: row; align-items: center; gap: 16px; }
.legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border-soft); color: var(--faint); font-size: 13px; }
.legal .ph { color: #cbd5e1; background: rgba(255,255,255,.05); border: 1px dashed var(--border); border-radius: 5px; padding: 1px 6px; font-family: var(--mono); font-size: 12px; }
.footer-brand p { max-width: 34ch; }

/* ---- Prose (privacy) ------------------------------------------------------ */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.4rem; margin: 42px 0 12px; }
.prose h3 { font-size: 1.1rem; margin: 26px 0 8px; color: var(--text); }
.prose p { color: var(--muted); margin-bottom: 14px; }
.prose ul { color: var(--muted); padding-left: 22px; margin-bottom: 14px; }
.prose ul li { margin-bottom: 7px; }
.prose .updated { color: var(--faint); font-size: 14px; font-family: var(--mono); }

/* ---- Contact -------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 24px; }
.contact-item .label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.contact-item .value { color: var(--text-strong); font-size: 16px; }

/* ---- Utilities ------------------------------------------------------------ */
.center { text-align: center; }
.mt-s { margin-top: 40px; }
.mt-m { margin-top: 56px; }
.divider { height: 1px; background: var(--border-soft); border: 0; margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--muted); }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
    .grid.cols-3 { grid-template-columns: 1fr; }
    .grid.cols-2, .honesty, .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer-brand { flex-direction: column; align-items: flex-start; gap: 12px; }
    .nav-links, .lang-switch { display: none; }
    .nav-toggle { display: block; }
    .site-header.open .nav-links {
        display: flex; flex-direction: column; align-items: stretch;
        position: absolute; top: 66px; left: 0; right: 0;
        background: rgba(3,7,18,.97); border-bottom: 1px solid var(--border);
        padding: 12px 20px; gap: 2px;
    }
    .site-header.open .nav-links a { padding: 12px; }
    .site-header.open .lang-switch { display: flex; margin: 10px 20px 16px; width: max-content; }
    .section { padding: 64px 0; }
    .hero { padding: 72px 0 60px; }
    table.spec th, table.spec td { padding: 12px 14px; font-size: 14px; }
    table.spec td.mono, table.spec code { font-size: 12.5px; }
}