/* VAG World Bold — add files to /fonts */
@font-face {
  font-family: 'VAGWorld';
  src: url('../fonts/VAGWorld-Bold.woff2') format('woff2'),
       url('../fonts/VAGWorld-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* === Liquid Glass + Typography === */
:root {
  --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-display: 'VAGWorld', 'Inter', sans-serif; /* for large headings */
  --bg: #1b0d2e;
  --bg-mid: #341656;
  --bg2: #4b1f63;
  --accent: #ff8fb3;
  --accent-2: #ffd5e2;
  --text: #ffffff;
  --muted: #f0e4ff;
  --white: #ffffff;
  --glass: rgba(255, 255, 255, 0.18);
  --glass-strong: rgba(255, 255, 255, 0.3);

  --stroke: rgba(255, 255, 255, 0.28);
  --shadow: 0 24px 44px rgba(20, 4, 40, .32), 0 52px 120px rgba(255, 163, 198, .35);
  --radius-xl: 28px;
  --radius-lg: 20px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-main); color: var(--text); font-size: 16px; line-height: 1.6;
  background:
    radial-gradient(1180px 760px at 10% 10%, rgba(255, 170, 197, .52), transparent 66%),
    radial-gradient(980px 720px at 90% 18%, rgba(162, 119, 255, .36), transparent 68%),
    radial-gradient(860px 620px at 55% 120%, rgba(255, 228, 242, .42), transparent 72%),
    linear-gradient(168deg, var(--bg) 0%, var(--bg2) 100%);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0}
h1{font-size:clamp(32px,4.5vw,56px)}
h2{font-size:clamp(26px,3vw,36px);margin-bottom:.6em}
h3{font-size:clamp(24px,2.6vw,34px)}
h4{font-size:20px}
p, li, a, span, label, input, textarea, button { font-family: var(--font-main); }
p{color:var(--muted);margin:0 0 .8em}

a { color: var(--accent-2); text-decoration: none; transition: color .2s; }
a:hover { color: var(--white); }

.wrapper { min-height: 100%; display: flex; flex-direction: column; }
.page { flex: 1 1 auto; position: relative; }
._container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header */
.header { position: sticky; top: 0; z-index: 50; background: var(--header-glass); border-bottom: 1.5px solid var(--header-glass-strong); backdrop-filter: blur(24px); box-shadow: 0 18px 34px rgba(18, 6, 40, .22); }
.header__body { display:flex; align-items:center; justify-content:space-between; min-height:72px }
.header__logo img{height:24px}
.menu__list{display:flex; gap:26px; align-items:center; padding:0; margin:0; list-style:none}
.menu__link{color:var(--muted); font-weight:500}
.menu__link:hover{color:var(--accent-2)}
.icon-menu{display:none}

/* Hero */
.first-screen{position:relative; padding:140px 0 80px; overflow:hidden; background:linear-gradient(180deg, var(--header-glass) 0%, var(--header-glass-soft) 28%, rgba(255,255,255,.02) 72%, transparent 100%), linear-gradient(180deg, #f5a9ba 0%, #9162a2 100%)}
.first-screen__container{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
.first-screen__main{background: rgba(255,255,255,.26);
  border-radius:var(--radius-xl); padding:48px; box-shadow: 0 26px 60px rgba(20, 4, 40, .28);
  border:1px solid rgba(255,255,255,.34);
  position:relative; overflow:hidden; backdrop-filter: blur(34px); -webkit-backdrop-filter: blur(34px);}
.first-screen__title{margin:0 0 16px; font-size: clamp(42px, 6.5vw, 74px); line-height:1; letter-spacing:-.015em}
.first-screen__text{max-width:640px; font-family:var(--font-main); font-size:18px; font-weight:600; color:var(--white)}
.first-screen__line{display:block; width:120px; height:4px; border-radius:999px; background:linear-gradient(90deg, rgba(255,255,255,.6), transparent); margin:18px 0 0}
.first-screen__buttons{display:flex; gap:16px; margin-top:26px}
.first-screen__benifits{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
.first-screen__item{background:rgba(255,255,255,.22); border:1.6px solid rgba(255,255,255,.34); border-radius:16px; padding:14px 16px; backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); color:var(--white)}
.first-screen__item .first-screen__caption{color:var(--white)}
.first-screen__item .first-screen__value{color:var(--white)}
.first-screen__caption{color:var(--white); font-weight:600; font-family:var(--font-main)}
.first-screen__value{color:var(--white); font-weight:700; font-family:var(--font-display)}
.first-screen__illustration{position:relative; display:flex; justify-content:center; padding:52px 0 64px}
.first-screen__glass{position:relative; padding:0; border-radius:36px}
.first-screen__glass::after{display:none}
.first-screen__gallery{position:relative; width:100%; max-width:400px; margin:0 auto; min-height:360px}
.first-screen__shot{position:absolute; border-radius:32px; box-shadow:0 24px 54px rgba(11,0,32,.32); display:block; height:auto}
.first-screen__shot--main{position:relative; display:block; width:68%; margin:0 auto; transform:rotate(-4deg); z-index:2; top:0; left:8%}
.first-screen__shot--secondary{width:52%; right:0; top:18%; transform:rotate(8deg); opacity:.9}
.first-screen__projects{position:absolute; right:18px; bottom:-48px; background:rgba(255,255,255,.24); color:#1a1026; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:12px 18px; display:inline-flex; gap:10px; align-items:center; font-weight:600; box-shadow:0 20px 42px rgba(11,0,32,.32); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px)}
.first-screen__projects span:first-child{font-size:18px}
.first-screen__button{gap:12px; font-weight:700; font-size:18px; color:var(--white)}

/* Floating boxes */
.gift-float{position:absolute; pointer-events:none; filter: drop-shadow(0 40px 60px rgba(14,0,33,.45)); opacity:.95}
.gift1{width:220px; left:-40px; top:20px; animation:float 8s ease-in-out infinite}
.gift2{width:200px; right:-60px; top:120px; animation:float 10s ease-in-out infinite reverse}
.gift3{width:200px; left:4%; bottom:-30px; animation:float 12s ease-in-out infinite}
.gift4{width:180px; right:6%; bottom:-50px; animation:float 9s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0) rotate(.5deg)}50%{transform:translateY(-16px) rotate(-.5deg)}}

/* Features */
.features{padding:60px 0 80px; position:relative; z-index:1; background:linear-gradient(180deg, var(--header-glass-soft) 0%, transparent 48%), linear-gradient(180deg, #9162a2 0%, var(--bg2) 100%)}
.features__grid{display:grid; grid-template-columns:1fr; gap:32px}
.feature-card{background:transparent; border:none; box-shadow:none; overflow:visible}
.feature-card__row{display:grid; grid-template-columns:1fr; gap:32px; align-items:center}
.feature-card__imgwrap{position:relative; width:100%; display:flex; justify-content:center; align-items:center}
.feature-card__glass{background:rgba(255,255,255,.18); border:1.4px solid rgba(255,255,255,.32); border-radius:36px; padding:40px 48px; backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px); box-shadow:0 24px 46px rgba(18,4,42,.28); position:relative; overflow:hidden}
.feature-card__glass::after{content:""; position:absolute; inset:16px; border-radius:28px; border:1px solid rgba(255,255,255,.22); opacity:.45; pointer-events:none}
.feature-card__img{width:100%; max-width:180px; border-radius:28px; box-shadow:0 18px 36px rgba(12,0,32,.34); position:relative; z-index:1}
.feature-card__text{padding:0; display:flex; flex-direction:column; gap:18px}
.feature-card__box{position:absolute; width:120px; pointer-events:none; filter:drop-shadow(0 24px 42px rgba(12,0,32,.34)); opacity:.95}
.feature-card__box--1{top:-30px; right:-20px}
.feature-card__box--2{bottom:-26px; left:10px; transform:rotate(-6deg)}
.feature-card__box--3{top:-22px; left:45%; transform:translateX(-50%) rotate(5deg)}
.feature-card__box--4{bottom:-28px; right:18px; transform:rotate(8deg)}
.feature-card__title{font-family:var(--font-display); font-size:clamp(28px,3.6vw,42px); line-height:1.08; margin:0; color:var(--white); font-weight:700}
.feature-card__desc{color:var(--white); font-family:var(--font-display); font-size:18px; font-weight:700; line-height:1.5; margin:0}
.feature-card--split .feature-card__row{grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); gap:52px}
.feature-card--split .feature-card__imgwrap{justify-content:flex-start}

.value-section{padding:90px 0 110px; position:relative; z-index:1; background:linear-gradient(180deg, rgba(145,98,162,0.08) 0%, rgba(75,31,99,0.6) 54%, rgba(27,13,46,0.92) 100%)}
.value-section__intro{max-width:720px; margin:0 auto 48px; text-align:center; display:grid; gap:16px}
.value-section__title{font-size:clamp(30px,3.4vw,48px)}
.value-section__subtitle{margin:0 auto; color:var(--white); font-size:18px; font-weight:600}
.value-section__grid{display:grid; gap:32px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
.value-card{position:relative; overflow:hidden; padding:40px 44px; border-radius:36px; background:rgba(255,255,255,.18); border:1.4px solid rgba(255,255,255,.32); box-shadow:0 24px 46px rgba(18,4,42,.28); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px); display:grid; gap:18px}
.value-card::after{content:""; position:absolute; inset:16px; border-radius:28px; border:1px solid rgba(255,255,255,.22); opacity:.42; pointer-events:none}
.value-card > *{position:relative; z-index:1}
.value-card__title{font-size:clamp(26px,3vw,38px); color:var(--white)}
.value-card__desc{color:var(--white); font-weight:600; margin-bottom:4px}
.value-card__list{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.value-card__item{display:flex; align-items:flex-start; gap:14px; font-size:16px; color:var(--muted); font-weight:500}
.value-card__icon{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32); box-shadow:0 12px 22px rgba(12,0,32,.26); font-size:18px}

.invest-callout{position:relative; padding:88px 0}
.invest-callout::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 0%, rgba(110,60,255,.28) 0%, rgba(29,5,73,0) 65%); pointer-events:none; z-index:0}
.invest-callout__container{position:relative; z-index:1; display:grid; gap:36px; align-items:center}
@media (min-width:992px){.invest-callout__container{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.invest-callout__content{background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.32); border-radius:36px; padding:clamp(28px,4vw,48px); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px); box-shadow:0 32px 56px rgba(12,6,36,.28)}
.invest-callout__eyebrow{font-size:15px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.invest-callout__title{font-size:clamp(28px,4vw,44px); margin-bottom:18px}
.invest-callout__text{font-size:18px; color:var(--white); margin-bottom:28px}
.invest-callout__button{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 28px; border-radius:999px; background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); color:var(--white); font-weight:600; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease}
.invest-callout__button:hover,.invest-callout__button:focus-visible{transform:translateY(-2px); box-shadow:0 16px 32px rgba(33,12,76,.32)}
.invest-callout__stats{display:grid; gap:16px}
.invest-callout__stat{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); border-radius:28px; padding:24px 28px; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px)}
.invest-callout__stat-value{display:block; font-family:var(--font-display); font-size:clamp(30px,4vw,46px); color:var(--white)}
.invest-callout__stat-label{color:var(--muted); font-weight:500; margin-top:6px; display:block}
@media (max-width:575px){.invest-callout{padding:64px 0}.invest-callout__stats{grid-template-columns:1fr}}

