



/* ============ TOKENS ============ */
:root{
  color-scheme:light;
  --bg:#fbf8f3; --bg-2:#f4eee5;
  --text:#2a2622; --text-strong:#16130f; --muted:#6d6459;
  --border:rgba(42,38,34,.10); --border-2:rgba(42,38,34,.18);
  --card-bg:linear-gradient(160deg,rgba(255,255,255,.90),rgba(255,255,255,.60));
  --header-bg:rgba(251,248,243,.80);
  --mobile-bg:rgba(251,248,243,.97);
  --dropdown-bg:rgba(255,255,255,.96);
  --totop-bg:rgba(255,255,255,.92);
  --accent-rgb:201,106,53; --accent2-rgb:79,143,109; --accent3-rgb:74,128,176;
  --accent:#c96a35; --accent-2:#4f8f6d; --accent-3:#4a80b0;
  --grad:linear-gradient(100deg,#c96a35,#4f8f6d 55%,#4a80b0);
  --grad-text:linear-gradient(100deg,#c96a35,#4f8f6d 42%,#4a80b0,#c96a35);
  --grad-conic:conic-gradient(from 0deg,#c96a35,#4f8f6d,#4a80b0,#c96a35);
  --btn-grad:linear-gradient(100deg,#b85824,#357050 55%,#35618c);
  --btn-text:#ffffff;
  --btn-shadow:0 14px 34px -14px rgba(184,88,36,.80);
  --btn-shadow-hover:0 22px 54px -14px rgba(53,97,140,.85);
  --cta-bg:linear-gradient(150deg,rgba(201,106,53,.12),rgba(79,143,109,.09) 45%,rgba(74,128,176,.12));
  --blob-opacity:.40; --glow-blend:normal;
  --glow-bg:radial-gradient(circle,rgba(201,106,53,.10),rgba(79,143,109,.07) 45%,transparent 70%);
  --noise-opacity:.020; --grid-color:rgba(42,38,34,.045);
  --cert-filter:grayscale(.42) contrast(1.03);
  --photo-fade:rgba(251,248,243,.62);
  --shadow-card:0 30px 64px -30px rgba(95,72,48,.42);
  --shadow-card-hover:0 34px 76px -26px rgba(95,72,48,.52);
  --radius:24px; --ease:cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1319; --bg-2:#141a22;
  --text:#e7ecf3; --text-strong:#ffffff; --muted:#a5b0c0;
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.20);
  --card-bg:linear-gradient(160deg,rgba(30,38,50,.86),rgba(18,24,32,.74));
  --header-bg:rgba(15,19,25,.76);
  --mobile-bg:rgba(15,19,25,.97);
  --dropdown-bg:rgba(20,26,35,.95);
  --totop-bg:rgba(20,26,35,.86);
  --accent-rgb:240,149,95; --accent2-rgb:121,195,155; --accent3-rgb:127,178,227;
  --accent:#f0955f; --accent-2:#79c39b; --accent-3:#7fb2e3;
  --grad:linear-gradient(100deg,#f0955f,#79c39b 55%,#7fb2e3);
  --grad-text:linear-gradient(100deg,#f0955f,#79c39b 42%,#7fb2e3,#f0955f);
  --grad-conic:conic-gradient(from 0deg,#f0955f,#79c39b,#7fb2e3,#f0955f);
  --btn-grad:linear-gradient(100deg,#f0955f,#79c39b 55%,#7fb2e3);
  --btn-text:#0d1219;
  --btn-shadow:0 14px 38px -14px rgba(240,149,95,.70);
  --btn-shadow-hover:0 22px 60px -14px rgba(127,178,227,.80);
  --cta-bg:linear-gradient(150deg,rgba(240,149,95,.13),rgba(121,195,155,.09) 45%,rgba(127,178,227,.13));
  --blob-opacity:.20; --glow-blend:screen;
  --glow-bg:radial-gradient(circle,rgba(240,149,95,.10),rgba(127,178,227,.06) 45%,transparent 70%);
  --noise-opacity:.030; --grid-color:rgba(255,255,255,.030);
  --cert-filter:grayscale(.45) brightness(.84);
  --photo-fade:rgba(15,19,25,.78);
  --shadow-card:0 30px 64px -30px rgba(0,0,0,.90);
  --shadow-card-hover:0 34px 80px -26px rgba(0,0,0,.95);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    color-scheme:dark;
    --bg:#0f1319; --bg-2:#141a22;
    --text:#e7ecf3; --text-strong:#fff; --muted:#a5b0c0;
    --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.20);
    --card-bg:linear-gradient(160deg,rgba(30,38,50,.86),rgba(18,24,32,.74));
    --header-bg:rgba(15,19,25,.76); --mobile-bg:rgba(15,19,25,.97);
    --dropdown-bg:rgba(20,26,35,.95); --totop-bg:rgba(20,26,35,.86);
    --photo-fade:rgba(15,19,25,.78);
  }
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background-color .5s ease,color .5s ease;
  margin:0;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--accent);color:var(--btn-text)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--grad);border-radius:10px;border:2px solid var(--bg-2)}

/* ============ LAYOUT ============ */
.wrap{width:min(1200px,92vw);margin:0 auto;position:relative;z-index:3}
main{position:relative;z-index:3}
section{position:relative;padding:clamp(70px,10vw,130px) 0}

/* ============ BUTTONS ============ */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:100px;font-weight:700;font-size:15.5px;
  overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease),box-shadow .4s ease,background-color .4s ease,border-color .4s ease;
  will-change:transform;
}
.btn-primary{
  color:var(--btn-text);background:var(--btn-grad);background-size:200% 100%;
  box-shadow:var(--btn-shadow),0 0 0 1px rgba(255,255,255,.10) inset;
  animation:gradMove 6s linear infinite;
}
.btn-primary:hover{box-shadow:var(--btn-shadow-hover),0 0 0 1px rgba(255,255,255,.18) inset}
.btn-ghost{color:var(--text);border:1px solid var(--border-2);background:var(--card-bg);backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:rgba(var(--accent-rgb),.65);background:rgba(var(--accent-rgb),.08)}
.btn svg{width:17px;height:17px;fill:currentColor;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
@keyframes gradMove{to{background-position:300% 0}}

/* ============ SECTION HEADINGS ============ */
.sec-head{text-align:center;margin-bottom:clamp(40px,6vw,72px)}
.sec-tag{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.sec-title{font-family:'Unbounded',sans-serif;font-weight:500;font-size:clamp(28px,4.4vw,52px);line-height:1.1;letter-spacing:-.025em;color:var(--text-strong);margin:0}
.sec-sub{color:var(--muted);margin-top:18px;font-size:16px;max-width:600px;margin-left:auto;margin-right:auto}
.gradient-text{background:var(--grad-text);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradMove 7s linear infinite}

/* ============ HEADER ============ */
header#header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:background-color .45s ease,backdrop-filter .45s ease,border-color .45s ease,padding .45s ease;
  border-bottom:1px solid transparent;padding:14px 0;
}
header#header.scrolled{
  background:var(--header-bg);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom-color:var(--border);padding:8px 0;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:'Unbounded',sans-serif;font-weight:500;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--text-strong)}
