/* SEMARA V3 — publication candidate, dark technology editorial system */
:root {
    --ink: #f5f7ff;
    --muted: #a9b7ce;
    --accent: #6ce7ff;
    --accent-dark: #2f9fff;
    --signal: #c7ff66;
    --violet: #8e78ff;
    --line: rgba(170, 205, 255, .16);
    --tint: #0b1122;
    --bg: #050711;
    --panel: rgba(12, 18, 36, .78);
    --panel-strong: #0d1428;
    --radius: 28px;
    --shadow: 0 36px 100px rgba(0, 0, 0, .42);
}

html {
    color-scheme: dark;
    background: var(--bg);
    scrollbar-color: #385175 #070a14;
}

body {
    position: relative;
    min-width: 320px;
    background:
        radial-gradient(circle at 10% -5%, rgba(55, 129, 255, .18), transparent 30%),
        radial-gradient(circle at 88% 9%, rgba(142, 120, 255, .14), transparent 27%),
        var(--bg);
    color: var(--ink);
    font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
}

body::before {
    position: fixed;
    z-index: -2;
    inset: 0;
    content: "";
    pointer-events: none;
    background-image:
        linear-gradient(rgba(129, 170, 230, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(129, 170, 230, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

body::after {
    position: fixed;
    z-index: -1;
    width: 520px;
    height: 520px;
    left: var(--pointer-x, 72%);
    top: var(--pointer-y, 20%);
    border-radius: 50%;
    content: "";
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: rgba(55, 159, 255, .08);
    filter: blur(70px);
    transition: left .18s linear, top .18s linear;
}

::selection { background: var(--signal); color: #07101f; }

.container { width: min(1420px, calc(100% - 72px)); }
.section { padding-block: clamp(80px, 9vw, 140px); }
.no-top { padding-top: 0; }
.tint-section { background: linear-gradient(180deg, rgba(10, 17, 34, .7), rgba(7, 11, 23, .45)); }
.border-top { border-color: var(--line); }

h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(3.8rem, 7.2vw, 8rem); font-weight: 650; line-height: .91; letter-spacing: -.072em; }
h2 { font-size: clamp(2.6rem, 4.7vw, 5.4rem); font-weight: 630; line-height: .98; letter-spacing: -.062em; }
h3 { letter-spacing: -.035em; }
h1 span, h2 span, h2 em {
    color: transparent;
    background: linear-gradient(100deg, var(--accent), #b8f7ff 44%, var(--signal));
    -webkit-background-clip: text;
    background-clip: text;
}
p, figcaption, .small-note, .demo-caption { color: var(--muted); }
.lead { color: #c6d2e5; font-size: clamp(1.08rem, 1.4vw, 1.32rem); }
.eyebrow {
    color: var(--accent);
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid transparent;
    background: rgba(5, 7, 17, .72);
    backdrop-filter: blur(22px) saturate(145%);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.header.is-scrolled {
    border-color: var(--line);
    background: rgba(5, 7, 17, .93);
    box-shadow: 0 14px 48px rgba(0, 0, 0, .28);
}

.nav-wrap { min-height: 88px; }
.wordmark { width: 166px; }
.brand-crop {
    width: 166px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(10, 142, 255, .12);
}
.brand-crop img { width: 166px; height: 166px; }
#main-nav { gap: 28px; }
#main-nav > a:not(.button), #main-nav > details > summary { color: #d6e0f0; font-size: .91rem; }
#main-nav > a:not(.button):hover, #main-nav > details > summary:hover { color: var(--accent); }
button.menu-toggle {
    border-color: rgba(108, 231, 255, .28) !important;
    background: #0c1428 !important;
    color: #f4f8ff !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}
button.menu-toggle span { color: var(--accent); }

.mega-panel, .product-panel, .corporate-panel {
    border: 1px solid rgba(129, 185, 255, .18);
    background:
        radial-gradient(circle at 80% 0%, rgba(65, 144, 255, .13), transparent 34%),
        rgba(8, 13, 27, .98);
    box-shadow: var(--shadow);
    color: var(--ink);
}
.mega-panel p, .product-panel span { color: var(--muted); }
.mega-columns a, .product-panel a, .corporate-panel a { color: #c7d3e5; }
.mega-columns a:hover, .product-panel a:hover, .corporate-panel a:hover { color: var(--accent); background: rgba(108, 231, 255, .06); }

.button {
    min-height: 56px;
    border-color: transparent;
    border-radius: 999px;
    padding-inline: 27px;
    background: linear-gradient(110deg, #147dff, #53d8ff);
    color: #02101e;
    box-shadow: 0 15px 40px rgba(47, 159, 255, .22);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.button:hover {
    border-color: transparent;
    background: linear-gradient(110deg, #47b8ff, #9ff4ff);
    box-shadow: 0 20px 52px rgba(71, 184, 255, .3);
    transform: translateY(-3px);
}
.button-white { background: var(--signal); border-color: var(--signal); color: #07101d; }
.button-white:hover { background: #dcffa4; border-color: #dcffa4; }
.button-outline { border-color: rgba(108, 231, 255, .34); background: rgba(108, 231, 255, .04); color: var(--accent); }
.text-link { color: var(--accent); }
.text-link:hover { color: var(--signal); }

.v3-progress {
    position: fixed;
    z-index: 300;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--signal));
}

.home-hero {
    position: relative;
    min-height: calc(100vh - 88px);
    grid-template-columns: minmax(0, 1.08fr) minmax(500px, .92fr);
    gap: clamp(54px, 7vw, 110px);
    padding-block: 72px 96px;
}
.home-hero::before {
    position: absolute;
    width: 460px;
    height: 460px;
    left: -270px;
    bottom: 2%;
    content: "";
    border: 1px solid rgba(108, 231, 255, .2);
    border-radius: 50%;
    box-shadow: 0 0 0 80px rgba(108, 231, 255, .025), 0 0 0 160px rgba(108, 231, 255, .018);
}
.home-hero-copy { position: relative; z-index: 2; }
.home-hero h1 { max-width: 760px; margin: 24px 0 30px; font-size: clamp(4rem, 5.35vw, 6.2rem); }
.home-hero h1 > span { display: inline-block; white-space: nowrap; font-size: .92em; }
.home-hero-copy > p { max-width: 690px; color: #b8c6da; font-size: clamp(1.08rem, 1.55vw, 1.42rem); }
.hero-actions { gap: 28px; }
.hero-footnote { gap: 10px; margin-top: 54px; }
.hero-footnote span {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    color: #b9c6d8;
}
.hero-footnote span + span { border-left: 1px solid var(--line); padding-left: 14px; }

.home-hero-visual {
    position: relative;
    isolation: isolate;
    padding: 1px;
    border: 1px solid rgba(128, 194, 255, .22);
    border-radius: 38px;
    background: linear-gradient(140deg, rgba(106, 231, 255, .5), rgba(142, 120, 255, .08) 44%, rgba(199, 255, 102, .18));
    box-shadow: 0 42px 130px rgba(0, 0, 0, .54), 0 0 80px rgba(47, 159, 255, .08);
    transform-style: preserve-3d;
}
.home-hero-visual::before {
    position: absolute;
    z-index: 2;
    inset: 1px;
    content: "";
    border-radius: 37px;
    pointer-events: none;
    background: linear-gradient(145deg, transparent 46%, rgba(5, 7, 17, .38));
}
.home-hero-visual > img { width: 100%; height: min(66vh, 650px); min-height: 520px; border-radius: 37px; object-fit: cover; }
.home-hero-visual figcaption {
    z-index: 3;
    left: 30px;
    right: auto;
    bottom: 30px;
    min-width: 280px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 18px;
    background: rgba(5, 9, 20, .76);
    color: var(--ink);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .35);
    backdrop-filter: blur(18px);
}
.home-hero-visual figcaption span { color: var(--signal); }

.v3-hud {
    position: absolute;
    z-index: 4;
    top: 24px;
    right: 24px;
    display: flex;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(5, 8, 17, .7);
    backdrop-filter: blur(14px);
}
.v3-hud span { padding: 5px 10px; border-radius: 999px; background: rgba(108, 231, 255, .09); color: #d8f9ff; font-size: .7rem; letter-spacing: .08em; }

.v3-marquee {
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: rgba(7, 12, 25, .8);
}
.v3-marquee-track {
    display: flex;
    width: max-content;
    gap: 34px;
    padding-block: 18px;
    color: #c7d5e8;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .17em;
    animation: v3-marquee 32s linear infinite;
}
.v3-marquee-track span::before { content: "✦"; margin-right: 34px; color: var(--signal); }
@keyframes v3-marquee { to { transform: translateX(-50%); } }

.nationwide-home { border-bottom: 1px solid var(--line); background: rgba(8, 13, 27, .58); }
.nationwide-home-map { border: 1px solid var(--line); background: linear-gradient(145deg, #0d1730, #07101e); box-shadow: inset 0 1px rgba(255, 255, 255, .04); }
.map-caption { border-color: var(--line); background: rgba(8, 14, 28, .88); }

.solution-overview { padding-block: 120px; border-color: var(--line); }
.compact-heading { margin-bottom: 52px; }
.compact-heading > p { color: var(--muted); }
.solution-tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.solution-tile {
    position: relative;
    grid-column: span 6;
    min-height: 440px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--panel);
    box-shadow: none;
    transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.solution-tile:nth-child(1), .solution-tile:nth-child(4) { grid-column: span 7; }
.solution-tile:nth-child(2), .solution-tile:nth-child(3) { grid-column: span 5; }
.solution-tile:hover { border-color: rgba(108, 231, 255, .48); transform: translateY(-7px); box-shadow: 0 28px 70px rgba(0, 0, 0, .34); }
.tile-image { height: 260px; }
.tile-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(to bottom, transparent 48%, rgba(5, 7, 17, .72)); }
.tile-copy { padding: 28px 30px; }
.tile-copy h3 { color: var(--ink); font-size: clamp(1.5rem, 2.1vw, 2.2rem); }
.tile-copy p { color: var(--muted); }
.tile-number, .tile-arrow { color: var(--accent); }

.home-sector-story { padding-block: 120px; background: linear-gradient(180deg, #080d1b, #0b1122); }
.sector-editorial-main, .sector-editorial-side a { border: 1px solid var(--line); box-shadow: var(--shadow); }
.sector-editorial-main::after, .sector-editorial-side a::after { background: linear-gradient(to top, rgba(3, 7, 15, .9), transparent 64%); }

.product-section { padding-block: 120px; border-color: var(--line); background: transparent; }
.product-grid { gap: 22px; }
.product-card {
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(150deg, rgba(17, 26, 50, .92), rgba(8, 13, 27, .92));
    box-shadow: none;
}
.product-card:hover { border-color: rgba(199, 255, 102, .38); box-shadow: 0 34px 80px rgba(0, 0, 0, .35); transform: translateY(-8px); }
.product-card-art { background: #111a30; }
.product-card-art img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-card-art img { transform: scale(1.05); }
.product-card-copy { padding: 30px; }
.product-card-copy h3 { color: var(--ink); }
.product-card-copy p { color: var(--muted); }

.working-method { grid-template-columns: .8fr 1.2fr; gap: 90px; padding-block: 130px; }
.working-method ol { border-color: var(--line); }
.working-method li { border-color: var(--line); transition: background .25s ease, padding-left .25s ease; }
.working-method li:hover { padding-left: 22px; background: linear-gradient(90deg, rgba(108, 231, 255, .07), transparent); }
.working-method li > span { color: var(--signal); }

.nova-compact {
    position: relative;
    margin-block: 40px 130px;
    padding: 42px;
    border: 1px solid rgba(108, 231, 255, .22);
    border-radius: 36px;
    background:
        radial-gradient(circle at 85% 20%, rgba(108, 231, 255, .18), transparent 32%),
        radial-gradient(circle at 15% 85%, rgba(142, 120, 255, .18), transparent 34%),
        #091124;
    box-shadow: var(--shadow);
}
.nova-compact-art { border: 1px solid var(--line); border-radius: 24px; }
.nova-compact-art img { height: 390px; }

.home-close { gap: 80px; padding-block: 30px 130px; }
.home-close-art { border: 1px solid var(--line); border-radius: 34px; overflow: hidden; transform: rotate(-1.5deg); box-shadow: var(--shadow); }
.home-close-art img { width: 100%; min-height: 460px; object-fit: cover; }

.page-intro { position: relative; padding-block: 110px 76px; }
.page-intro::before {
    position: absolute;
    width: 48vw;
    height: 48vw;
    max-width: 720px;
    max-height: 720px;
    right: -20vw;
    top: -24vw;
    content: "";
    border: 1px solid rgba(108, 231, 255, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 90px rgba(108, 231, 255, .018), 0 0 0 180px rgba(142, 120, 255, .012);
}
.page-intro h1 { max-width: 1050px; }
.page-intro .lead { max-width: 820px; }
.service-breadcrumb, .section-nav { border-color: var(--line); color: #91a4c0; }
.section-nav { background: rgba(5, 7, 17, .8); backdrop-filter: blur(18px); }

.category-hero, .digital-hero, .extended-hero, .about-hero, .product-detail-hero, .nova-product-grid {
    gap: clamp(52px, 7vw, 100px);
    padding-block: 76px 108px;
}
.category-hero figure, .digital-hero-photo, .extended-hero-photo, .about-hero figure, .product-detail-hero figure, .nova-product-art {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 34px;
    background: #0c1428;
    box-shadow: var(--shadow);
}
.category-hero figure > img, .digital-hero-photo > img, .extended-hero-photo, .about-hero figure img, .product-detail-hero img, .nova-product-art img {
    min-height: 440px;
    object-fit: cover;
}

.catalog-card, .service-card, .technology-compact, .feature-trio article, .extended-features article, .principle-grid article,
.audience-panel, .delivery-panel, .contact-grid aside, .contact-grid form, .faq details, .process-accordion details,
.scenario, .scenario-panel, .product-note, .nova-workspace, .nova-principles, .plain-list li {
    border-color: var(--line);
    background: linear-gradient(145deg, rgba(15, 23, 44, .9), rgba(8, 13, 27, .88));
    color: var(--ink);
}
.catalog-card:hover, .service-card:hover, .technology-compact:hover { border-color: rgba(108, 231, 255, .42); box-shadow: 0 28px 64px rgba(0, 0, 0, .3); transform: translateY(-5px); }
.catalog-card p, .service-card p, .technology-compact p, .extended-features p, .feature-trio p, .principle-grid p { color: var(--muted); }
.catalog-card h3, .service-card h3, .technology-compact h2, .extended-features h3, .feature-trio h3 { color: var(--ink); }
.catalog-photo, .technology-compact img { filter: saturate(.92) contrast(1.04); }

.extended-overview, .detail-layout, .editorial-split, .service-story { gap: clamp(46px, 7vw, 96px); }
.scenario-band {
    border: 1px solid rgba(108, 231, 255, .2);
    border-radius: 32px;
    background: radial-gradient(circle at 82% 12%, rgba(108, 231, 255, .16), transparent 34%), #0a1328;
}
.related-links a { border-color: var(--line); }
.related-links a:hover { background: rgba(108, 231, 255, .06); }
.related-number { color: var(--signal); }

.service-directory-layout { gap: 62px; }
.service-jump { border-color: var(--line); background: rgba(9, 15, 30, .72); backdrop-filter: blur(18px); }
.service-directory-list a { border-color: var(--line); }
.service-directory-list a:hover { background: rgba(108, 231, 255, .06); color: var(--accent); }

.cta {
    border-block: 1px solid rgba(108, 231, 255, .2);
    background:
        radial-gradient(circle at 10% 20%, rgba(199, 255, 102, .17), transparent 30%),
        radial-gradient(circle at 86% 24%, rgba(108, 231, 255, .22), transparent 33%),
        linear-gradient(120deg, #101d43, #0b1530 55%, #152052);
}
.cta h2 { color: var(--ink); }
.cta p { color: #c1cee1; }

input, select, textarea {
    border-color: rgba(153, 190, 239, .2) !important;
    background: #080f20 !important;
    color: var(--ink) !important;
}
input::placeholder, textarea::placeholder { color: #70839f; }
.contact-email, .contact-phone { border-color: var(--line); color: var(--accent); }
.comparison th, .comparison td { border-color: var(--line); }
.comparison thead { background: #111a31; }

.site-footer { border-color: var(--line); background: #03050c; }
.footer-main { padding-block: 72px 52px; }
.footer-label { color: var(--signal); }
.footer-main > div:not(.footer-brand) > a { color: #aebdd2; }
.footer-main > div:not(.footer-brand) > a:hover { color: var(--accent); }
.footer-bottom { border-color: var(--line); color: #72849f; }

.v3-reveal { opacity: 1; transform: translateY(24px); transition: transform .75s cubic-bezier(.2,.7,.2,1); }
.v3-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1200px) {
    .container { width: min(1160px, calc(100% - 54px)); }
    #main-nav { background: rgba(5, 8, 18, .98) !important; }
    #main-nav.is-open {
        border-color: var(--line);
        background: #070b17 !important;
        box-shadow: var(--shadow);
    }
    #main-nav.is-open > a:not(.button),
    #main-nav.is-open > details > summary { color: #dce7f7 !important; }
    .home-hero { grid-template-columns: 1.08fr .92fr; gap: 42px; }
    .home-hero h1 { font-size: clamp(3.65rem, 5.6vw, 5rem); }
    .home-hero-visual > img { min-height: 470px; }
}

@media (max-width: 1050px) {
    .home-hero { grid-template-columns: 1fr; }
    .home-hero h1 { max-width: 840px; font-size: clamp(4rem, 9.5vw, 6.5rem); }
    .home-hero-visual { max-width: 820px; }
}

@media (max-width: 850px) {
    .container { width: calc(100% - 40px); }
    h1 { font-size: clamp(3.25rem, 12vw, 5.7rem); }
    h2 { font-size: clamp(2.45rem, 8vw, 4.3rem); }
    .home-hero { grid-template-columns: 1fr; min-height: auto; padding-block: 58px 78px; }
    .home-hero h1 { font-size: clamp(3.55rem, 11vw, 5.6rem); }
    .home-hero-visual { max-width: 720px; }
    .home-hero-visual > img { height: 520px; }
    .solution-tile:nth-child(n) { grid-column: span 6; }
    .working-method { grid-template-columns: 1fr; gap: 48px; }
    .nova-compact { grid-template-columns: 1fr; }
    .nova-compact-art img { height: 360px; }
}

@media (max-width: 600px) {
    .container { width: calc(100% - 28px); }
    .nav-wrap { min-height: 74px; }
    .wordmark, .brand-crop { width: 145px; }
    .brand-crop img { width: 145px; height: 145px; }
    .home-hero { padding-top: 42px; gap: 36px; }
    .home-hero h1 { font-size: clamp(3.1rem, 15vw, 4.4rem); }
    .home-hero h1 > span { white-space: normal; }
    .home-hero-copy > p { font-size: 1.04rem; }
    .home-hero-visual { border-radius: 24px; }
    .home-hero-visual > img { height: 360px; min-height: 0; border-radius: 23px; }
    .home-hero-visual figcaption { left: 16px; right: 16px; bottom: 16px; min-width: 0; }
    .v3-hud { top: 14px; right: 14px; }
    .v3-hud span:nth-child(2) { display: none; }
    .hero-footnote { display: flex; }
    .solution-overview, .home-sector-story, .product-section { padding-block: 76px; }
    .solution-tiles { grid-template-columns: 1fr; }
    .solution-tile:nth-child(n) { grid-column: auto; min-height: 380px; }
    .tile-image { height: 220px; }
    .page-intro { padding-block: 70px 48px; }
    .category-hero, .digital-hero, .extended-hero, .about-hero, .product-detail-hero, .nova-product-grid { padding-block: 50px 76px; }
    .category-hero figure > img, .digital-hero-photo > img, .extended-hero-photo, .about-hero figure img, .product-detail-hero img, .nova-product-art img { min-height: 300px; }
    .nova-compact { margin-bottom: 82px; padding: 20px; border-radius: 25px; }
    .nova-compact-art img { height: 250px; }
    .home-close { padding-bottom: 88px; }
    .home-close-art img { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    .v3-marquee-track { animation: none; }
    .v3-reveal { opacity: 1; transform: none; transition: none; }
    body::after { display: none; }
}