/* ===========================================================================
   Borneo · публичный сайт, прототип (ТЗ 105, раздел А)
   Реализация docs/spec/site.md: 13 полноэкранных секций, «1 свайп = 1 смысл»,
   четыре тихие абстракции §2.3, приёмы §2.1.

   Сайт — НЕ экран телефона: .phone/.screen 302×636 здесь не используются
   буквально (site.md §2, прямой запрет в ТЗ 097). Токены, грамматика и
   значения взяты из references/design-system.md, а не импортом borneo.css:
   его классы (.glass, .kick, .title) на широком экране означают другое.
   Честное превью в тех же классах, что приложение, живёт в конфигураторе —
   там borneo.css подключён как есть.

   Цвета меша и акцентов приходят из data/theme.json (таблицы docs/spec/theme.md)
   переменными --g1..--g4; ни одного оттенка, подобранного на глаз, в файле нет.
   =========================================================================== */

@import url("../fonts.css");

:root{
  /* токены продукта — references/design-system.md */
  --w:#FFFFFF; --w-2:rgba(255,255,255,.74); --w-3:rgba(255,255,255,.5);
  --page:#0B0D11; --glass-line:rgba(255,255,255,.32);
  --dot:#8FE3A6;                      /* зелёная точка присутствия — семантика, не оформление */
  --font-h:"Onest",system-ui,sans-serif;
  --font-b:"Manrope",system-ui,sans-serif;
  /* стартовые значения меша = палитра «Альбом», температура cold; дальше их пишет site.js */
  --g1:#2C5CE0; --g2:#7B4FE0; --g3:#1E3E9C; --g4:#E86BC0; --g4a:.5;
  --accent:#FFC36B; --accent-ink:#15181F; --accent-btn:#15181F;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--page);overscroll-behavior:none}
body{color:var(--w);font-family:var(--font-b);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ===== A · один меш на всю страницу: дрейфует и перетекает по температуре ===== */
.gmesh{position:fixed;inset:-20%;z-index:0;pointer-events:none;contain:strict}
.gmesh i{position:absolute;display:block;border-radius:50%;filter:blur(9vw);
  transition:background-color .3s linear;will-change:transform}
.gmesh i:nth-child(1){width:40vw;height:40vw;left:-9vw;top:-9vw;background:var(--g1)}
.gmesh i:nth-child(2){width:32vw;height:32vw;right:-7vw;top:13vw;background:var(--g2);opacity:.85}
.gmesh i:nth-child(3){width:36vw;height:36vw;left:-5vw;bottom:-11vw;background:var(--g3)}
.gmesh i:nth-child(4){width:19vw;height:19vw;right:9vw;bottom:7vw;background:var(--g4);opacity:var(--g4a)}
/* затемняющий слой — тот же приём, что .screen::after в приложении: текст читается при любом меше */
.gshade{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,11,16,.34),rgba(9,11,16,.14) 35%,rgba(9,11,16,.52))}
/* статичное зерно: материальность, не движение — reduce его не выключает */
.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ===== каркас: 13 секций во весь экран, scroll-snap ===== */
.site{position:relative;z-index:2;height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;
  scroll-behavior:smooth;scrollbar-width:none}
.site::-webkit-scrollbar{display:none}
.sec{position:relative;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:10vh 8vw;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.inner{position:relative;z-index:4;max-width:920px;width:100%}
.inner.wide{max-width:1180px}

/* ===== типографика: формулы copy.md, но крупнее и свободнее (site.md §2) ===== */
.kick{font-size:12px;color:var(--w-3);letter-spacing:.16em;text-transform:lowercase}
.h1{font-family:var(--font-h);font-weight:200;font-size:clamp(32px,5.6vw,84px);line-height:1.04;
  letter-spacing:-.03em;margin:12px 0 0;text-wrap:balance}
.lead{font-size:clamp(14px,1.45vw,19px);color:var(--w-2);margin-top:18px;max-width:58ch}
.tiny{font-size:12px;color:var(--w-3);margin-top:18px;max-width:62ch}
.glass{position:relative;border-radius:26px;padding:22px 24px;border:1px solid var(--glass-line);
  background:linear-gradient(150deg,rgba(255,255,255,.15),rgba(255,255,255,.06));
  backdrop-filter:blur(28px) saturate(1.25);-webkit-backdrop-filter:blur(28px) saturate(1.25);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22)}
/* свет по стеклу за курсором — только мышь, в покое ничего не стоит */
@media (hover:hover) and (pointer:fine){
  .glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    opacity:0;transition:opacity .35s ease;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 60%)}
  .glass:hover::after{opacity:1}
}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  font-size:11px;font-weight:600;font-family:var(--font-h);letter-spacing:.02em}
.badge.demo{background:color-mix(in srgb,var(--accent) 20%,transparent);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent)}