.logo-dot{width:10px;height:10px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px rgba(var(--accent-rgb),.85);animation:pulse 2.4s ease-in-out infinite;flex-shrink:0}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}

.menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.menu>li{position:relative}
.menu>li>a{display:flex;align-items:center;gap:6px;padding:10px 15px;border-radius:12px;font-size:15px;font-weight:500;color:var(--text);opacity:.82;transition:color .3s ease,background-color .3s ease,opacity .3s ease}
.menu>li>a:hover{opacity:1;background:rgba(var(--accent-rgb),.10)}
.menu>li>a .chev{width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s ease;opacity:.55}
.menu>li:hover>a .chev{transform:rotate(225deg) translateY(-1px)}
.dropdown{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translate(-50%,10px) scale(.96);
  min-width:280px;padding:10px;
  background:var(--dropdown-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border-2);border-radius:18px;box-shadow:var(--shadow-card);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  list-style:none;margin:0;
}
.menu>li:hover .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1)}
.dropdown li a{display:block;padding:11px 14px;border-radius:11px;font-size:14.5px;color:var(--muted);transition:background-color .25s ease,color .25s ease,transform .25s ease}
.dropdown li a:hover{background:rgba(var(--accent-rgb),.10);color:var(--text-strong);transform:translateX(4px)}

