/* ---------- CSS RESET ---------- */
*,
*::before,
*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* ---------- ЗМІНЕНІ ЗМІННІ ---------- */
:root{
    --clr-bg: #100f1c; /* Глибокий космічний фіолетовий */
    --clr-bg-alt: #1d1b2f; /* Темний індиго */
    --clr-primary: #E535AB; /* Неоновий маджента */
    --clr-accent: #00E5FF; /* Електричний блакитний */
    --clr-text: #EAE8FF; /* Світла лаванда */
    --radius: 8px; /* Гостріші кути */
    --speed: 0.4s;
    --shadow: 0 8px 25px rgba(22, 224, 189, .1); /* Тінь з акцентним кольором */
    --font-title:'Montserrat', sans-serif;
    --font-body:'Open Sans', sans-serif;
}

/* ---------- BASE ---------- */
body{
    font-family:var(--font-body);
    background:var(--clr-bg);
    color:var(--clr-text);
    line-height:1.6;
}

/* Containers */
.container{ width:min(92%,1150px); margin-inline:auto; }

/* Buttons */
.btn--primary,
.btn--secondary,
.btn--outline{
    display:inline-block; padding:.9rem 2.4rem;
    border-radius:var(--radius); font-weight:600;
    transition: all var(--speed) cubic-bezier(0.25, 1, 0.5, 1);
    letter-spacing: 1px;
    border: 2px solid transparent;
}
.btn--primary{ background:var(--clr-primary); color:#fff; }
.btn--secondary{ background:transparent; color: var(--clr-accent); border-color: var(--clr-accent); }
.btn--outline{ border:2px solid var(--clr-primary); color:var(--clr-primary); }

.btn--primary:hover{ transform:scale(1.05); box-shadow: 0 0 20px var(--clr-primary); background: var(--clr-primary); }
.btn--secondary:hover{ background:var(--clr-accent); color:var(--clr-bg); box-shadow: 0 0 20px var(--clr-accent); }
.btn--outline:hover{ background:var(--clr-primary); color:#fff; }

/* Titles */
.section__title{ font:800 clamp(2.4rem,5vw,4rem)/1.1 var(--font-title); text-align:center; margin-bottom:1.2rem; color: #fff; }
.section__subtitle{ text-align:center; max-width:60ch; margin:0 auto 4rem; font-size: 1.15rem; opacity: .8; }

/* ---------- HEADER / NAV ---------- */
.header{ position:fixed; inset:0 0 auto; background:rgba(16, 15, 28, .7); backdrop-filter:blur(12px); z-index:1000; border-bottom: 1px solid rgba(255,255,255, .1); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:75px; }
.logo{ font:800 1.9rem var(--font-title); letter-spacing:-1px; }
.logo .accent{ color:var(--clr-accent); }

/* Burger */
.burger{ width:28px; display:none; flex-direction:column; gap:6px; cursor:pointer; }
.burger span{ height:3px; background:var(--clr-text); border-radius:3px; transition:all var(--speed); }
.burger-toggle:checked + .burger span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.burger-toggle:checked + .burger span:nth-child(2){ opacity:0; }
.burger-toggle:checked + .burger span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }
.burger-toggle{ display:none; }

/* Menu */
.menu{ display:flex; align-items:center; gap:3rem; font-weight:600; }
.menu a{ position:relative; color: var(--clr-text); transition: color var(--speed); }
.menu a:hover{ color: var(--clr-accent); }
.menu a::after{ content:''; position:absolute; left:50%; transform: translateX(-50%); bottom:-8px; width:0; height:3px; background:var(--clr-accent); transition:width var(--speed) ease; border-radius: 2px;}
.menu a:hover::after{ width:40%; }
.menu .btn--primary:hover { color: #fff; }
.menu .btn--primary::after { display: none; }


/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100vh; color:#fff; display:flex; align-items:center; }
.hero__inner{ z-index:1; }
.hero__title{ font:800 clamp(3.5rem,10vw,7rem)/1 var(--font-title); text-shadow: 0 0 30px rgba(0, 229, 255, 0.3); }
.hero__title .accent{ color:var(--clr-accent); }
.hero__title .outline{ -webkit-text-stroke:2px var(--clr-primary); color:transparent; }
.hero__subtitle{ font-size:clamp(1.2rem,2vw,1.7rem); margin:2.5rem 0 3.5rem; max-width:45ch; }
.hero__bg{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%,rgba(229, 53, 171, .15) 0%,transparent 60%); }
#starfield{ position:absolute; inset:0; }

/* ---------- SECTIONS ---------- */
.section{ padding:9rem 0; }
.section--dark{ background:var(--clr-bg-alt); }

/* ---------- CARD GRID ---------- */
.grid{ display:grid; gap:2.5rem; }
.cards{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card{ background:var(--clr-bg-alt); border-radius:var(--radius); padding:2.5rem; transition:transform var(--speed), box-shadow var(--speed); border: 1px solid rgba(255,255,255, .1); position: relative; overflow: hidden;}
.card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, rgba(0, 229, 255, 0.2), transparent 30%); animation: rotate 6s linear infinite; }
.card:hover{ transform:translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.card__icon{ width:50px; height:50px; margin-bottom:1.5rem; }
.card__icon .icon{ display:block; width:100%; height:100%; background:var(--clr-accent); mask-size:contain; mask-position:center; mask-repeat:no-repeat; }
.icon--strategy{ mask-image:url('icons/compass.svg'); }
.icon--uiux{ mask-image:url('icons/layout.svg'); }
.icon--dev{ mask-image:url('icons/code.svg'); }
.icon--content{ mask-image:url('icons/play.svg'); }
@keyframes rotate { 100% { transform: rotate(1turn); } }

/* ---------- GALLERY ---------- */
.gallery{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.gallery__item{ position:relative; overflow:hidden; border-radius:var(--radius); border: 1px solid rgba(255,255,255, .15); }
.gallery__item--wide{ grid-column:span 2; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s, filter .5s; filter: saturate(0.8); }
.gallery__item:hover img{ transform:scale(1.15); filter: saturate(1.2); }
.gallery__item figcaption{ position:absolute; inset:auto 0 0; padding:3rem 1.5rem 1.5rem; background:linear-gradient(transparent,rgba(0,0,0,.95)); font-weight:600; font-size: 1.1rem; transform: translateY(100%); transition: transform .6s; }
.gallery__item:hover figcaption { transform: translateY(0); }
.center { margin-left: auto; margin-right: auto; display: table; margin-top: 3rem; }

/* ---------- ABOUT ---------- */
.about{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:5rem; align-items:center; }
.about__img img{ border-radius:var(--radius); box-shadow:var(--shadow); }
.badges{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; }
.badge{ padding:.6rem 1.4rem; background:var(--clr-primary); border-radius:var(--radius); font-size:.9rem; font-weight: 600; }

/* ---------- POSTS ---------- */
.posts{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.post{ background:var(--clr-bg); border-radius:var(--radius); overflow:hidden; transition:transform var(--speed); border: 1px solid rgba(255,255,255, .1); }
.post:hover{ transform:translateY(-8px); box-shadow: 0 10px 20px rgba(0,0,0,.3); }
.post img{ aspect-ratio:16/10; object-fit:cover; width:100%; filter: grayscale(50%); transition: filter var(--speed); }
.post:hover img { filter: grayscale(0); }
.post h3{ font-size:1.25rem; margin:1.5rem 1.5rem .8rem; }
.post time{ display:block; font-size:.9rem; color:var(--clr-accent); margin:0 1.5rem 1.8rem; }

/* ---------- CONTACT ---------- */
.contact{ background: linear-gradient(45deg, var(--clr-primary), var(--clr-accent)); text-align:center; color:#fff; }
.contact__inner{ max-width:650px; margin-inline:auto; }
.contact__form{ display:grid; gap:1.4rem; margin-top:3rem; }
.contact__form input,
.contact__form textarea{ width:100%; padding:1.2rem 1.5rem; border:1px solid transparent; border-radius:var(--radius); font-family:inherit; background: rgba(0,0,0,.2); color: var(--clr-text); transition: border-color var(--speed); }
.contact__form input:focus,
.contact__form textarea:focus{ outline: none; border-color: rgba(255,255,255,.5); }
.contact__form input::placeholder,
.contact__form textarea::placeholder { color: rgba(255,255,255,.6); }
.contact__form textarea{ resize:vertical; min-height:150px; }

/* ---------- FOOTER ---------- */
.footer{ background:#000; padding:2.5rem 0; text-align:center; font-size:.9rem; border-top: 1px solid rgba(255,255,255, .1); }
.to-top{ position:fixed; bottom:24px; right:24px; background:var(--clr-accent); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color: var(--clr-bg); transition: all var(--speed); }
.to-top:hover { transform: scale(1.1); box-shadow: 0 0 20px var(--clr-accent); }

/* ---------- MEDIA ---------- */
@media (max-width:880px){
    .menu{ position:fixed; inset:75px 0 0; flex-direction:column; background:var(--clr-bg); transform:translateY(-120%); transition:transform var(--speed) ease; padding-top:3rem; }
    .burger{ display:flex; }
    .burger-toggle:checked ~ .menu{ transform:none; }
    .gallery__item--wide { grid-column: span 1; }
}