/* v10: clean mobile-first navigation, light/dark themes and official logo integration */
:root { color-scheme: dark; }
html[data-theme="light"] {
    color-scheme: light;
    --bg: #f7f9ff;
    --bg-deep: #edf3ff;
    --bg-soft: #ffffff;
    --surface: rgba(255,255,255,.82);
    --surface-strong: rgba(255,255,255,.96);
    --surface-glass: rgba(255,255,255,.72);
    --line: rgba(11,42,139,.14);
    --line-strong: rgba(11,42,139,.24);
    --text: #071326;
    --muted: #51627c;
    --muted-strong: #243653;
    --white: #071326;
    --shadow: 0 34px 110px rgba(20, 42, 84, 0.18);
    --shadow-soft: 0 18px 55px rgba(20,42,84,.12);
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 16% -10%, rgba(42,125,255,.18), transparent 26rem),
        radial-gradient(circle at 92% 12%, rgba(154,72,255,.10), transparent 22rem),
        linear-gradient(180deg, var(--bg), var(--bg-deep));
}
html[data-theme="light"] body::before { opacity:.34; }
html[data-theme="light"] .site-header,
html[data-theme="light"] .site-footer,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .auth-modal-card,
html[data-theme="light"] .card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .story-narrative,
html[data-theme="light"] .ecosystem,
html[data-theme="light"] .problem-section,
html[data-theme="light"] .admin-hero-panel,
html[data-theme="light"] .admin-form-panel,
html[data-theme="light"] .admin-user-card {
    background: rgba(255,255,255,.82) !important;
    border-color: rgba(11,42,139,.14) !important;
    color: var(--text);
}
html[data-theme="light"] .nav-cta { color: #fff !important; }
html[data-theme="light"] .button-primary { color:#fff; }
html[data-theme="light"] .hero-visual::before { opacity:.28; }

.site-header-v10 {
    position: sticky;
    top: 12px;
    width: min(1520px, calc(100% - 40px));
    min-height: 68px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 999px;
}
.brand-v10 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 6px 0 0 !important;
    gap: 11px;
}
.brand-v10 .brand-mark {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50%;
    filter: drop-shadow(0 10px 26px rgba(42,125,255,.25));
}
.brand-v10 .brand-copy strong {
    font-size: 1.02rem;
    letter-spacing: .02em;
    text-transform: none;
}
.brand-v10 .brand-copy small {
    font-size: .66rem;
    letter-spacing: .085em;
}
.header-tools { display:flex; align-items:center; gap:8px; margin-left:auto; }
.site-nav-v10 { margin-left:auto; }
.site-nav-v10 > a { font-size:.88rem; }
.language-switcher-v10 { height: 40px; padding: 3px; background: rgba(255,255,255,.055); }
.language-switcher-v10 .language-link { min-width: 46px; justify-content:center; }
.language-switcher-v10 .language-link b { font-size:.74rem; }
.theme-toggle {
    height: 40px;
    min-width: 42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.055);
    color:var(--text);
    font-weight:850;
    cursor:pointer;
}
.theme-toggle-icon { font-size:1.02rem; }
.theme-toggle-text { font-size:.76rem; }
.menu-button-v10 { display:none; width:42px; height:42px; padding:0; align-items:center; justify-content:center; }
.hamburger { width:19px; display:grid; gap:4px; }
.hamburger span { display:block; height:2px; border-radius:99px; background:currentColor; transition: transform .22s ease, opacity .18s ease; }
.menu-button-v10[aria-expanded="true"] .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-button-v10[aria-expanded="true"] .hamburger span:nth-child(2) { opacity:0; }
.menu-button-v10[aria-expanded="true"] .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hero-logo-v10 { width: min(420px, 100%); padding:0; background:transparent; border:0; box-shadow:none; }
.hero-logo-v10 img { width:100%; max-width:420px; height:auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.26)); }
html[data-theme="light"] .hero-logo-v10 img { filter: drop-shadow(0 12px 24px rgba(8,25,65,.13)); }

/* Team cards: touch opens detail, desktop hover remains elegant */
.team-card-pro { cursor:pointer; }
.team-detail-panel-inner { line-height:1.56; }
@media (hover:hover) and (pointer:fine) {
    .team-card-pro:hover .team-detail-panel,
    .team-card-rich:hover .team-detail-panel { opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0) scale(1); }
}