.nav-actions{display:flex;align-items:center;gap:12px}
.socials{display:flex;align-items:center;gap:8px}
.socials a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--border);background:var(--card-bg);transition:transform .35s var(--ease),border-color .35s ease,box-shadow .35s ease}
.socials a svg{width:18px;height:18px;fill:var(--muted);transition:fill .3s ease}
.socials a:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.60);box-shadow:0 12px 28px -10px rgba(var(--accent-rgb),.80)}
.socials a:hover svg{fill:var(--accent)}

/* THEME TOGGLE */
.theme-toggle{position:relative;width:66px;height:34px;border-radius:100px;border:1px solid var(--border-2);background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex-shrink:0;transition:border-color .35s ease,box-shadow .35s ease}
.theme-toggle:hover{border-color:rgba(var(--accent-rgb),.65);box-shadow:0 10px 24px -12px rgba(var(--accent-rgb),.9)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tt-thumb{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--grad);background-size:180% 100%;display:grid;place-items:center;box-shadow:0 4px 14px -3px rgba(var(--accent-rgb),.95);transition:transform .55s var(--ease)}
html[data-theme="dark"] .tt-thumb{transform:translateX(32px)}
.tt-thumb svg{position:absolute;width:15px;height:15px;transition:opacity .35s ease,transform .55s var(--ease)}
.tt-sun{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:1;transform:rotate(0) scale(1)}
html[data-theme="dark"] .tt-sun{opacity:0;transform:rotate(90deg) scale(.35)}
.tt-moon{fill:#0d1219;opacity:0;transform:rotate(-90deg) scale(.35)}
html[data-theme="dark"] .tt-moon{opacity:1;transform:rotate(0) scale(1)}

.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--card-bg);position:relative}
.burger span{position:absolute;left:12px;width:20px;height:2px;background:var(--text);border-radius:2px;transition:.35s var(--ease)}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* MOBILE MENU */
#mobile-menu{
  position:fixed;inset:0;z-index:890;background:var(--mobile-bg);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:100px 8vw 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
#mobile-menu.open{opacity:1;visibility:visible;transform:none}
#mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:6px;padding:0;margin:0}
#mobile-menu a{display:block;padding:16px 0;font-size:22px;font-family:'Unbounded',sans-serif;font-weight:400;border-bottom:1px solid var(--border);color:var(--text);transition:color .3s ease,padding-left .3s ease}
#mobile-menu a:hover{color:var(--accent);padding-left:10px}
.mob-socials{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}

/* ============ FOOTER ============ */
footer{position:relative;z-index:3;padding:56px 0 44px;border-top:1px solid var(--border);margin-top:40px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.foot p{color:var(--muted);font-size:14px;opacity:.85;margin:0}
.foot-nav{display:flex;gap:24px;flex-wrap:wrap}
.foot-nav a{color:var(--muted);font-size:14.5px;transition:color .3s}
.foot-nav a:hover{color:var(--accent)}

/* ============ BACK TO TOP ============ */
#toTop{position:fixed;right:24px;bottom:24px;z-index:800;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--totop-bg);backdrop-filter:blur(16px);border:1px solid var(--border-2);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,border-color .3s}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover{border-color:rgba(var(--accent-rgb),.75);transform:translateY(-4px)}
#toTop svg{width:18px;height:18px;fill:var(--text)}

/* ============ UTILS (общие для всех страниц) ============ */
[data-reveal]{opacity:0;transform:translateY(46px);transition:opacity .95s var(--ease),transform .95s var(--ease);will-change:opacity,transform}
[data-reveal].visible{opacity:1;transform:none}
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;background:var(--grad);box-shadow:0 0 18px rgba(var(--accent-rgb),.55);transition:width .1s linear}
#cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:2;background:var(--glow-bg);mix-blend-mode:var(--glow-blend);transform:translate(-50%,-50%);transition:opacity .4s ease;opacity:0}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .menu{display:none}.socials{display:none}.burger{display:block}
}
@media (max-width:640px){
  .btn{padding:14px 24px;font-size:14.5px}
  .theme-toggle{width:58px;height:32px}
  .tt-thumb{width:24px;height:24px;top:3px;left:3px}
  html[data-theme="dark"] .tt-thumb{transform:translateX(26px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1;transform:none}
}
</style>