/* ── Framio site.css — общий CSS для всех страниц портала ──
   Подключение: <link rel="stylesheet" href="/assets/site.css">
   Содержит: reset, переменные, base, фоновые слои, logo, card, footer.
   Страница определяет только свой layout и специфичные компоненты. */

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

/* ── Переменные ── */
:root{
  --bg:#EEF2FA; --bg-rgb:238,242,250;
  --t1:#0F172A; --t2:#334155; --t3:#64748B;
  --a:#2563EB; --a2:#E8650A;
  --border:rgba(37,99,235,.14);
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
  /* card */
  --card-bg:rgba(255,255,255,.88); --card-bdr:rgba(37,99,235,.22);
  --card-shd:rgba(37,99,235,.14);  --card-top:rgba(255,255,255,.95);
  /* header / footer backdrop */
  --hdr-bg:rgba(255,255,255,.68);
  /* photo overlay */
  --photo-ov:rgba(38,48,64,.55);
  /* grid */
  --grid-sm:rgba(37,99,235,.040); --grid-lg:rgba(37,99,235,.075);
  /* vignette */
  --vig:radial-gradient(ellipse 100% 100% at 50% 50%,transparent 58%,rgba(14,20,50,.11) 100%);
  /* gradient overlay (landing + auth) */
  --overlay:linear-gradient(108deg,rgba(238,242,250,.86) 0%,rgba(238,242,250,.64) 42%,rgba(238,242,250,.18) 68%,transparent 100%);
  /* auth/reset floating-label fields */
  --af-bg:rgba(37,99,235,.05);   --af-bdr:rgba(37,99,235,.16);
  --af-bdr-focus:rgba(37,99,235,.60); --af-lbl:rgba(15,23,42,.35);
  /* floor-plan graphite */
  --fp-beam:rgba(42,54,72,.82); --fp-aux:rgba(52,68,90,.58);
  --fp-sig:rgba(52,68,90,.34);  --fp-col:#263347;
  --fp-deck-f:rgba(42,54,72,.04); --fp-deck-s:rgba(42,54,72,.20);
  --fp-ref:rgba(42,54,72,.07);
  /* tooltip */
  --tt-bg:rgba(235,240,252,.96); --tt-val:rgba(15,23,42,.50);
  /* dimensions */
  --dim-stroke:rgba(42,54,72,.55); --dim-fill:rgba(42,54,72,.72);
  --lbl-fill:rgba(42,54,72,.58);
}
[data-theme=dark]{
  --bg:#07091A; --bg-rgb:7,9,26;
  --t1:#F0F4FF; --t2:#9FB3D0; --t3:#7A93B5;
  --border:rgba(255,255,255,.08);
  --card-bg:rgba(7,9,26,.58); --card-bdr:rgba(255,255,255,.08);
  --card-shd:rgba(0,0,0,.42); --card-top:rgba(255,255,255,.07);
  --hdr-bg:rgba(7,9,26,.36);
  --photo-ov:rgba(14,20,32,.60);
  --grid-sm:rgba(37,99,235,.018); --grid-lg:rgba(37,99,235,.036);
  --vig:radial-gradient(ellipse 100% 100% at 50% 50%,transparent 54%,rgba(0,0,0,.36) 100%);
  --overlay:linear-gradient(108deg,rgba(7,9,26,.86) 0%,rgba(7,9,26,.64) 42%,rgba(7,9,26,.22) 68%,transparent 100%);
  --af-bg:rgba(255,255,255,.05); --af-bdr:rgba(255,255,255,.10);
  --af-bdr-focus:rgba(37,99,235,.65); --af-lbl:rgba(240,244,255,.35);
  --fp-beam:rgba(155,180,215,.74); --fp-aux:rgba(130,158,198,.56);
  --fp-sig:rgba(130,158,198,.28);  --fp-col:#8AAECF;
  --fp-deck-f:rgba(155,180,215,.04); --fp-deck-s:rgba(155,180,215,.16);
  --fp-ref:rgba(155,180,215,.07);
  --tt-bg:rgba(7,9,26,.94); --tt-val:rgba(240,244,255,.40);
  --dim-stroke:rgba(155,180,215,.58); --dim-fill:rgba(155,180,215,.75);
  --lbl-fill:rgba(155,180,215,.60);
}

