/* styles.css */
/* ===== CSS Variables (Нова палітра та стиль) ===== */
:root {
    --clr-primary: #FF6B00; /* Яскравий помаранчевий */
    --clr-accent: #4B0082;  /* Глибокий фіолетовий */
    --clr-bg: #FDFCF9;      /* Теплий світлий фон */
    --clr-surface: #ffffff; /* Чистий білий для карток */
    --clr-text: #1A1A1A;    /* Темний текст */
    --radius: 24px;         /* Дуже округлені кути */
    --transition: .3s ease-out;
    --shadow: 0 8px 25px rgba(255, 107, 0, .15); /* М'яка помаранчева тінь */
    --font-main: 'Inter', sans-serif;
}

/* ========== Base Reset ========== */
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body { font-family:var(--font-main); line-height:1.7; color:var(--clr-text); background:var(--clr-bg); overflow-x:hidden }
img { max-width:100%; display:block }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }

/* Containers */
.container { max-width:1160px; margin-inline:auto; padding-inline:20px }

/* Header */
.header { position:fixed; top:0; left:0; width:100%; background:rgba(253, 252, 249,.8); backdrop-filter:blur(10px); z-index:100; transition: box-shadow var(--transition); }
.header.shadow { box-shadow: 0 4px 20px rgba(0,0,0,.05); }
.nav { display:flex; justify-content:space-between; align-items:center; padding-block:16px }
.logo img { height:36px }
.nav-menu { display:flex; gap:40px }
.nav-menu a { color:var(--clr-text); font-weight:600; transition:color var(--transition); position: relative; padding-bottom: 4px; }
.nav-menu a:hover { color:var(--clr-primary) }
.nav-menu a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: var(--clr-primary); transition: width var(--transition); }
.nav-menu a:hover::after { width: 100%; }

/* Burger */
.menu-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer }
.menu-toggle span { width:26px; height:3px; background:var(--clr-text); border-radius:3px; transition:all var(--transition) }

/* Hero */
.hero { background:var(--clr-bg); color:var(--clr-text); padding:180px 0 160px; text-align: center; }
.hero-content { max-width:850px; margin-inline: auto; }
.hero h1 { font-size:clamp(2.8rem, 6vw, 4.5rem); font-weight:800; margin-bottom:40px; line-height: 1.2; }
.cta-button { display:inline-block; background:var(--clr-primary); color:var(--clr-surface); padding:18px 40px; border-radius:100px; font-weight:700; font-size:18px; transition:all var(--transition); box-shadow: 0 5px 15px rgba(255, 107, 0, .3); }
.cta-button:hover { transform:translateY(-5px) scale(1.05); box-shadow: 0 10px 25px rgba(255, 107, 0, .4); }

/* Sections */
.section-tag { font-size:14px; letter-spacing:1.5px; font-weight:700; text-transform:uppercase; margin-bottom:50px; text-align:center; color: var(--clr-primary); }
.services, .testimonials { padding:100px 0; }
.about { text-align: center; padding: 100px 0; background: var(--clr-surface); }
.portfolio { background:var(--clr-surface); padding:100px 0 }
.featured { background:var(--clr-bg); padding:100px 0 120px; }

/* Grids */
.services-grid, .projects-grid, .portfolio-items, .testimonials-grid { display:grid; gap:30px }
.services-grid { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) }
.projects-grid { grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); margin-top:30px }
.portfolio-items, .testimonials-grid { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) }

