/* ---- hero ---- */
.hero{padding:110px 0 80px;position:relative}
.hero__panel{padding:64px;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.hero__panel::after{ /* glass sheen */
  content:"";position:absolute;top:-60%;left:-30%;width:70%;height:220%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.07),transparent);
  transform:rotate(8deg);pointer-events:none;
}
.hero h1{font-size:clamp(30px,4.6vw,58px);font-weight:700;margin-bottom:20px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--d1-cyan),var(--d1-blue),var(--d1-violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--d1-ink-dim);font-size:19px;max-width:560px;margin-bottom:34px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.btn-ghost{padding:12px 26px;border-radius:40px;border:1px solid var(--d1-stroke);background:var(--d1-glass);font-size:15px;font-weight:500;transition:.2s;cursor:pointer;color:var(--d1-ink)}
.btn-ghost:hover{background:var(--d1-glass-strong)}
.hero__orbs{position:relative;height:320px}
.orb{position:absolute;border-radius:50%;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--d1-stroke);background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.02));animation:float 7s ease-in-out infinite}
.orb:nth-child(1){width:170px;height:170px;top:8%;right:14%}
.orb:nth-child(2){width:96px;height:96px;bottom:16%;right:46%;animation-delay:-2.5s}
.orb:nth-child(3){width:60px;height:60px;top:44%;right:0;animation-delay:-4.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

/* ---- clients ---- */
.clients{padding:26px 0 10px}
.clients__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.client-chip{padding:12px 24px;border-radius:40px;font-family:var(--d1-display);font-size:13px;font-weight:400;letter-spacing:.08em;color:var(--d1-ink-dim);white-space:nowrap}

/* ---- projects: шахматка ---- */
.projects__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.project{padding:34px;min-height:320px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;transition:.25s}
.project:hover{background:var(--d1-glass-strong);border-color:rgba(255,255,255,.26)}
.project__img{position:absolute;inset:0;background-color:rgba(76,125,255,.10);background-image:linear-gradient(140deg,rgba(76,125,255,.22),rgba(138,92,246,.16));background-size:cover;background-position:center;opacity:.85;mask-image:linear-gradient(180deg,#000 30%,transparent 92%);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 92%)}
.project__tag{position:relative;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--d1-cyan);margin-bottom:8px}
.project h3{position:relative;font-size:21px;margin-bottom:6px}
.project p{position:relative;color:var(--d1-ink-dim);font-size:15px}
.projects__more{margin-top:40px;text-align:center}

/* ---- principles ---- */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.principle{padding:32px}
.principle:nth-child(4){grid-column:span 2}
.principle .ico{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;margin-bottom:18px;background:linear-gradient(135deg,rgba(76,125,255,.25),rgba(138,92,246,.25));border:1px solid var(--d1-stroke);font-size:22px}
.principle h3{font-size:17px;margin-bottom:10px}
.principle p{color:var(--d1-ink-dim);font-size:15px}

/* ---- expertise ---- */
.expertise{display:flex;flex-wrap:wrap;gap:14px}
.exp-card{flex:1 1 260px;padding:26px 28px;transition:.2s}
.exp-card:hover{background:var(--d1-glass-strong)}
.exp-card h3{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.exp-card h3 b{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--d1-blue),var(--d1-cyan));flex:none}
.exp-card p{font-size:14px;color:var(--d1-ink-dim)}

/* ---- blog ---- */
.blog__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.post{padding:26px;display:flex;flex-direction:column;gap:12px;min-height:210px;transition:.2s}
.post:hover{background:var(--d1-glass-strong)}
.post time{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--d1-cyan)}
.post h3{font-size:16px;line-height:1.4;font-family:var(--d1-body);font-weight:600}
.post span{margin-top:auto;font-size:14px;color:var(--d1-ink-dim)}

/* ---- cta ---- */
.cta{padding:70px 60px;text-align:center;background:linear-gradient(140deg,rgba(76,125,255,.16),rgba(138,92,246,.16)),var(--d1-glass)}
.cta p{color:var(--d1-ink-dim);max-width:520px;margin:0 auto 30px}

/* ---- responsive главной: держать В КОНЦЕ этого файла —
   он инлайнится в body последним и должен перебивать десктопные сетки ---- */
