:root{
    /* dark navy canvas, light text — matches the login right panel */
    --bg:#0C1B3A;            /* page background (deep navy) */
    --bg-2:#0A1426;          /* darker sections */
    --panel:#12234A;         /* raised surface (cards) */
    --panel-2:#16294F;       /* hover surface */
    --brand:#3E6BE6;         /* lifted blue for text/links on dark */
    --brand-solid:#003FBB;   /* solid brand for buttons */
    --brand-lift:#1E5AE0;
    --text:#EAF0FB;          /* primary light text */
    --muted:#9FB0D0;         /* muted light text */
    --line:rgba(159,176,208,.18); /* hairline on dark */
    --line-2:rgba(159,176,208,.28);
    /* light form panel tokens (login drawer stays light) */
    --paper:#FFFFFF; --ink:#0C1B3A; --mist:#F4F6FA; --f-muted:#5A6B86; --f-line:#D7DEEA;
    /* light section backgrounds (grid/media_text "bg": "white"/"gray") — distinct from the
       login panel tokens above so tuning one doesn't affect the other */
    --sec-white:#F7F8FB; --sec-gray:#E6E9F0;
    /* blue-tinted card variant, opt-in per grid via "card": "blue" (currently only
       the "Модули платформы" grid) — scoped, doesn't affect the neutral white/gray cards */
    --mod-blue-bg:#EDF4FF; --mod-blue-border:#E1EBFC; --mod-blue-title:#0C1427; --mod-blue-tile-border:#DCE7FA;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    color:var(--text); background:var(--bg);
    -webkit-font-smoothing:antialiased; line-height:1.5;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    width:100%;
}
a{color:inherit;text-decoration:none}