/* ── Base ── */
html,body{min-height:100%}
body{background:var(--bg);color:var(--t1);font-family:var(--sans);-webkit-font-smoothing:antialiased}

/* ── Фоновые слои (photo-bg, grid, vignette, grad-overlay) ── */
.photo-bg{position:fixed;inset:0;z-index:0;background-color:#0B1A3A;overflow:hidden}
.photo-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 60% 40%,#1a3a6a 0%,#06101e 100%);z-index:0}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;mix-blend-mode:screen;z-index:1;transition:filter .8s ease}
.photo-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--photo-ov);transition:background .3s}
.grid-lines{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,var(--grid-sm) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(0deg,var(--grid-sm) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,var(--grid-lg) 1px,transparent 1px) 0 0/200px 200px,
    linear-gradient(0deg,var(--grid-lg) 1px,transparent 1px) 0 0/200px 200px;
}
.vignette{position:fixed;inset:0;z-index:3;pointer-events:none;background:var(--vig)}
.grad-overlay{position:fixed;inset:0;z-index:4;pointer-events:none;background:var(--overlay)}

/* ── Page wrapper ── */
.page{position:relative;z-index:5;min-height:100vh;display:flex;flex-direction:column}

/* ── Logo ── */
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--t1)}
.logo-text{display:flex;flex-direction:column;gap:0}
.logo-name{font-size:16px;font-weight:700;letter-spacing:.12em;color:var(--t1);line-height:1.1}
.logo-sub{font-size:9px;font-weight:400;letter-spacing:.22em;color:var(--t3);line-height:1}
.logo-icx{fill:currentColor;opacity:.88}

/* ── Card (Liquid Glass) ── */
.card{
  background:var(--card-bg);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--card-bdr);border-radius:20px;
  box-shadow:0 8px 48px var(--card-shd),0 2px 8px rgba(37,99,235,.08),inset 0 1px 0 var(--card-top);
}

