/* ============================================
   KEVSTONE.EE — White theme (original)
   ============================================ */

:root {
    --color-primary:      #1A1A2E;
    --color-accent:       #E8A838;
    --color-accent-hover: #D4922E;
    --color-bg:           #FAFAFA;
    --color-surface:      #FFFFFF;
    --color-text:         #1A1A2E;
    --color-text-secondary: #555555;
    --color-text-muted:   #888888;
    --color-subtle-bg:    #F0EDE8;
    --color-border:       #E5E5E5;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --max-width: 1200px;
    --radius:    12px;
    --radius-sm: 8px;
    --shadow:    0 2px 20px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.10);
    --transition: 0.3s ease;
}

/* ─── Reset ─────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body {
    font-family:var(--font); font-size:16px; line-height:1.7;
    color:var(--color-text-secondary); background:var(--color-bg);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img  { max-width:100%; height:auto; display:block; }
a    { color:inherit; text-decoration:none; transition:color var(--transition); }
ul   { list-style:none; }
h1,h2,h3,h4,h5,h6 { color:var(--color-text); font-weight:700; line-height:1.2; }

/* ─── Container ─────────────────────────── */
.container {
    width:100%; max-width:var(--max-width);
    margin:0 auto; padding:0 20px;
}

/* ─── Section labels ─────────────────────── */
.section-title    { font-size:clamp(1.75rem, 4vw, 2.5rem); text-align:center; margin-bottom:.5rem; }
.section-subtitle { text-align:center; color:var(--color-text-muted); font-size:1.05rem; max-width:600px; margin:0 auto 3rem; }

/* ─── Buttons ───────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 32px; border-radius:var(--radius-sm);
    font-family:var(--font); font-size:.95rem; font-weight:600;
    cursor:pointer; transition:all var(--transition); border:2px solid transparent;
}
.btn--primary  { background:var(--color-accent); color:var(--color-primary); border-color:var(--color-accent); }
.btn--primary:hover { background:var(--color-accent-hover); border-color:var(--color-accent-hover); transform:translateY(-2px); box-shadow:0 4px 20px rgba(232,168,56,.3); }
.btn--outline  { background:transparent; color:var(--color-text); border-color:var(--color-border); }
.btn--outline:hover { border-color:var(--color-accent); color:var(--color-accent); transform:translateY(-2px); }
.btn--ghost    { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35); }
.btn--ghost:hover { background:rgba(255,255,255,.22); transform:translateY(-2px); }
.btn--full     { width:100%; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.header {
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(0,0,0,.06);
    transition:box-shadow var(--transition);
}
.header--scrolled { box-shadow:var(--shadow); }

.header__inner {
    display:flex; align-items:center; justify-content:space-between; height:72px;
}

.header__logo img { height:45px; width:auto; }
.header__nav      { display:none; }
.header__nav-list { display:flex; align-items:center; gap:32px; }

.header__nav-link {
    font-size:.9rem; font-weight:500; color:var(--color-text-secondary);
    position:relative;
}
.header__nav-link:hover { color:var(--color-text); }
.header__nav-link::after {
    content:''; position:absolute; bottom:-4px; left:0;
    width:0; height:2px; background:var(--color-accent); transition:width var(--transition);
}
.header__nav-link:hover::after { width:100%; }

.header__nav-link--cta {
    background:var(--color-accent); color:var(--color-primary) !important;
    padding:10px 24px; border-radius:var(--radius-sm); font-weight:600;
}
.header__nav-link--cta::after  { display:none; }
.header__nav-link--cta:hover   { background:var(--color-accent-hover); }

.header__phone {
    display:none; align-items:center; gap:8px;
    font-weight:600; font-size:.9rem; color:var(--color-text);
}
.header__phone:hover { color:var(--color-accent); }

/* Burger */
.header__burger {
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:32px; height:32px; background:none; border:none; cursor:pointer; padding:4px;
}
.header__burger span { display:block; width:100%; height:2px; background:var(--color-text); border-radius:2px; transition:all var(--transition); }
.header__burger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.header__burger.active span:nth-child(2) { opacity:0; }
.header__burger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile nav */
.header__nav.open {
    display:flex; position:fixed;
    top:72px; left:0; right:0; bottom:0;
    background:#ffffff; z-index:9999;
    padding:40px 20px;
    animation:fadeIn .2s ease;
}
.header__nav.open .header__nav-list { flex-direction:column; gap:24px; width:100%; }
.header__nav.open .header__nav-link { font-size:1.2rem; }
.header__nav.open .header__nav-link--cta { width:100%; text-align:center; padding:16px 24px; }