/* ===================== NAVBAR ===================== */
.nav{
    position:sticky;top:0;z-index:40;
    display:flex;align-items:center;gap:28px;
    padding:16px 40px;
    background:rgba(12,27,58,.82);
    backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid var(--line);
    width:100%;
}
.nav__logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;color:var(--text)}
.logo_mark{
    width:30px;height:30px;border-radius:7px;flex:none;
    background:linear-gradient(135deg,var(--brand) 0%,#8FA9EE 100%);
    position:relative;box-shadow:0 2px 10px rgba(62,107,230,.4);
}
.logo_mark::after{
    content:"";position:absolute;inset:8px;background:var(--bg);
    clip-path:polygon(0 0,55% 0,55% 55%,100% 55%,100% 100%,0 100%);border-radius:2px;
}
.nav__logo b{color:var(--brand)}
.nav__links{display:flex;gap:22px;margin-left:14px}
.nav__links a{font-size:14px;font-weight:500;color:var(--muted);padding:6px 0;position:relative}
.nav__links a:hover,.nav__links a.is-active{color:var(--text)}
.nav__links a.is-active::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--brand);border-radius:2px;
}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:14px}
.langsw{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.langsw a{font:inherit;font-size:12px;font-weight:600;padding:5px 10px;border:none;background:transparent;color:var(--muted);cursor:pointer}
.langsw a.is-on{background:var(--brand);color:#fff}
.btn-login{
    font:inherit;font-weight:600;font-size:14px;color:#fff;
    background:var(--brand-solid);border:none;border-radius:9px;
    padding:9px 18px;cursor:pointer;transition:background .16s;
}
.btn-login:hover{background:var(--brand-lift)}

/* ===================== PAGE SHELL ===================== */
main{
    min-height: 200px;
    flex-grow:1;
}
.page{max-width:1180px;margin:0 auto;padding:0 40px}

/* ---- HERO ---- */
.hero{
    display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
    min-height:calc(100dvh - 63px);padding:40px 0;
}
.hero__eyebrow{
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:2.5px;
    text-transform:uppercase;color:var(--brand);margin-bottom:18px;
}
.hero__title{font-size:52px;line-height:1.05;letter-spacing:-1.2px;font-weight:600;margin-bottom:20px;color:var(--text)}
.hero__tagline{
    font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:1px;
    font-style:italic;color:var(--muted);margin:-8px 0 20px;
}
.hero__tagline:empty{display:none}
.hero__lead{font-size:18px;color:var(--muted);max-width:46ch;margin-bottom:32px;line-height:1.55}
.hero__cta{display:flex;gap:14px}
.btn-primary{
    font:inherit;font-weight:600;font-size:15px;color:#fff;background:var(--brand-solid);
    border:none;border-radius:11px;padding:14px 26px;cursor:pointer;transition:background .16s
}
.btn-primary:hover{background:var(--brand-lift)}
.btn-ghost{
    font:inherit;font-weight:600;font-size:15px;color:var(--text);background:transparent;
    border:1.5px solid var(--line-2);border-radius:11px;padding:14px 26px;cursor:pointer;transition:border-color .16s
}
.btn-ghost:hover{border-color:var(--brand)}

/* signature module field (reused) */
.modfield{
    position:relative;aspect-ratio:1/1;width:100%;border-radius:18px;overflow:hidden;
    background:
            radial-gradient(120% 90% at 75% 20%, rgba(62,107,230,.28) 0%, transparent 55%),
            linear-gradient(160deg,#16294F 0%,#0E1D3E 100%);
    border:1px solid var(--line);
    box-shadow:0 30px 70px -24px rgba(0,0,0,.55);
}
.modfield svg{position:absolute;inset:0;width:100%;height:100%}
.modfield__meta{
    position:absolute;left:22px;bottom:20px;z-index:2;
    font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:2px;
    text-transform:uppercase;color:#8FA3C8;
}

/* ---- PILLARS ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:14px 0 40px}
.pillar{padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.pillar__k{
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:2px;
    text-transform:uppercase;color:var(--brand);margin-bottom:10px
}
.pillar__h{font-size:17px;font-weight:600;margin-bottom:6px;color:var(--text)}
.pillar__p{font-size:14px;color:var(--muted);line-height:1.5}

/* ---- INDUSTRY STRIP ---- */
.strip{
    display:flex;flex-wrap:wrap;gap:10px;padding:0 0 60px;
}
.chip{
    font-size:13px;font-weight:500;color:var(--muted);
    border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;background:var(--panel)
}

/* ===================== INNER PAGE (Modules) ===================== */
.section-head{padding:56px 0 8px}
.section-head .eyebrow{
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:2.5px;
    text-transform:uppercase;color:var(--brand);margin-bottom:14px
}
.section-head h1{font-size:38px;letter-spacing:-.6px;font-weight:600;margin-bottom:10px;color:var(--text)}
.section-head p{font-size:16px;color:var(--muted);max-width:56ch}

.grid-mod{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:28px 0 40px;list-style:none}
.mod{
    padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
    transition:border-color .16s, transform .16s, box-shadow .16s, background .16s;
}
@media (hover:hover){
    .mod:hover{border-color:var(--brand);background:var(--panel-2);transform:translateY(-4px);box-shadow:0 16px 34px -16px rgba(0,0,0,.5)}
}
.mod__ic{
    width:56px;height:56px;border-radius:15px;margin-bottom:18px;
    background:rgba(62,107,230,.14);display:flex;align-items:center;justify-content:center;
    color:var(--brand);font-size:18px;
}
.mod__ic svg{width:30px;height:30px}
.mod__h{font-size:16px;font-weight:600;margin-bottom:6px;color:var(--text)}
.mod__p{font-size:13.5px;color:var(--muted);line-height:1.5}
.grid-note{font-size:14px;color:var(--muted)}
.mod__link{display:block;color:inherit}
.mod__link:focus-visible{outline:2px solid var(--brand-solid);outline-offset:2px;border-radius:14px}

.grid-more{padding-bottom:64px}
.grid-more:empty{padding-bottom:0}

/* ---- MEDIA + TEXT ---- */
.media-text{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:56px 0}
.media-text__body{order:1}
.media-text__media{order:2}
.media-text--left .media-text__body{order:2}
.media-text--left .media-text__media{order:1}
.media-text .eyebrow{
    font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:2.5px;
    text-transform:uppercase;color:var(--brand);margin-bottom:14px;
}
.media-text h2{font-size:32px;letter-spacing:-.5px;font-weight:600;margin-bottom:14px;color:var(--text)}
.media-text__text{font-size:16px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.media-text__bullets{list-style:none;margin-bottom:24px}
.media-text__bullets li{position:relative;padding-left:20px;font-size:14px;color:var(--muted);margin-bottom:8px}
.media-text__bullets li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.media-text__cta{display:flex;gap:14px}
.media-text__media img{width:100%;border-radius:14px;border:1px solid var(--line);background:var(--panel);display:block}

/* ---- LIGHT SECTION VARIANTS (bg: "white" | "gray" in block config) ---- */
.section--white{background:var(--sec-white)}
.section--gray{background:var(--sec-gray)}
.section--white,.section--gray{color:var(--ink)}
.section--white .eyebrow,.section--gray .eyebrow,
.section--white .section-head .eyebrow,.section--gray .section-head .eyebrow,
.section--white .media-text .eyebrow,.section--gray .media-text .eyebrow{color:var(--brand)}
.section--white h1,.section--gray h1,
.section--white h2,.section--gray h2,
.section--white .section-head h1,.section--gray .section-head h1,
.section--white .media-text h2,.section--gray .media-text h2{color:var(--ink)}
.section--white p,.section--gray p,
.section--white .section-head p,.section--gray .section-head p,
.section--white .media-text__text,.section--gray .media-text__text,
.section--white .media-text__bullets li,.section--gray .media-text__bullets li,
.section--white .mod__p,.section--gray .mod__p,
.section--white .grid-note,.section--gray .grid-note{color:var(--f-muted)}
.section--white .mod,.section--gray .mod{background:var(--paper);border-color:var(--f-line)}
@media (hover:hover){
    .section--white .mod:hover,.section--gray .mod:hover{border-color:var(--brand);box-shadow:0 16px 34px rgba(12,20,39,.09)}
}
.section--white .mod__ic,.section--gray .mod__ic{background:#fff;border:1px solid var(--f-line)}
.section--white .media-text__media img,.section--gray .media-text__media img{background:var(--mist);border-color:var(--f-line)}

/* ---- blue card variant (grid "card": "blue") — overrides the neutral white/gray
   section card treatment above, wins on source order (same specificity) ---- */
.grid-mod--blue .mod{background:var(--mod-blue-bg);border-color:var(--mod-blue-border);border-radius:16px}
.grid-mod--blue .mod__h{color:var(--mod-blue-title)}
.grid-mod--blue .mod__ic{background:#FFFFFF;border:1px solid var(--mod-blue-tile-border)}
.section--white .btn-ghost,.section--gray .btn-ghost{color:var(--ink);border-color:var(--f-line)}
.section--white .btn-ghost:hover,.section--gray .btn-ghost:hover{border-color:var(--brand)}

/* ---- CTA BANNER ---- */
.cta-banner{
    text-align:center;padding:64px 40px;margin:24px 0 64px;border-radius:18px;
    background:var(--panel);border:1px solid var(--line);
}
.cta-banner h2{font-size:30px;font-weight:600;letter-spacing:-.4px;margin-bottom:10px;color:var(--text)}
.cta-banner p{font-size:16px;color:var(--muted);margin-bottom:26px}
.cta-banner--white,.cta-banner--gray{border-color:var(--f-line)}
.cta-banner--white{background:var(--sec-white)}
.cta-banner--gray{background:var(--sec-gray)}
.cta-banner--white h2,.cta-banner--gray h2{color:var(--ink)}
.cta-banner--white p,.cta-banner--gray p{color:var(--f-muted)}
.cta-banner--white .btn-ghost,.cta-banner--gray .btn-ghost{color:var(--ink);border-color:var(--f-line)}
.cta-banner__btn{display:flex;justify-content:center}

/* ===================== FOOTER ===================== */
.foot{
    border-top:1px solid var(--line);padding:28px 40px;
    display:flex;align-items:center;gap:18px;color:var(--muted);font-size:13px;
    background:var(--bg-2);
    width:100%;
}
.foot a{color:var(--muted)}.foot a:hover{color:var(--text)}
.foot__sp{margin-left:auto}

/* ===================== LOGIN DRAWER ===================== */
.backdrop{
    position:fixed;inset:0;z-index:50;background:rgba(10,20,38,.5);
    opacity:0;visibility:hidden;transition:opacity .25s, visibility .25s;
}
.backdrop.is-open{opacity:1;visibility:visible}
.drawer{
    position:fixed;top:0;left:0;bottom:0;z-index:51;width:420px;max-width:92vw;
    background:var(--paper);box-shadow:24px 0 60px -20px rgba(12,27,58,.4);
    transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
    display:flex;flex-direction:column;padding:40px 44px;
}
.drawer.is-open{transform:translateX(0)}
.drawer__close{
    position:absolute;top:20px;right:20px;width:34px;height:34px;border-radius:8px;
    border:1px solid var(--f-line);background:var(--paper);cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:var(--f-muted)
}
.drawer__close:hover{color:var(--ink);border-color:var(--f-muted)}
.drawer .brandline{display:flex;align-items:center;gap:10px;margin-bottom:auto;font-weight:600}
.signin__eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--f-muted);margin-bottom:14px}
.signin__title{font-size:24px;font-weight:600;margin-bottom:6px;letter-spacing:-.3px;color:var(--ink);}
.signin__sub{font-size:14px;color:var(--f-muted);margin-bottom:28px}
.field{position:relative;margin-bottom:16px}
.field__input{
    width:100%;padding:15px;font:inherit;font-size:15px;color:var(--ink);
    background:var(--mist);border:1.5px solid transparent;border-radius:11px;outline:none;
    transition:border-color .16s, background .16s;
}
.field__input::placeholder{color:transparent}
.field__label{
    position:absolute;left:15px;top:16px;font-size:15px;color:var(--f-muted);
    pointer-events:none;transition:transform .16s, font-size .16s, color .16s;
    transform-origin:left top;background:transparent;padding:0 4px
}
.field__input:focus{border-color:var(--brand);background:var(--paper)}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label{
    transform:translateY(-24px) scale(.82);color:var(--brand);background:var(--paper)
}
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--ink);
    -webkit-box-shadow:0 0 0 1000px var(--mist) inset;
    box-shadow:0 0 0 1000px var(--mist) inset;
    transition:background-color 9999s ease-in-out 0s;
}
.enter{
    width:100%;margin-top:8px;padding:15px;font:inherit;font-weight:600;font-size:15px;
    color:#fff;background:var(--brand);border:none;border-radius:11px;cursor:pointer;transition:background .16s
}
.enter:hover{background:var(--brand-lift)}
.drawer__foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--f-muted);margin-top:auto}