/* Better mobile: no pie menu, clear controls, drawer with all pages */
@media (max-width: 980px) {
    .site-header-v10 {
        top: 8px;
        width: calc(100% - 18px);
        min-height: 60px;
        padding: 8px 9px;
        border-radius: 28px;
        align-items:center !important;
    }
    .site-nav-v10 {
        display:grid !important;
        position:fixed;
        z-index:80;
        left:12px;
        right:12px;
        top:74px;
        bottom:auto;
        width:auto;
        max-height: calc(100vh - 92px);
        overflow:auto;
        padding:14px;
        gap:8px;
        border:1px solid var(--line-strong);
        border-radius:24px;
        background: linear-gradient(180deg, rgba(8,18,36,.98), rgba(3,8,18,.98));
        box-shadow: 0 28px 90px rgba(0,0,0,.45);
        backdrop-filter: blur(22px) saturate(135%);
        transform: translateY(-10px) scale(.98);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition: opacity .22s ease, transform .26s cubic-bezier(.2,.8,.2,1), visibility .22s ease;
    }
    html[data-theme="light"] .site-nav-v10 { background: rgba(255,255,255,.98); box-shadow: 0 28px 80px rgba(20,42,84,.20); }
    .site-nav-v10.is-open { opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0) scale(1); }
    .site-nav-v10 > a, .site-nav-v10 .nav-cta {
        min-height:50px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:13px 15px;
        border:1px solid var(--line);
        border-radius:17px;
        background:rgba(255,255,255,.055);
        font-size:1rem;
    }
    .site-nav-v10 > a::after { content:"›"; opacity:.5; font-size:1.3rem; }
    .site-nav-v10 .nav-cta { justify-content:center; margin-top:4px; }
    .site-nav-v10 .nav-cta::after { content:none; }
    .menu-button-v10 { display:inline-flex !important; }
    .theme-toggle-text { display:none; }
    .language-switcher-v10 { height:42px; }
    .language-switcher-v10 .language-link { min-width:42px; padding:6px 7px; }
    .header-tools { gap:6px; }
    body.mobile-menu-open::before {
        content:"";
        position:fixed;
        inset:0;
        z-index:70;
        background: rgba(0,4,13,.50);
        backdrop-filter: blur(8px);
    }
    html[data-theme="light"] body.mobile-menu-open::before { background: rgba(232,241,255,.60); }
}

@media (max-width: 700px) {
    main { width: min(100% - 22px, var(--max-width)); }
    .brand-v10 .brand-copy strong { font-size:.96rem; }
    .brand-v10 .brand-copy small { display:none; }
    .brand-v10 .brand-mark { width:40px !important; height:40px !important; }
    .site-header-v10 { min-height:58px; }
    .theme-toggle, .language-switcher-v10 { background: rgba(255,255,255,.075); }
    .language-link b { display:none; }
    .language-switcher-v10 .language-link { min-width:34px; }
    .hero { padding-top:34px !important; }
    .hero-logo-v10 { width:min(330px, 90vw); margin-bottom:14px; }
    .hero-content h1, h1 { font-size: clamp(2.05rem, 11vw, 3.2rem) !important; max-width: 11.5ch; }
    .hero-lead { font-size:1rem; }
    .stats-strip { grid-template-columns: 1fr !important; }
    .product-card img { max-height: 210px; width:100%; object-fit:contain; }
    .story-long-copy { columns: 1 !important; }
    .story-insight-grid { grid-template-columns:1fr !important; }
    .story-timeline-wide, .story-timeline { display:grid !important; overflow:visible; gap:12px; }
    .story-timeline-wide article, .story-timeline article, .timeline-card { min-width:0 !important; }
    .team-card-pro { grid-template-columns:76px 1fr !important; }
    .team-detail-panel { grid-column:1 / -1 !important; }
    .auth-topline { gap:10px; align-items:center; }
    .auth-brand span small { display:none; }
    .auth-controls-v10 { display:flex; align-items:center; gap:6px; }
}

@media (max-width: 430px) {
    .site-header-v10 { width:calc(100% - 12px); padding:7px; }
    .brand-v10 { gap:7px; }
    .brand-v10 .brand-mark { width:36px !important; height:36px !important; }
    .brand-v10 .brand-copy strong { font-size:.86rem; }
    .header-tools { gap:4px; }
    .theme-toggle, .menu-button-v10 { width:38px; height:38px; min-width:38px; padding:0; }
    .language-switcher-v10 { height:38px; }
    .site-nav-v10 { top:66px; left:8px; right:8px; border-radius:21px; }
    .page-hero, .hero-content { text-align:left; }
}


/* v10.1 clean logo lockup: icon is image, wordmark/flag line are CSS, avoiding raster halos */
.logo-lockup-hero {
    display:inline-flex;
    align-items:center;
    gap:18px;
    width:auto !important;
    max-width:100%;
    margin-bottom:20px;
    padding:10px 16px 10px 10px;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.035);
    box-shadow: 0 18px 54px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
}
.logo-lockup-hero img {
    width:88px !important;
    height:88px !important;
    max-width:none !important;
    object-fit:contain;
    filter: drop-shadow(0 14px 28px rgba(0,0,0,.23));
}
.logo-lockup-copy { display:grid; gap:8px; min-width:220px; }
.logo-wordmark {
    display:block;
    font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive;
    font-size: clamp(2.0rem, 4vw, 3.55rem);
    line-height:1;
    color:#ffffff;
    letter-spacing:.01em;
    white-space:nowrap;
}
html[data-theme="light"] .logo-wordmark { color:#071d62; }
html[data-theme="light"] .logo-lockup-hero { background:rgba(255,255,255,.72); border-color:rgba(11,42,139,.12); }
.tricolor-line { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; width:100%; height:7px; border-radius:999px; overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.18); }
.tricolor-line i:nth-child(1){background:#17245f;}
.tricolor-line i:nth-child(2){background:#ffffff;}
.tricolor-line i:nth-child(3){background:#d71935;}
@media (max-width:700px){
    .logo-lockup-hero { gap:12px; padding:9px 12px 9px 8px; border-radius:24px; }
    .logo-lockup-hero img { width:62px !important; height:62px !important; }
    .logo-lockup-copy { min-width:160px; gap:6px; }
    .logo-wordmark { font-size: clamp(1.7rem, 9vw, 2.4rem); }
    .tricolor-line { height:5px; }
}
@media (max-width:430px){
    .logo-lockup-hero { width:100% !important; justify-content:flex-start; }
    .logo-lockup-copy { min-width:0; flex:1; }
}