@keyframes fadeIn    { from{opacity:0}                                           to{opacity:1} }
@keyframes fadeInUp  { from{opacity:0; transform:translateY(28px)}                to{opacity:1; transform:translateY(0)} }
@keyframes blurIn    { from{opacity:0; filter:blur(14px); transform:scale(1.04)} to{opacity:1; filter:none;      transform:scale(1)} }
@keyframes slideDown { from{opacity:0; transform:translateY(-16px)}               to{opacity:1; transform:translateY(0)} }

@media (prefers-reduced-motion: no-preference) {
    .header         { animation:slideDown .55s cubic-bezier(.22,1,.36,1) both; }
    .hero__label    { animation:fadeInUp  .65s cubic-bezier(.22,1,.36,1) both; animation-delay:.15s; }
    .hero__title    { animation:fadeInUp  .7s  cubic-bezier(.22,1,.36,1) both; animation-delay:.3s;  }
    .hero__subtitle { animation:fadeInUp  .7s  cubic-bezier(.22,1,.36,1) both; animation-delay:.45s; }
    .hero__actions  { animation:fadeInUp  .7s  cubic-bezier(.22,1,.36,1) both; animation-delay:.6s;  }
    .hero__slideshow{ animation:blurIn    1.1s cubic-bezier(.22,1,.36,1) both; animation-delay:.2s;  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO — white bg, split layout
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero {
    padding:120px 0 64px;
    background:var(--color-surface);
}

.hero__inner {
    display:flex; flex-direction:column; gap:40px;
}

.hero__content { }

.hero__label {
    display:flex; align-items:center; gap:12px;
    font-size:.78rem; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; color:var(--color-accent);
    margin-bottom:20px;
}
.hero__label-line { display:block; width:28px; height:2px; background:var(--color-accent); flex-shrink:0; }

.hero__title {
    font-size:clamp(2.4rem, 7vw, 4rem);
    font-weight:800; color:var(--color-text);
    line-height:1.05; letter-spacing:-.02em;
    margin-bottom:20px;
}
.hero__title em { font-style:normal; color:var(--color-accent); }

.hero__subtitle {
    font-size:1.05rem; color:var(--color-text-secondary);
    line-height:1.7; max-width:480px; margin-bottom:36px;
}

.hero__actions { display:flex; flex-wrap:wrap; gap:14px; }

/* Slideshow */
.hero__slideshow {
    position:relative; border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--shadow-lg);
    aspect-ratio:4/3; background:var(--color-border);
    flex-shrink:0;
}
.hero__slide {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; opacity:0; transition:opacity .9s ease;
}
.hero__slide.active { opacity:1; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SERVICES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.services {
    padding:80px 0;
    background:var(--color-bg);
}

.services__grid {
    display:grid; grid-template-columns:1fr; gap:18px;
}

.service-card {
    background:var(--color-surface); padding:32px 28px;
    border-radius:var(--radius); border:1px solid var(--color-border);
    transition:all var(--transition);
}
.service-card:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg); border-color:var(--color-accent);
}
.service-card__icon {
    width:52px; height:52px; border-radius:var(--radius-sm);
    background:var(--color-subtle-bg);
    display:flex; align-items:center; justify-content:center;
    color:var(--color-accent); margin-bottom:18px;
}
.service-card__title { font-size:1.05rem; margin-bottom:8px; }
.service-card__text  { font-size:.88rem; color:var(--color-text-muted); line-height:1.6; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PORTFOLIO
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.portfolio {
    padding:80px 0;
    background:var(--color-surface);
}

.portfolio__grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}

.portfolio__item {
    border-radius:var(--radius-sm); overflow:hidden;
    aspect-ratio:4/3; cursor:pointer; position:relative;
    background:var(--color-border);
}
.portfolio__item img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.portfolio__item:hover img { transform:scale(1.05); }
.portfolio__item::after {
    content:''; position:absolute; inset:0;
    background:rgba(0,0,0,.2); opacity:0; transition:opacity var(--transition);
}
.portfolio__item:hover::after { opacity:1; }