/* одна белая кнопка на секцию — тот же язык, что .pillbtn в приложении */
.pillbtn{display:inline-flex;align-items:center;gap:12px;margin-top:28px;
  background:rgba(255,255,255,.94);color:#15181F;border-radius:999px;padding:14px 20px 14px 26px;
  font-size:14px;font-weight:600;font-family:var(--font-h);transition:transform .15s ease}
.pillbtn .a{width:32px;height:32px;border-radius:50%;background:var(--accent-btn);color:var(--accent-ink);
  display:grid;place-items:center;flex:none}
.pillbtn:hover{transform:translateY(-1px)}
.pillbtn:active{transform:scale(.98)}
.linkrow{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--w-3)}
.linkrow:hover{color:var(--w-2)}

/* появление по скроллу: длиннее бросок, чем heroIn в приложении */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.grid .reveal:nth-child(2){transition-delay:.08s}
.grid .reveal:nth-child(3){transition-delay:.16s}
.grid .reveal:nth-child(4){transition-delay:.24s}
.grid .reveal:nth-child(5){transition-delay:.32s}
.grid .reveal:nth-child(6){transition-delay:.4s}
.grid .reveal:nth-child(7){transition-delay:.48s}
.grid .reveal:nth-child(8){transition-delay:.56s}
/* заголовок героя: два удара выходят из блюра, второй — на 140 мс позже */
.h1.split{text-wrap:initial}
.h1 .ln{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(10px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.h1 .ln:nth-child(3){transition-delay:.14s}
.in .h1 .ln{opacity:1;filter:blur(0);transform:none}

/* ===== шапка: язык и переход в конфигуратор ===== */
.top{position:fixed;top:0;left:0;right:0;z-index:22;display:flex;align-items:center;gap:14px;
  padding:16px 22px;pointer-events:none}
.top>*{pointer-events:auto}
.brandmark{display:inline-flex;align-items:center;gap:9px;margin-right:auto}
.brandmark .ring{position:relative;width:17px;height:17px;border-radius:50%;
  border:1.3px solid rgba(255,255,255,.5);flex:none}
.brandmark .ring i{position:absolute;width:6px;height:6px;border-radius:50%;top:-2px;right:-1px;
  background:linear-gradient(135deg,#E8659A,#FFC36B)}
.brandmark .wd{font-family:var(--font-h);font-weight:300;font-size:14px;letter-spacing:.04em;color:var(--w-3)}
.lang{display:flex;gap:2px;padding:3px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.lang button,.lang a{padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:600;
  font-family:var(--font-h);color:var(--w-3);transition:all .2s ease}
.lang button.on,.lang a.on{background:rgba(255,255,255,.94);color:#15181F}
.topbtn{padding:8px 15px;border-radius:999px;font-size:12px;font-weight:600;font-family:var(--font-h);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--w-2)}
.topbtn:hover{color:#fff;border-color:rgba(255,255,255,.34)}

/* рельс секций справа: точки, на hover — имена */
.rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:20;
  display:flex;flex-direction:column;gap:9px}
.rail a{position:relative;width:6px;height:6px;border-radius:50%;display:block;
  background:rgba(255,255,255,.28);transition:height .25s ease,background .25s ease}
.rail a.on{height:20px;border-radius:3px;background:#fff}
.rail a::after{content:attr(data-name);position:absolute;right:15px;top:50%;white-space:nowrap;
  transform:translate(6px,-50%);font-size:11px;color:var(--w-3);letter-spacing:.06em;
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.rail:hover a::after{opacity:1;transform:translate(0,-50%)}
@media (max-width:700px){.rail{right:10px}.rail a::after{display:none}}

/* ===== D · единственный кадр телефона на сайте: наклон 3°, три слоя параллакса ===== */
.hero{display:flex;align-items:center;gap:6vw}
.hero .txt{flex:1;min-width:0}
.phone{flex:none;width:236px;height:496px;border-radius:38px;padding:5px;
  background:linear-gradient(160deg,#4A4E57,#0B0D11 46%);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.09);
  transform:rotate(3deg);will-change:transform}
.ph{position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;background:#1A1F2A}
.ph .lay{position:absolute;inset:0;will-change:transform}
.ph .mesh i{position:absolute;display:block;border-radius:50%;filter:blur(30px)}
.ph .mesh i:nth-child(1){width:200px;height:200px;left:-52px;top:-32px;background:var(--pg1,var(--g1))}
.ph .mesh i:nth-child(2){width:168px;height:168px;right:-62px;top:112px;background:var(--pg2,var(--g2));opacity:.85}
.ph .mesh i:nth-child(3){width:176px;height:176px;left:-32px;bottom:-62px;background:var(--pg3,var(--g3))}
.ph .mesh i:nth-child(4){width:96px;height:96px;right:14px;bottom:56px;background:var(--pg4,var(--g4));opacity:var(--pg4a,.5)}
.ph .shade{background:linear-gradient(180deg,rgba(10,12,18,.28),rgba(10,12,18,.1) 35%,rgba(10,12,18,.44))}
.ph .ui{padding:52px 16px 22px;display:flex;flex-direction:column;gap:9px}
.ph .island{position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:64px;height:18px;background:#0A0C10;border-radius:12px;z-index:9}
.ph .k{font-size:9px;color:var(--w-3);letter-spacing:.13em;text-transform:lowercase;
  display:flex;align-items:center;gap:5px}
.ph .t{font-family:var(--pfh,var(--font-h));font-weight:var(--ptw,200);font-size:23px;line-height:1.07;
  letter-spacing:var(--ptt,-.03em)}
.ph .card{border-radius:20px;padding:13px 14px;border:1px solid var(--glass-line);
  background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.ph .n{font-family:var(--pfh,var(--font-h));font-weight:200;font-size:40px;line-height:.9;letter-spacing:-.04em}
.ph .u{font-size:9.5px;color:var(--w-2);margin-top:6px;display:flex;align-items:center}
.ph .b{font-size:10px;color:var(--w-2);line-height:1.45;font-family:var(--pfb,var(--font-b))}
.ph .row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.ph .row:last-child{border-bottom:none}
.ph .row .ic{width:24px;height:24px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24)}
.ph .row .rt{font-family:var(--pfh,var(--font-h));font-weight:600;font-size:11px}
.ph .row .rs{font-size:9.5px;color:var(--w-2);margin-top:1px}
.ph .row .go{margin-left:auto;color:var(--w-3);flex:none}
.ph .btn{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;
  background:rgba(255,255,255,.92);color:#15181F;border-radius:999px;padding:10px 12px 10px 16px;
  font-size:11.5px;font-weight:600;font-family:var(--pfh,var(--font-h))}
.ph .btn .a{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--paccent-btn,var(--accent-btn));color:var(--paccent-ink,var(--accent-ink))}
.dot{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--dot);flex:none;
  box-shadow:0 0 0 0 rgba(143,227,166,.55)}
@media (max-width:900px){.hero{display:block}.phone{display:none}}

/* ===== B · поле точек «здесь и открыты» (секция 4) ===== */
.field{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.figure{display:flex;align-items:baseline;gap:14px;margin-top:26px;flex-wrap:wrap}
.figure .n{font-family:var(--font-h);font-weight:200;font-size:clamp(52px,8vw,124px);line-height:.9;
  letter-spacing:-.04em}
.figure .u{font-size:14px;color:var(--w-2);display:inline-flex;align-items:center}

/* ===== C · импульсы кличей кольцом (секция 5) ===== */
.cry{position:absolute;z-index:2;width:300px;height:300px;margin:-150px 0 0 -150px;pointer-events:none}
.cry::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.38);transform:scale(.14);opacity:0;
  animation:cry 4.6s cubic-bezier(.2,.6,.3,1) infinite;animation-play-state:paused}
.sec.live .cry::before{animation-play-state:running}
.cry:nth-of-type(2)::before{animation-delay:1.5s}
.cry:nth-of-type(3)::before{animation-delay:3s}
@keyframes cry{0%{transform:scale(.14);opacity:0}12%{opacity:.5}100%{transform:scale(1);opacity:0}}

/* ===== сетки: модули (6) и заготовки (8) ===== */
.grid{display:grid;gap:16px;margin-top:30px}
.grid.mods{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:1040px}
.grid.arch{grid-template-columns:repeat(auto-fit,minmax(212px,1fr));max-width:1160px}
.card{padding:20px;transition:transform .2s ease}
.card:hover{transform:translateY(-4px)}
.card .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.card .t{font-family:var(--font-h);font-weight:600;font-size:14.5px}
.card .s{font-size:12px;color:var(--w-2);margin-top:6px;line-height:1.45}
.grid.arch .card .s{color:var(--w-3);font-size:11.5px}

/* ===== секция 7 · почерк: палитры, шрифты, живой телефон ===== */
.hand{display:flex;gap:5vw;align-items:center;flex-wrap:wrap}
.hand .txt{flex:1;min-width:280px}
.swrow{position:relative;display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.swind{position:absolute;top:0;left:0;border-radius:999px;background:rgba(255,255,255,.94);
  z-index:0;transition:transform .35s cubic-bezier(.16,1,.3,1),width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1);
  will-change:transform}
.sw{position:relative;z-index:1;display:flex;align-items:center;gap:9px;padding:9px 14px 9px 9px;
  border-radius:999px;font-size:12.5px;font-family:var(--font-h);color:var(--w-2);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);transition:color .25s ease}
.sw .sp{display:flex;gap:3px}
.sw .sp i{width:9px;height:9px;border-radius:50%;display:block}
.sw.on{color:#15181F;background:transparent;border-color:transparent}
.fontrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.fbtn{padding:8px 14px;border-radius:999px;font-size:12.5px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--w-2)}
.fbtn.on{background:rgba(255,255,255,.94);color:#15181F;border-color:transparent}
.rowlab{font-size:11px;color:var(--w-3);letter-spacing:.14em;text-transform:lowercase;margin-top:22px}

/* ===== секция 9 · одна команда ===== */
.term{display:flex;align-items:center;gap:14px;margin-top:28px;position:relative;overflow:hidden;
  padding:20px 24px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(12px,1.5vw,16px);background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.04))}
.term .d3{display:flex;gap:6px;flex:none}
.term .d3 i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.term code{color:#fff;word-break:break-all}
.term .cur{display:inline-block;width:1px;height:1.1em;vertical-align:-2px;margin-left:2px;
  background:rgba(255,255,255,.7);transition:opacity .4s}
.term.done .cur{opacity:0}
.term::before{content:"";position:absolute;top:0;left:-60%;width:30%;height:100%;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent)}

/* ===== секция 11 · шаги ===== */
.steps{display:flex;flex-direction:column;margin-top:26px;max-width:560px}
.step{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.step:last-child{border-bottom:none}
.step .n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:700;font-family:var(--font-h);background:rgba(255,255,255,.9);color:#15181F}
.step p{font-size:13.5px;color:var(--w-2);line-height:1.4;margin-top:3px}
.step p b{color:#fff;font-weight:600}

/* ===== секция 12 · цена ===== */
.price{max-width:400px;padding:26px;margin-top:28px}
.price .n{font-family:var(--font-h);font-weight:200;font-size:40px;line-height:1.1}
.price .n small{font-size:13px;color:var(--w-3);font-weight:400}
.check{display:flex;gap:9px;align-items:flex-start;padding:8px 0}
.check .dt{width:17px;height:17px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:#15181F;margin-top:2px}
.check p{font-size:12.5px;color:var(--w-2);line-height:1.4}

/* ===== секция 13 · контакт (заглушка) ===== */
.form{display:flex;flex-direction:column;gap:10px;max-width:460px;margin-top:26px}
.form input,.form textarea{width:100%;padding:13px 15px;border-radius:16px;font:inherit;font-size:13.5px;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);outline:none}
.form textarea{min-height:88px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:rgba(255,255,255,.45)}
.form input::placeholder,.form textarea::placeholder{color:var(--w-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.said{font-size:12px;color:var(--w-3);margin-top:12px;min-height:1.2em}

/* ===== движение — только с разрешения посетителя ===== */
@media (prefers-reduced-motion: no-preference){
  .gmesh i{animation:drift 19s ease-in-out infinite}
  .gmesh i:nth-child(1){animation-delay:-1s}
  .gmesh i:nth-child(2){animation-delay:-6s}
  .gmesh i:nth-child(3){animation-delay:-10s}
  .gmesh i:nth-child(4){animation-delay:-15s}
  .dot{animation:pulseDot 2.4s ease-out infinite}
  .term::before{animation:sheen 6s ease-in-out infinite}
  .glass,.ph .card{animation:glassBreath 8s ease-in-out infinite}
}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(1.4vw,-1.8vw) scale(1.06)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(143,227,166,.55)}50%{box-shadow:0 0 0 8px rgba(143,227,166,0)}}
@keyframes sheen{0%,20%{left:-60%}55%,100%{left:130%}}
@keyframes glassBreath{0%,100%{opacity:1}50%{opacity:.97}}

/* reduce → статика: A стоит на температуре секции, B рисуется одним кадром,
   C нет вовсе, D сохраняет наклон 3° без параллакса (site.md §2.3) */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .h1 .ln{opacity:1;filter:none;transform:none;transition:none}
  .cry{display:none}
  .glass::after{display:none}
  .swind{transition:none}
  .site{scroll-behavior:auto}
}