/*
Theme Name: VAST VISION
Theme URI: https://vastvision.kz
Author: VAST VISION
Description: Фирменная тема digital-агентства VAST VISION — агентство полного цикла. Тёмный фиолетовый дизайн, реальное портфолио, анимации.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: vastvision
*/

:root{
  --ink:#0b0514; --ink-2:#140a24; --card:#1b0f33; --card-2:#241344;
  --violet:#6c2bd9; --violet-hot:#8b5cf6; --glow:#a78bfa;
  --amber:#ffb020; --lime:#7CF29C; --paper:#f3effa; --muted:#b9aed4;
  --line:rgba(167,139,250,.18); --r:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:'Manrope',system-ui,sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden}
h1,h2,h3,.wordmark{font-family:'Unbounded',sans-serif}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:96px 0}
.eyebrow{display:inline-block;color:var(--amber);font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px}
.h2{font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.15;margin-bottom:16px}
.lead{color:var(--muted);max-width:640px;margin-bottom:48px}

/* header */
.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(11,5,20,.72);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo-img{height:46px;width:auto}
.nav{display:flex;gap:28px;font-size:14px;color:var(--muted)}
.nav a:hover{color:var(--paper)}
.top-right{display:flex;align-items:center;gap:18px}
.phone{font-weight:700;font-size:15px}
.btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--violet),var(--violet-hot));color:#fff;font-weight:700;font-size:15px;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;box-shadow:0 8px 30px rgba(108,43,217,.45);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(139,92,246,.55)}
.btn.ghost{background:transparent;border:1px solid var(--line);box-shadow:none;color:var(--paper)}
.btn.ghost:hover{border-color:var(--glow)}

/* hero */
.hero{position:relative;padding:90px 0 110px;overflow:hidden}
.aurora{position:absolute;inset:-40% -20% auto;height:120%;background:radial-gradient(42% 55% at 18% 38%,rgba(139,92,246,.55),transparent 70%),radial-gradient(38% 50% at 78% 22%,rgba(255,176,32,.22),transparent 70%),radial-gradient(55% 60% at 55% 70%,rgba(108,43,217,.5),transparent 72%);filter:blur(60px);animation:drift 16s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(3%,4%,0) scale(1.08)}}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(36px,5.4vw,64px);font-weight:800;line-height:1.05;margin-bottom:24px}
.hero h1 .grad{background:linear-gradient(92deg,var(--glow),#fff 45%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:19px;color:var(--muted);max-width:560px;margin-bottom:40px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px}
.hero-stats{display:flex;gap:44px;flex-wrap:wrap}
.stat b{font-family:'Unbounded',sans-serif;font-size:26px;display:block}
.stat span{color:var(--muted);font-size:14px}
.hero-art{position:relative}
.hero-art img{width:100%;filter:drop-shadow(0 30px 60px rgba(108,43,217,.5));animation:float 7s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(-8px)}to{transform:translateY(10px)}}

/* grids & cards */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.card{background:linear-gradient(160deg,var(--card),var(--ink-2));border:1px solid var(--line);border-radius:var(--r);padding:32px;position:relative;overflow:hidden;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-6px);border-color:rgba(167,139,250,.45)}
.card .ico{width:52px;height:52px;border-radius:14px;margin-bottom:22px;display:grid;place-items:center;background:rgba(139,92,246,.15);color:var(--glow)}
.card h3{font-size:18px;font-weight:600;margin-bottom:10px}
.card p{color:var(--muted);font-size:15px}

/* portfolio */
.shot{border-radius:var(--r);border:1px solid var(--line);overflow:hidden;position:relative;transition:transform .25s;background:var(--card)}
.shot:hover{transform:scale(1.02)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot.sq{aspect-ratio:1/1}
.shot.wide{aspect-ratio:16/9}
.shot.web{aspect-ratio:2/1}
.shot.phone{aspect-ratio:9/19.2}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:linear-gradient(transparent,rgba(11,5,20,.92));font-size:13px;color:var(--muted)}
.shot figcaption b{color:var(--paper);display:block;font-size:14px}

/* tools */
.tools{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tool-card{padding:0;overflow:hidden}
.tool-card img{width:100%;aspect-ratio:2/1;object-fit:cover;border-bottom:1px solid var(--line)}
.tool-card .tc{padding:22px 24px}

/* video */
.tv{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.player{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:#000;cursor:pointer}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .poster{position:absolute;inset:0}
.player .poster img{width:100%;height:100%;object-fit:cover;opacity:.85}
.player .play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.play-btn{width:88px;height:88px;border-radius:50%;background:rgba(139,92,246,.92);display:grid;place-items:center;box-shadow:0 0 0 14px rgba(139,92,246,.25);transition:transform .2s}
.player:hover .play-btn{transform:scale(1.08)}
.tv-thumbs{margin-top:20px}
.tv-thumbs .shot{aspect-ratio:16/9}

/* form */
.cta-box{background:linear-gradient(135deg,#2a1454,#3b1078 55%,#4c1d95);border:1px solid rgba(167,139,250,.35);border-radius:32px;padding:64px;position:relative;overflow:hidden}
.cta-box::after{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;background:radial-gradient(circle,rgba(255,176,32,.35),transparent 70%);filter:blur(20px)}
.cta-box h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:12px}
.cta-box p{color:#d9cff0;margin-bottom:32px;max-width:480px}
.form{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:2}
.form input{flex:1;min-width:220px;padding:16px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(11,5,20,.4);color:#fff;font-size:15px;font-family:inherit;outline:none}
.form input::placeholder{color:rgba(255,255,255,.5)}
.form input:focus{border-color:var(--amber)}
.form-note{font-size:13px;color:rgba(255,255,255,.45);margin-top:16px}

/* clients */
.client-logos{display:flex;gap:40px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.client-logos img{height:44px;width:auto;opacity:.85;transition:opacity .2s}
.client-logos img:hover{opacity:1}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
.track{display:flex;gap:64px;width:max-content;animation:mq 30s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.client{font-family:'Unbounded',sans-serif;font-weight:600;font-size:19px;color:rgba(243,239,250,.35);white-space:nowrap;letter-spacing:.05em;transition:color .2s}
.client:hover{color:var(--paper)}

/* footer */
footer{padding:80px 0 40px;border-top:1px solid var(--line);position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:70px}
.foot-grid h4{font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--amber);margin-bottom:18px;font-family:'Unbounded',sans-serif}
.foot-grid a,.foot-grid p{display:block;color:var(--muted);font-size:15px;margin-bottom:10px}
.foot-grid a:hover{color:var(--paper)}
.foot-logo{height:52px;width:auto;margin-bottom:18px}
.wordmark{font-size:clamp(52px,11vw,150px);font-weight:800;line-height:.95;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(167,139,250,.35);user-select:none;letter-spacing:.02em}
.copy{display:flex;justify-content:space-between;color:rgba(185,174,212,.5);font-size:13px;margin-top:30px;flex-wrap:wrap;gap:10px}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.rv.on{opacity:1;transform:none}

@media (max-width:960px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .g5{grid-template-columns:repeat(3,1fr)}
  .nav{display:none}
  .foot-grid{grid-template-columns:1fr}
  .cta-box{padding:40px 28px}
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{max-width:420px;margin:0 auto}
}
@media (max-width:620px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .g5{grid-template-columns:repeat(2,1fr)}
  section{padding:64px 0}
  .phone{display:none}
}
@media (prefers-reduced-motion:reduce){
  .aurora,.track,.hero-art img{animation:none}
  .rv{opacity:1;transform:none;transition:none}
}