/* Lightbox */
.lightbox {
    position:fixed; inset:0; background:rgba(0,0,0,.92);
    z-index:2000; display:flex; align-items:center; justify-content:center;
    padding:20px; opacity:0; visibility:hidden; transition:all .3s ease;
}
.lightbox.active { opacity:1; visibility:visible; }
.lightbox__img   { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:var(--radius-sm); }
.lightbox__close,.lightbox__nav {
    position:absolute; width:48px; height:48px;
    background:rgba(255,255,255,.1); border:none; border-radius:50%;
    color:#fff; font-size:1.5rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background var(--transition);
}
.lightbox__close:hover,.lightbox__nav:hover { background:rgba(255,255,255,.22); }
.lightbox__close      { top:20px; right:20px; }
.lightbox__nav        { top:50%; transform:translateY(-50%); }
.lightbox__nav--prev  { left:20px; }
.lightbox__nav--next  { right:20px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTACT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.contact {
    padding:80px 0;
    background:var(--color-subtle-bg);
}

.contact__inner { display:grid; grid-template-columns:1fr; gap:40px; }

.contact__form {
    display:grid; grid-template-columns:1fr; gap:18px;
    background:var(--color-surface); padding:32px 24px;
    border-radius:var(--radius); box-shadow:var(--shadow);
}

.form-group label { display:block; font-size:.82rem; font-weight:600; color:var(--color-text); margin-bottom:6px; }
.form-group input,
.form-group select,
.form-group textarea {
    width:100%; padding:12px 16px;
    border:1px solid var(--color-border); border-radius:var(--radius-sm);
    font-family:var(--font); font-size:.95rem;
    background:var(--color-bg); color:var(--color-text);
    transition:border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline:none; border-color:var(--color-accent);
    box-shadow:0 0 0 3px rgba(232,168,56,.15);
}
.form-group textarea { resize:vertical; min-height:120px; }

.contact__info { display:flex; flex-direction:column; gap:32px; }
.contact__info-block h3 { font-size:1.1rem; margin-bottom:14px; }

.contact__details li {
    display:flex; align-items:center; gap:12px;
    padding:10px 0; font-size:.95rem; border-bottom:1px solid var(--color-border);
}
.contact__details li:last-child { border-bottom:none; }
.contact__details li svg { flex-shrink:0; color:var(--color-accent); }
.contact__details a:hover { color:var(--color-accent); }

.contact__info-block p { font-size:.9rem; color:var(--color-text-muted); margin-bottom:14px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer {
    background:var(--color-primary); color:rgba(255,255,255,.6);
    padding:60px 0 0;
}
.footer__inner { display:grid; grid-template-columns:1fr; gap:36px; padding-bottom:40px; }
.footer__brand img   { margin-bottom:14px; filter:brightness(0) invert(1) opacity(.8); }
.footer__brand p     { font-size:.88rem; line-height:1.6; max-width:280px; }
.footer__links h4, .footer__contact h4 { color:#fff; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.footer__links li, .footer__contact li { margin-bottom:8px; font-size:.88rem; }
.footer__links a:hover, .footer__contact a:hover { color:var(--color-accent); }
.footer__bottom { border-top:1px solid rgba(255,255,255,.08); padding:20px 0; text-align:center; font-size:.78rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLL ANIMATIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE 640px+
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width:640px) {
    .contact__form { grid-template-columns:repeat(2,1fr); padding:36px 28px; }
    .form-group--full, .contact__form .btn { grid-column:1/-1; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE 768px+
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width:768px) {
    .container { padding:0 32px; }
    .services__grid  { grid-template-columns:repeat(2,1fr); }
    .portfolio__grid { grid-template-columns:repeat(3,1fr); gap:12px; }
    .footer__inner   { grid-template-columns:repeat(2,1fr); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE 1024px+
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width:1024px) {
    .container { padding:0 40px; }

    .header__nav   { display:flex; }
    .header__phone { display:flex; }
    .header__burger { display:none; }

    .hero { padding:140px 0 80px; }
    .hero__inner {
        flex-direction:row; align-items:center; gap:64px;
    }
    .hero__content  { flex:1; }
    .hero__slideshow { flex:1; max-width:540px; }

    .services__grid  { grid-template-columns:repeat(3,1fr); }
    .portfolio__grid { grid-template-columns:repeat(3,1fr); gap:14px; }
    .contact__inner  { grid-template-columns:1.2fr .8fr; gap:56px; }
    .contact__form   { padding:40px 36px; }
    .footer__inner   { grid-template-columns:1.6fr 1fr 1fr 1fr; }
}