.project,.post,.principle,.exp-card{min-width:0}
.project h3,.post h3,.principle h3{overflow-wrap:break-word}
@media(max-width:960px){
  .hero__panel{grid-template-columns:1fr;padding:40px 32px}
  .hero__orbs{display:none}
  .principles{grid-template-columns:1fr 1fr}
  .principle:nth-child(4){grid-column:auto}
  .blog__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .projects__grid{grid-template-columns:1fr;gap:18px}
  .principles,.blog__grid{grid-template-columns:1fr;gap:16px}
  .section{padding:56px 0}
  .hero{padding:56px 0 36px}
  .hero__panel{padding:28px 20px}
  .hero h1{font-size:clamp(27px,8vw,38px)}
  .hero p{font-size:16px}
  .project{padding:26px;min-height:260px}
  .principle{padding:26px}
  .cta{padding:46px 20px}
  .client-chip{padding:10px 16px;font-size:12px}
  .projects__more{margin-top:28px}
}

/* ================== HOME V2 (5 блоков ТЗ) ================== */
/* --- hero 2 колонки --- */
.hero2{padding:56px 0 70px}
.hero2__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:stretch;min-height:calc(100vh - 190px)}
.hero2__content{display:flex;flex-direction:column;justify-content:center}
.hero2 h1{font-size:clamp(30px,4vw,54px);margin-bottom:14px}
.hero2__slogan{font-size:clamp(17px,1.6vw,21px);margin-bottom:26px;opacity:.85}
.stats{display:flex;gap:14px;margin-bottom:22px}
.stat{flex:1;padding:18px 20px;min-width:0}
.stat b{display:block;font-size:clamp(26px,3vw,42px);line-height:1.05;font-weight:800}
.stat span{font-size:13px;opacity:.75}
.hero2__note{font-size:14px;opacity:.65;margin-bottom:26px;max-width:560px}
.hero2__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn-think-wrap{position:relative;display:inline-flex;align-items:center;gap:8px}
.btn-think small{display:block;font-size:10.5px;opacity:.65;font-weight:400;margin-top:2px}
.hint-i{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;font-size:12px;font-style:italic;font-weight:700;cursor:help;opacity:.7}
.hint-i:hover,.hint-i:focus{opacity:1}
.hint-pop{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);width:240px;padding:12px 14px;font-size:13px;font-style:normal;font-weight:400;text-align:center;border-radius:12px;opacity:0;visibility:hidden;transition:.2s;pointer-events:none;z-index:20}
.hint-i:hover .hint-pop,.hint-i:focus .hint-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* --- анимация справа --- */
.hero2__anim{position:relative;min-height:440px;border-radius:inherit;overflow:hidden}
#morph-stage{position:absolute;inset:0}
#morph-stage canvas{display:block;width:100%!important;height:100%!important}
.hero2__anim-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(22px,3vw,38px);letter-spacing:.06em;opacity:.25;pointer-events:none;z-index:-1}
/* --- направления 4x2 --- */
.dirs{display:grid;grid-template-columns:1fr 1fr;margin-top:10px}
.dir{padding:26px 30px;font-size:clamp(19px,2.4vw,30px);font-weight:800;line-height:1.2;border-bottom:1px solid;border-color:inherit}
.dir:nth-child(odd){border-right:1px solid;border-color:inherit}
.dir:nth-last-child(-n+2){border-bottom:none}
.flipword b{display:inline-block;min-width:.72em;text-align:center;transition:transform .18s ease, opacity .18s ease}
.flipword b.is-flip{transform:translateY(-.5em) rotateX(80deg);opacity:0}
/* --- квадраты услуг 4xN --- */
.squares{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sq{aspect-ratio:1/1;padding:18px;display:flex;flex-direction:column;justify-content:space-between;min-width:0;text-decoration:none;color:inherit;transition:.2s}
.sq span{font-size:12px;opacity:.5}
.sq b{font-weight:700;font-size:clamp(13px,1.15vw,16px);line-height:1.35}
.sq--dash{background:transparent!important;border:2px dashed currentColor!important;opacity:.55;align-items:flex-start;justify-content:flex-end;cursor:pointer;box-shadow:none!important}
.sq--dash:hover{opacity:.9}
/* --- табы --- */
.ptabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 8px}
.ptab{padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;background:transparent;border:1px solid;border-color:inherit;color:inherit;transition:.2s}
.pane-stub{padding:34px 0;opacity:.7}
.pane-stub a{text-decoration:underline}
/* --- строка проекта 60/40 --- */
.prow{display:grid;grid-template-columns:6fr 4fr;gap:36px;align-items:center;min-height:30vh;padding:34px 0;border-bottom:1px solid;border-color:inherit}
.prow:last-child{border-bottom:none}
.prow__info h3{font-size:clamp(22px,2.6vw,34px);margin-bottom:6px}
.prow__domain{display:inline-block;font-size:14px;opacity:.65;margin-bottom:12px;text-decoration:underline}
.prow__info p{font-size:15.5px;opacity:.85;max-width:520px}
/* --- макбук + айфон --- */
.devices{display:flex;align-items:flex-end;justify-content:center;gap:4%}
.mac{width:72%;min-width:0}
.mac__screen{border:6px solid #14161f;border-radius:12px 12px 4px 4px;overflow:hidden;background:#0b0d14;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.mac__screen img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.mac__base{height:11px;margin:0 -5%;background:linear-gradient(#2a2d3a,#16181f);border-radius:0 0 14px 14px}
.phone{width:22%;min-width:0}
.phone__screen{border:5px solid #14161f;border-radius:22px;overflow:hidden;background:#0b0d14;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.phone__screen img{display:block;width:100%;aspect-ratio:9/19;object-fit:cover}
/* --- адаптив v2 (в конце файла — перебивает базу) --- */
@media(max-width:960px){
  .hero2__grid{grid-template-columns:1fr;min-height:0;gap:26px}
  .hero2__anim{order:-1;min-height:44vh}
  .squares{grid-template-columns:1fr 1fr}
  .prow{grid-template-columns:1fr;min-height:0;gap:22px}
  .devices{max-width:520px;margin:0 auto}
}
@media(max-width:640px){
  .stats{flex-direction:row;gap:8px}
  .stat{padding:12px}
  .dir{padding:16px 14px;font-size:17px}
  .dirs{grid-template-columns:1fr 1fr}
  .squares{gap:10px}
  .sq{padding:12px}
  .ptabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .ptab{white-space:nowrap}
  .hero2__anim{min-height:38vh}
  .hint-pop{left:auto;right:-10px;transform:none}
  .hint-i:hover .hint-pop,.hint-i:focus .hint-pop{transform:none}
}
/* v2 акценты d1 */
.stat b{background:linear-gradient(90deg,var(--d1-cyan),var(--d1-blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.dirs{border:1px solid var(--d1-stroke);border-radius:var(--d1-r);overflow:hidden}
.dir{border-color:var(--d1-stroke)!important}
.dir:hover{background:var(--d1-glass)}
.flipword b{color:var(--d1-cyan)}
.sq{border-radius:22px}
.sq:hover{background:var(--d1-glass-strong)}
.ptab{border-radius:40px;border-color:var(--d1-stroke)!important}
.ptab.is-active{background:linear-gradient(100deg,var(--d1-blue),var(--d1-violet));border-color:transparent!important;color:#fff}
.prow{border-color:var(--d1-stroke)!important}
.hint-pop{background:rgba(20,25,60,.95);border:1px solid var(--d1-stroke);color:var(--d1-ink)}
.hero2__anim{background:radial-gradient(ellipse at 50% 60%,rgba(76,125,255,.10),transparent 70%)}

/* ---- DIRS V3: направления-баннеры 65/35 с картинками ---- */
.dirs{display:block;border:none}
.drow{display:grid;grid-template-columns:65fr 35fr;gap:16px;margin-bottom:16px}
.drow--rev{grid-template-columns:35fr 65fr}
.dir{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:26px 30px;min-height:36vh;border:none;font-size:inherit}
.dir__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.dir::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.58))}
.dir__label{position:relative;z-index:2;color:#fff;font-weight:700;line-height:1.08;font-size:clamp(24px,3.2vw,44px)}
.dir__label .flipword b{color:#fff}
@media(max-width:900px){
  .drow,.drow--rev{grid-template-columns:1fr;min-height:0}
  .dir{min-height:30vh;padding:20px 22px}
}
.dir{border-radius:var(--d1-r);border:1px solid var(--d1-stroke)}
.dir__label{font-family:var(--d1-display)}

/* фикс: длинные подписи направлений не распирают и не режутся */
.drow>.dir{min-width:0}
.dir__label{font-size:clamp(19px,2.5vw,36px);overflow-wrap:anywhere;max-width:100%}

/* фолбэк-надпись под анимацией — только если WebGL недоступен */
.hero2__anim-fallback{display:none}
#morph-stage._nogl ~ .hero2__anim-fallback{display:flex;z-index:0;opacity:.5}