/* ── Footer ── */
footer{padding:18px 52px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.foot-copy{font-family:var(--mono);font-size:11px;color:var(--t3)}
.foot-link{font-size:12px;color:var(--t3);text-decoration:none}
.foot-link:hover{color:var(--t2)}

/* ── Floating-label field (.field) ── */
.field{position:relative;margin-bottom:14px}
.field input{
  width:100%;height:52px;padding:18px 14px 6px;
  background:var(--af-bg);border:1px solid var(--af-bdr);border-radius:12px;
  color:var(--t1);font-family:var(--sans);font-size:14px;outline:none;
  transition:border-color 200ms,box-shadow 200ms;
}
.field input::placeholder{color:transparent}
.field input:focus{border-color:var(--af-bdr-focus);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 50px var(--af-bg) inset;
  -webkit-text-fill-color:var(--t1);
  caret-color:var(--t1);
  transition:background-color 9999s;
}
.field label{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:14px;color:var(--af-lbl);pointer-events:none;
  transition:top 160ms ease,font-size 160ms ease,color 160ms ease,transform 160ms ease;
}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label{
  top:11px;transform:translateY(0);font-size:10.5px;letter-spacing:.05em;color:rgba(37,99,235,.9);
}

/* ── Floor-plan SVG классы ── */
.fp-deck{fill:var(--fp-deck-f);stroke:var(--fp-deck-s);stroke-width:1.5;stroke-linejoin:round}
.fp-ref {fill:none;stroke:var(--fp-ref);stroke-width:.7}
.fp-sig {fill:var(--fp-sig);stroke:rgba(0,0,0,.08);stroke-width:.4;transition:fill .12s;filter:drop-shadow(0 1px 2px rgba(0,0,0,.22))}
.fp-aux {fill:var(--fp-aux);stroke:rgba(0,0,0,.12);stroke-width:.5;transition:fill .12s;filter:drop-shadow(1px 0 3px rgba(0,0,0,.26))}
.fp-beam{fill:var(--fp-beam);stroke:rgba(0,0,0,.18);stroke-width:.7;transition:fill .12s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.34))}
.fp-col {fill:var(--fp-col);stroke:rgba(0,0,0,.32);stroke-width:.9;transition:fill .12s;filter:drop-shadow(1px 2px 6px rgba(0,0,0,.58))}
.fp-col:hover {fill:#E8650A;cursor:pointer}
.fp-beam:hover{fill:rgba(232,101,10,.88);cursor:pointer}
.fp-aux:hover {fill:rgba(232,101,10,.72);cursor:pointer}
.fp-sig:hover {fill:rgba(232,101,10,.58);cursor:pointer}
.fp-tooltip{
  position:absolute;z-index:10;pointer-events:none;display:none;
  background:var(--tt-bg);border:1px solid rgba(232,101,10,.40);
  border-radius:6px;padding:5px 10px;
  box-shadow:0 4px 18px rgba(0,0,0,.16);white-space:nowrap;
}
.fp-tt-h{display:block;font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.07em;color:rgba(232,101,10,.92);line-height:1.5}
.fp-tt-v{display:block;font-family:var(--mono);font-size:8px;color:var(--t3);line-height:1.4;margin-top:1px}
.fp-dim-l  {stroke:var(--dim-stroke);stroke-width:1.5}
.fp-dim-txt{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;fill:var(--dim-fill)}
.fp-lbl    {font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;fill:var(--lbl-fill)}

/* ── Header (общий для всех страниц) ── */
header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:24px 52px}
@media(max-width:1280px){header{padding:20px 32px}}
@media(max-width:1100px){header{padding:18px 28px}}
@media(max-width:820px) {header{padding:18px 24px}}
@media(max-width:600px) {header{padding:16px 20px}}

/* ── Theme switcher ── */
.hdr-theme{position:absolute;left:50%;transform:translateX(-50%)}
@media(max-width:600px){
  .hdr-theme{position:static;margin-left:auto}
}

/* ── Privacy page ── */
.priv-wrap{padding:56px 52px 80px;max-width:900px;line-height:1.7}
@media(max-width:1280px){.priv-wrap{padding:48px 32px 80px}}
@media(max-width:820px){.priv-wrap{padding:40px 24px 60px}}
@media(max-width:600px){.priv-wrap{padding:32px 20px 48px}}
.priv-wrap h1{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;color:var(--t1)}
.priv-updated{font-family:var(--mono);font-size:11px;color:var(--t3);margin-bottom:40px}
.priv-wrap h2{font-size:16px;font-weight:700;margin:36px 0 10px;color:var(--t1)}
.priv-wrap p{font-size:14.5px;color:var(--t2);margin-bottom:10px}
.priv-wrap ul{padding-left:20px;margin-bottom:10px}
.priv-wrap li{font-size:14.5px;color:var(--t2);margin-bottom:5px}
.priv-wrap a{color:var(--a);text-decoration:underline;text-underline-offset:2px}
.priv-wrap a:hover{color:#1d4ed8}
.priv-divider{height:1px;background:var(--border);margin:36px 0}
.privacy-page header{border-bottom:1px solid var(--border)}
.privacy-page .back{font-size:13px;color:var(--t3);text-decoration:none;display:flex;align-items:center;gap:6px}
.privacy-page .back:hover{color:var(--t2)}
.privacy-page .back svg{flex-shrink:0}
.privacy-page .hdr-center{position:absolute;left:50%;transform:translateX(-50%)}