/* pages toggle for the prototype */
.view{display:none}.view.is-shown{display:block}

.nav_entry_logo span {
    display: inline-block;
    width: 60px;
    height: 30px;
    background: linear-gradient(var(--angle, 135deg), var(--from, #003FBB), var(--to, #0A2A6B));
    -webkit-mask: var(--src) no-repeat center / contain;
    mask: var(--src) no-repeat center / contain;
}
.foot_entry_logo span {
    display: inline-block;
    width: 60px;
    height: 20px;
    background: linear-gradient(var(--angle, 135deg), var(--from, #003FBB), var(--to, #0A2A6B));
    -webkit-mask: var(--src) no-repeat center / contain;
    mask: var(--src) no-repeat center / contain;
}
.entry_logo_wrapper
{
    min-height:30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
}
.entry_logo_wrapper .entry_logo {
    text-align: center;
}
.entry_logo_wrapper .entry_logo span {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: linear-gradient(var(--angle, 135deg), var(--from, #003FBB), var(--to, #0A2A6B));
    -webkit-mask: var(--src) no-repeat center / contain;
    mask: var(--src) no-repeat center / contain;
}
.entry_logo_wrapper .entry_logo_text
{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.3px;
    text-wrap:nowrap;
    min-width:200px;
    display: flex;
    align-items: center;
    text-align: left;
    color:var(--ink);
    padding-top:15px;
}


@media (max-width:900px){
    .hero{grid-template-columns:1fr}
    .modfield{max-width:420px}
    .pillars,.grid-mod{grid-template-columns:1fr}
    .nav__links{display:none}
    .page{padding:0 22px}.nav{padding:14px 22px}
    .media-text{grid-template-columns:1fr}
    .media-text__body,.media-text--left .media-text__body{order:1}
    .media-text__media,.media-text--left .media-text__media{order:2}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.drawer .logo_mark::after{background:#fff}
.drawer .brandline > span:last-child{color:var(--ink)}