/* Buttons */
.btn,.first-screen__button{background:var(--accent); color:var(--white); border-radius:16px; padding:14px 22px; display:inline-flex; gap:10px; align-items:center; border:none; position:relative; box-shadow:0 10px 26px rgba(229,141,168,.28); transition:transform .15s ease, box-shadow .2s ease}
.btn:hover,.first-screen__button:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(229,141,168,.4)}

/* Footer */
.footer{background:linear-gradient(180deg, rgba(52,22,86,0) 0%, rgba(36,18,66,.55) 45%, rgba(27,13,46,.9) 100%); border-top:1px solid rgba(255,255,255,.2); backdrop-filter:blur(18px); position:relative; overflow:hidden}
.footer::before{content:""; position:absolute; left:0; right:0; top:-220px; height:360px; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.06) 32%, rgba(255,255,255,0) 76%); pointer-events:none;}
.footer__container{padding:40px 20px 0}
.footer__glass{background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.24); border-radius:28px; padding:32px; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 24px 46px rgba(18,4,42,.26); position:relative; overflow:hidden}
.footer__glass::after{content:""; position:absolute; inset:16px; border-radius:20px; border:1px solid rgba(255,255,255,.16); opacity:.5; pointer-events:none}
.footer__glass > *{position:relative; z-index:1}
.footer__top{display:flex; align-items:flex-start; justify-content:space-between; gap:32px; flex-wrap:wrap}
.footer__main{display:flex; align-items:center; gap:16px}
.footer__logo img{height:24px}
.footer__years{color:var(--muted); font-weight:500}
.footer__scroll{display:inline-flex; align-items:center; gap:10px; color:var(--muted)}
.footer__items{display:flex; list-style:none; padding:24px 0 0; margin:24px 0 0; border-top:1px solid var(--stroke); gap:24px; flex-wrap:wrap}
.footer__item{display:flex; align-items:center; gap:12px; color:var(--muted)}
.footer__circle{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.16); font-size:20px}
.footer__stores{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.store-link{display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border-radius:16px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:var(--white); transition:transform .15s ease, box-shadow .2s ease}
.store-link:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.35)}
.store-link__icon{width:28px; height:28px; flex:0 0 28px}
.store-link__label{display:flex; flex-direction:column; line-height:1.1}
.store-link__label span:first-child{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.store-link__label span:last-child{font-size:16px; font-weight:600}

/* Popup */
.popup__content{background:var(--glass); border:1px solid var(--stroke); backdrop-filter:blur(12px); border-radius:var(--radius-lg)}
.popup__close{background:transparent; border:none; color:var(--white); font-size:24px; cursor:pointer; padding:6px 10px; border-radius:12px; transition:background .2s ease}
.popup__close:hover{background:rgba(255,255,255,.1)}

/* Decorations */
.page::before,.page::after{content:""; position:fixed; z-index:-1; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none; transform:translateZ(0)}
.page::before{width:380px; height:380px; left:-80px; top:120px; background:radial-gradient(circle at 30% 30%, #E58DA8, transparent 60%)}
.page::after{width:480px; height:480px; right:-120px; bottom:-40px; background:radial-gradient(circle at 70% 70%, #7b4aff, transparent 60%)}

/* Forms global */
input, textarea{font-size:15px; color:var(--text); border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05); border-radius:12px; outline:none}
input:focus,textarea:focus{border-color:var(--accent)}

/* Investor feedback form */
.investor-card--feedback{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.36)}
.feedback-form{display:grid; gap:18px; margin-top:24px}
.feedback-form__group{display:flex; flex-direction:column; gap:8px}
.feedback-form__label{font-weight:600; color:var(--white); letter-spacing:.02em}
.feedback-form__input,.feedback-form__textarea{padding:14px 16px; border-radius:14px; transition:border-color .2s ease, box-shadow .2s ease; background:rgba(255,255,255,.08)}
.feedback-form__textarea{min-height:140px; resize:vertical}
.feedback-form__input[aria-invalid="true"],.feedback-form__textarea[aria-invalid="true"]{border-color:#ff9fb9; box-shadow:0 0 0 1px rgba(255,159,185,.28)}
.feedback-form__error{min-height:16px; font-size:13px; color:#ffd5e2; opacity:0; transform:translateY(-4px); transition:opacity .2s ease, transform .2s ease}
.feedback-form__error--visible{opacity:1; transform:translateY(0)}
.feedback-form__actions{display:flex; flex-direction:column; gap:12px}
.feedback-form__submit{align-self:flex-start; min-width:160px; font-weight:600}
.feedback-form__submit[disabled]{opacity:.6; cursor:progress}
.feedback-form__status{min-height:18px; font-size:14px; font-weight:600; letter-spacing:.01em; color:rgba(255,255,255,.8)}
.feedback-form__status--success{color:#9df6db}
.feedback-form__status--error{color:#ffd5e2}

@media (max-width: 560px){
  .feedback-form__submit{width:100%; justify-content:center}
}

/* Responsive */
@media (max-width: 992px){
  .first-screen__container{grid-template-columns:1fr}
  .first-screen__projects{position:static; margin-top:32px}
  .first-screen__illustration{padding:40px 0 48px}
  .first-screen__gallery{max-width:320px; min-height:300px}
  .first-screen__shot--secondary{right:auto; left:58%; top:16%}
  .feature-card__row{grid-template-columns:1fr; gap:24px}
  .feature-card--split .feature-card__imgwrap{justify-content:center}
  .feature-card__glass{padding:26px}
  .feature-card__box{display:none}
  .value-section{padding:72px 0 88px}
  .value-card{padding:32px}
  .footer__top{gap:16px; justify-content:space-between}
}
@media (max-width: 640px){
  .first-screen{padding-top:96px}
  .first-screen__main{padding:32px}
  .first-screen__illustration{padding:32px 0 40px}
  .first-screen__gallery{min-height:260px}
  .first-screen__benifits{grid-template-columns:1fr}
  .footer__container{padding:32px 20px 0}
  .footer__glass{padding:20px}
  .footer__top{flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:24px}
  .footer__main{gap:12px}
  .footer__logo img{height:24px}
  .footer__years{font-size:14px}
  .footer__items{flex-direction:column; align-items:flex-start}
  .footer__stores{margin-top:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; width:100%}
  .store-link{width:100%; justify-content:center; padding:10px 12px; gap:10px; min-height:64px}
  .store-link:last-child{grid-column:1 / -1; justify-self:center; max-width:100%}
  .store-link__icon{width:24px; height:24px; flex:0 0 24px}
  .store-link__label{align-items:center; text-align:center}
  .store-link__label span:last-child{font-size:15px}
  .value-section{padding:60px 0 72px}
  .value-section__intro{margin-bottom:32px}
  .value-card{padding:26px}
  .value-card__icon{width:32px; height:32px; font-size:16px}
}