/* Service Item */
.service-item { text-align:center; padding:40px 32px; border-radius:var(--radius); background:var(--clr-surface); box-shadow:var(--shadow); transition:transform var(--transition), box-shadow var(--transition); }
.service-item:hover { transform:translateY(-10px); box-shadow: 0 15px 40px rgba(255, 107, 0, .2); }
.service-icon { margin-inline:auto; width:70px; height:70px; background: var(--clr-primary); border-radius:50%; display:grid; place-items:center; margin-bottom:24px }
.service-icon svg { width:40px; height:40px; stroke:var(--clr-surface); stroke-width:3 }
.service-item h3 { font-size:22px; font-weight:700; margin-bottom:10px; color:var(--clr-text) }
.service-item p { font-size:16px; color:#555 }

/* Project cards */
.project-card { display:block; border-radius:var(--radius); overflow:hidden; transition:transform var(--transition); background: var(--clr-surface); box-shadow: var(--shadow); }
.project-card:hover { transform:translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,.1); }
.project-card.large img, .project-card img { height:100%; width:100%; object-fit:cover; transition:transform .4s; }
.project-card:hover img { transform:scale(1.05); }
.project-info { padding:28px; background: var(--clr-surface); }
.project-info h3 { font-size:22px; font-weight:700; margin-bottom:8px }
.project-info p { font-size:16px; color:#555; }

/* Portfolio thumbnails */
.portfolio-item { position:relative; border-radius:var(--radius); overflow:hidden; transition:box-shadow var(--transition) }
.portfolio-item:hover { box-shadow: 0 15px 35px rgba(0,0,0,.15) }
.portfolio-item img { transition: transform .4s; height: 100%; object-fit: cover; }
.portfolio-item:hover img { transform: scale(1.1); }
.portfolio-overlay { position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.8) 0%, transparent 70%); color:var(--clr-surface); padding:24px; display:flex; flex-direction:column; justify-content:flex-end }
.portfolio-overlay h3 { font-size:22px; font-weight:700; margin-bottom:6px }
.portfolio-overlay p { font-size:16px }

/* About */
.about p { font-size:18px; max-width:75ch; margin-inline:auto; margin-bottom:24px; color:#444; line-height: 1.8; }

/* Testimonials */
.testimonial { background:var(--clr-surface); padding:32px; border-radius:var(--radius); box-shadow:var(--shadow); font-size:16px; color:#444; }
.stars { color: var(--clr-primary); font-size:20px; margin-bottom:12px }
.testimonial cite { display:block; margin-top:18px; font-style:normal; font-weight:600; color: #222; }

/* Footer */
.footer { background:var(--clr-accent); color:var(--clr-surface); padding:80px 0 40px; text-align: center; }
.footer-content { display:flex; flex-wrap:wrap; gap:50px; justify-content:space-around; align-items:center; text-align: center; }
.footer-brand img { height:40px; margin-bottom:18px; filter: brightness(0) invert(1); }
.footer-brand p { font-size:16px; opacity:.9 }
.footer-info h3 { font-weight: 700; font-size: 22px; margin-bottom: 1rem; }
.footer-info a { color:var(--clr-surface); transition:opacity var(--transition); opacity: .8; }
.footer-info a:hover { opacity:1 }
.social-links { display:flex; gap:16px; margin-top:24px; justify-content: center; }
.social-links a { width:44px; height:44px; background:rgba(255,255,255,.1); border-radius:50%; display:grid; place-items:center; transition:background var(--transition) }
.social-links a:hover { background:var(--clr-primary) }
.social-links svg { width:22px; height:22px; fill:currentColor }
.footer-copy { text-align:center; font-size:14px; margin-top:60px; opacity:.7 }

/* Animations */
.fade-in { animation:fadeInUp .8s ease-out both }
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }

/* Burger + responsive */
@media (max-width:900px) {
    .nav-menu { position:fixed; top:68px; right:-100%; flex-direction:column; background:var(--clr-surface); width:280px; height:calc(100vh - 68px); padding:40px; transition:right var(--transition); box-shadow: -5px 0 20px rgba(0,0,0,.1); }
    .nav-menu.active { right:0 }
    .menu-toggle { display:flex }
    body.menu-open { overflow:hidden }
}
@media (max-width:600px) {
    .hero { padding:140px 0 100px }
    .hero h1 { font-size: 2.2rem; }
}