/* ROAN ONE: общие стили служебных страниц (/call, /contact, /privacy, /terms) в системе лендинга /seo (v18).
   25.09.2026. Только оформление: разметка и тексты страниц не менялись.
   Откат: вернуть в <head> страницы <link rel="stylesheet" href="/style.css?v=2"> и старую ссылку на шрифты. */
:root{
  --f-head:'Space Grotesk',system-ui,sans-serif;--f-text:'Inter',system-ui,sans-serif;--f-mono:'JetBrains Mono',ui-monospace,monospace;--f-h1:'Geist','Space Grotesk',system-ui,sans-serif;
  --bg:#0B0C0E;--surface:#121417;--bg-alt:#121418;--line:#23262B;--text:#F0EFEC;--muted:#7D848E;--muted2:#9AA1AB;
  --accent:#5B8CFF;--accent-tx:#5B8CFF;--on-accent:#0B0C0E;--bad:#FF8A7A;
  --shadow-win:0 26px 70px rgba(0,0,0,.72),0 6px 18px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.04);
  --grid-op:.5;--r:4px;--r-win:12px;--max:1200px;--margin:32px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{--bg:#F7F7F5;--surface:#FFFFFF;--bg-alt:#EDEDE9;--line:#E3E3DF;--text:#14161A;--muted:#63686F;--muted2:#555A61;
    --accent-tx:#2F5BE0;--on-accent:#14161A;--bad:#B42318;--grid-op:.6;
    --shadow-win:0 24px 60px rgba(20,22,26,.19),0 4px 14px rgba(20,22,26,.10);color-scheme:light}
}
@media (max-width:720px){:root{--margin:20px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:calc(var(--max) + var(--margin) * 2);margin:0 auto;padding:0 var(--margin)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:32px;height:72px;padding:0 max(var(--margin),calc((100vw - var(--max)) / 2));background:var(--bg);border-bottom:1px solid var(--line)}
.nav .brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--f-head);font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.nav .brand img{display:none}
.nav .brand::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--accent)}
.nav .brand::after{content:"ROAN ONE"}
.nav-links{display:flex;gap:24px;margin-right:auto}
.nav-links a{font-size:13.5px;color:var(--muted);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--text)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:var(--r);border:1px solid transparent;background:var(--accent);color:var(--on-accent);font-family:var(--f-text);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
.btn:hover{background:var(--text);color:var(--bg)}
.btn:disabled{opacity:.6;cursor:default}
.btn.sm{height:40px;padding:0 16px;font-size:13.5px}

/* ---------- page head ---------- */
.ihero{position:relative;isolation:isolate;padding:64px 0 48px}
.ihero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--grid-op);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;background-position:center top;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.tag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px 16px 4px 8px;font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--text);background:var(--bg)}
.tag::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--accent)}
.ihero h1{margin:24px 0 0;font-family:var(--f-h1);font-weight:500;font-size:64px;line-height:1.02;letter-spacing:-.045em;max-width:16ch}
.lead{margin:24px 0 0;max-width:36em;color:var(--muted);font-size:17px}
section{padding-bottom:96px}
@media (max-width:720px){
  .nav{gap:16px;height:64px}.nav-links{display:none}.nav .btn.sm{margin-left:auto}
  .ihero{padding:40px 0 32px}.ihero h1{font-size:40px;line-height:1.05}
  section{padding-bottom:64px}
}

/* ---------- forms (/call, /contact) ---------- */
.contact-form.card{max-width:640px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-win);box-shadow:var(--shadow-win);padding:32px}
.contact-form label{display:block;margin:20px 0 8px;font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.contact-form label:first-child{margin-top:0}
.contact-form input:not([type=checkbox]),.contact-form textarea{display:block;width:100%;height:52px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);color:var(--text);font-family:var(--f-text);font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.contact-form textarea{height:auto;padding:14px 16px;resize:vertical;line-height:1.5}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--muted)}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,140,255,.22)}
.contact-form .btn{width:100%;height:52px;margin-top:24px;font-size:16px}
/* чекбокс согласия: текст и состояние не трогаем, только вид */
.contact-form label.consent{font-family:var(--f-text) !important;font-size:13.5px !important;letter-spacing:0 !important;text-transform:none !important;color:var(--muted2) !important;line-height:1.55 !important;margin-top:24px !important;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);cursor:pointer}
.contact-form label.consent a{color:var(--text)}
.contact-form input[type=checkbox]{accent-color:var(--accent);width:18px !important;height:18px !important}
#cf-err{color:var(--bad) !important;font-weight:500}
#cf-done h3{font-family:var(--f-head);font-weight:700;font-size:28px;letter-spacing:-.03em;line-height:1.1}
#cf-done p{color:var(--muted2) !important}
@media (max-width:720px){.contact-form.card{padding:20px}}
/* Телефон США с неизменяемой «+1» (27.09.2026, пункт 4; логика — /assets/phone-us.js). Приставка лежит поверх
   левого края поля, а не рядом: ширина поля та же на любом экране, на 400px ничего не сжимается. Клик по ней
   проходит в поле (pointer-events:none). Селектор с .contact-form — чтобы перебить её padding:0 16px. */
.tel-us{position:relative}
.tel-us-pfx{position:absolute;left:1px;top:1px;bottom:1px;display:flex;align-items:center;padding:0 12px 0 16px;border-right:1px solid var(--line);
  color:var(--muted2);font-size:16px;pointer-events:none;user-select:none}
.tel-us input[type=tel],.contact-form .tel-us input[type=tel]{padding-left:62px}

/* ---------- legal (/privacy, /terms) ---------- */
.legal{max-width:46em}
.legal h3{margin:48px 0 12px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--f-head);font-weight:500;font-size:21px;line-height:1.25;letter-spacing:-.02em;color:var(--text)}
.legal h3:first-child{margin-top:0}
.legal p,.legal li{color:var(--muted2);font-size:16px;line-height:1.7}
.legal p + p{margin-top:12px}
.legal p{margin:0}
.legal ul,.legal ol{padding-left:20px;margin:12px 0}
.legal b,.legal strong{color:var(--text);font-weight:600}
.legal a{color:var(--accent-tx);text-underline-offset:3px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg-alt);padding:48px 0 64px;font-size:13.5px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:32px;align-items:start}
.foot-brand .brand-logo{display:none}
.foot-brand::before{content:"ROAN ONE";display:block;font-family:var(--f-head);font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--text)}
.foot-tag{margin:8px 0 0;max-width:24em}
.foot-src{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.foot-src img{height:16px;width:auto;opacity:.85}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col a{text-decoration:none;color:var(--muted);transition:color .2s}
.foot-col a:hover{color:var(--text)}
.foot-col a[href="/for-agencies"]{border-color:var(--line) !important;color:var(--text) !important;border-radius:var(--r) !important;font-weight:500 !important;align-self:flex-start}
.foot-social{display:flex;gap:12px}
@media (prefers-color-scheme: dark){.foot-social img{filter:invert(1)}}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.foot-legal{margin:16px 0 0;font-size:12px;line-height:1.6;max-width:70em}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1 / -1}}