:root {
    --white:      #FFFFFF;
    --off-white:  #F7F5F2;
    --cream:      #F0EBE3;
    --beige:      #E8DDD0;
    --sand:       #C4A882;
    --brown:      #8B6E52;
    --dark:       #1A1612;
    --mid:        #6B5F55;
    --light-text: #A09288;
    --accent:     #D4B896;
    --green:      #7A9E7E;
    --shadow:     0 8px 40px rgba(26,22,18,.08);
    --shadow-md:  0 16px 60px rgba(26,22,18,.12);
    --radius:     16px;
    --radius-sm:  8px;
    --trans:      .4s cubic-bezier(.25,.8,.25,1);
    --font-head:  'DM Serif Display', Georgia, serif;
    --font-body:  'DM Sans', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-body); background:var(--white); color:var(--dark); overflow-x:hidden; line-height:1.7; }
img  { max-width:100%; height:auto; display:block; }
a    { text-decoration:none; color:inherit; }
ul   { list-style:none; }

/* ── TYPOGRAPHY ── */
h1,h2,h3 { font-family:var(--font-head); font-weight:400; line-height:1.15; }
em { font-style:italic; color:var(--brown); }
.label {
    display:inline-block;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--sand);
    margin-bottom:.8rem;
}
.label.light { color:rgba(255,255,255,.7); }
.section-title { font-size:clamp(2rem,4vw,3rem); color:var(--dark); margin-bottom:1.2rem; }
.section-header { text-align:center; margin-bottom:3rem; }
.section { padding:6rem 5%; }

/* ── BUTTONS ── */
.btn-primary {
    display:inline-block;
    background:var(--dark);
    color:var(--white);
    padding:.85rem 2rem;
    font-family:var(--font-body);
    font-size:.82rem;
    font-weight:600;
    letter-spacing:.08em;
    border-radius:50px;
    border:2px solid var(--dark);
    transition:var(--trans);
}
.btn-primary:hover { background:transparent; color:var(--dark); }

.btn-outline-dark {
    display:inline-block;
    background:transparent;
    color:var(--dark);
    padding:.85rem 2rem;
    font-size:.82rem;
    font-weight:600;
    letter-spacing:.08em;
    border-radius:50px;
    border:2px solid var(--dark);
    transition:var(--trans);
}
.btn-outline-dark:hover { background:var(--dark); color:var(--white); }

.btn-nav {
    display:inline-block;
    background:var(--dark);
    color:var(--white);
    padding:.55rem 1.4rem;
    font-size:.78rem;
    font-weight:600;
    border-radius:50px;
    transition:var(--trans);
}
.btn-nav:hover { background:var(--brown); }

.btn-hero {
    display:inline-block;
    background:rgba(255,255,255,.15);
    color:var(--white);
    padding:.9rem 2.2rem;
    font-size:.9rem;
    font-weight:600;
    border-radius:50px;
    border:1.5px solid rgba(255,255,255,.4);
    backdrop-filter:blur(10px);
    transition:var(--trans);
    margin-top:1.5rem;
}
.btn-hero:hover { background:var(--white); color:var(--dark); }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    position:fixed;
    top:0; left:0; right:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.4rem 5%;
    background:transparent;
    transition:background var(--trans), padding var(--trans), box-shadow var(--trans);
}
.navbar.scrolled {
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);
    padding:1rem 5%;
    box-shadow:0 2px 30px rgba(26,22,18,.08);
}
.nav-logo {
    font-family:var(--font-head);
    font-size:1.6rem;
    color:var(--white);
    transition:color var(--trans);
}
.nav-logo span { color:rgba(255,255,255,.6); }
.navbar.scrolled .nav-logo { color:var(--dark); }
.navbar.scrolled .nav-logo span { color:var(--sand); }

.nav-menu { display:flex; align-items:center; gap:2.5rem; }
.nav-menu a {
    font-size:.83rem;
    font-weight:500;
    letter-spacing:.05em;
    color:rgba(255,255,255,.85);
    position:relative;
    transition:color var(--trans);
}
.nav-menu a::after {
    content:'';
    position:absolute;
    bottom:-3px; left:0;
    width:0; height:1.5px;
    background:var(--sand);
    transition:width var(--trans);
}
.nav-menu a:hover::after,
.nav-menu a.active::after { width:100%; }
.navbar.scrolled .nav-menu a { color:var(--mid); }
.navbar.scrolled .nav-menu a:hover { color:var(--dark); }

.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
.nav-toggle span { width:22px; height:1.5px; background:var(--white); display:block; transition:var(--trans); }
.navbar.scrolled .nav-toggle span { background:var(--dark); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position:relative;
    height:100vh;
    min-height:640px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--dark);
}
.hero-video {
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    opacity:.7;
}
.hero-overlay {
    position:absolute; inset:0;
    background:linear-gradient(
        120deg,
        rgba(26,22,18,.55) 0%,
        rgba(26,22,18,.2) 55%,
        transparent 100%
    );
    z-index:1;
}
.hero-content {
    position:relative;
    z-index:2;
    padding:0 5%;
    width:100%;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto auto auto;
    align-items:start;
    gap:1rem 4rem;
    padding-top:8rem;
}

/* Badge */
.hero-badge {
    grid-column:1;
    display:inline-flex;
    align-items:center;
    gap:.7rem;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter:blur(10px);
    padding:.5rem 1rem .5rem .5rem;
    border-radius:50px;
    width:fit-content;
}
.badge-avatars { display:flex; }
.badge-avatars img {
    width:28px; height:28px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--white);
    margin-left:-8px;
}
.badge-avatars img:first-child { margin-left:0; }
.hero-badge span { font-size:.78rem; color:var(--white); }
.hero-badge strong { color:var(--accent); }

/* Titlu */
.hero-title {
    grid-column:1;
    font-size:clamp(2.5rem,8vw,4.5rem);
    font-weight:400;
    color:var(--white);
    line-height:1.0;
    display:flex;
    flex-direction:column;
    gap:.1rem;
}

/* Sub */
.hero-sub {
    grid-column:1;
    color:rgba(255,255,255,.75);
    font-size:1rem;
    max-width:420px;
    line-height:1.7;
}

/* CTA */
.hero-content .btn-hero { grid-column:1; width:fit-content; }

/* Stats */
.hero-stats {
    grid-column:2;
    grid-row:2/5;
    display:flex;
    flex-direction:column;
    gap:1.8rem;
    align-self:center;
}
.hero-stat {
    display:flex;
    align-items:center;
    gap:1rem;
    color:var(--white);
}
.hero-stat i {
    font-size:1.3rem;
    color:rgba(255,255,255,.5);
    width:24px;
    text-align:center;
}
.hero-stat strong { display:block; font-size:1.8rem; font-family:var(--font-head); line-height:1; }
.hero-stat span   { font-size:.75rem; color:rgba(255,255,255,.6); line-height:1.3; }

/* Scan boxes decorative */
.scan-box {
    position:absolute;
    border:1.5px solid rgba(255,255,255,.6);
    padding:.3rem .6rem;
    font-size:.65rem;
    color:var(--white);
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(4px);
    z-index:3;
    animation:scanPulse 3s ease-in-out infinite;
}
.scan-box-1 { top:28%; left:52%; animation-delay:0s; }
.scan-box-2 { top:42%; left:62%; animation-delay:.8s; }
.scan-box-3 { top:56%; left:46%; animation-delay:1.6s; }
@keyframes scanPulse {
    0%,100% { opacity:.6; }
    50%      { opacity:1; box-shadow:0 0 10px rgba(255,255,255,.3); }
}

/* ============================================================
   LEAP IN ANIMATION
   ============================================================ */

/* Hero — animație imediată la încărcare */
.leap-in {
    opacity:0;
    transform:translateY(40px) scale(.97);
    animation:leapIn .8s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes leapIn {
    to { opacity:1; transform:translateY(0) scale(1); }
}
/* delay-uri via data-delay (aplicate în JS) */

/* Scroll — animație la scroll */
.leap-in-scroll {
    opacity:0;
    transform:translateY(50px) scale(.97);
    transition:opacity .7s cubic-bezier(.34,1.2,.64,1),
               transform .7s cubic-bezier(.34,1.2,.64,1);
}
.leap-in-scroll.visible {
    opacity:1;
    transform:translateY(0) scale(1);
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-section {
    background:var(--off-white);
    padding:1.2rem 0;
    overflow:hidden;
    border-top:1px solid var(--beige);
    border-bottom:1px solid var(--beige);
}
.marquee-track {
    display:flex;
    gap:3rem;
    animation:marqueeScroll 20s linear infinite;
    width:max-content;
}
.marquee-item {
    font-family:var(--font-head);
    font-size:.95rem;
    color:var(--mid);
    white-space:nowrap;
    letter-spacing:.05em;
    padding:0 1.5rem;
    position:relative;
}
.marquee-item::after {
    content:'·';
    position:absolute;
    right:-1.5rem;
    color:var(--sand);
}
@keyframes marqueeScroll {
    from { transform:translateX(0); }
    to   { transform:translateX(-50%); }
}

/* ============================================================
   BENTO GRID (ca imaginea 2)
   ============================================================ */
.bento-section { background:var(--white); }
.bento-grid {
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    grid-template-rows:300px 260px;
    gap:12px;
    max-width:1400px;
    margin:0 auto;
}

/* Panel mare stânga (rând 1, col 1-6) */
.bento-large  { grid-column:1/7;  grid-row:1; }
/* Panel mijloc (rând 1, col 7-10) */
.bento-medium { grid-column:7/11; grid-row:1; }
/* Panel mic dreapta (rând 1, col 11-13) */
.bento-small:nth-child(3) { grid-column:11/13; grid-row:1; }
/* Panel mic jos stânga (rând 2, col 1-4) */
.bento-small:nth-child(4) { grid-column:1/4;   grid-row:2; }
/* Panel mic jos mijloc (rând 2, col 4-7) */
.bento-small:nth-child(5) { grid-column:4/7;   grid-row:2; }
/* Panel medium jos dreapta (rând 2, col 7-13) */
.bento-grid .bento-card:nth-child(6) { grid-column:7/13; grid-row:2; }

.bento-card {
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    cursor:pointer;
}
.bento-card img {
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}
.bento-card:hover img { transform:scale(1.06); }
.bento-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(26,22,18,.65) 0%, transparent 60%);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:1.5rem;
    transition:background var(--trans);
}
.bento-card:hover .bento-overlay {
    background:linear-gradient(to top, rgba(26,22,18,.8) 0%, rgba(26,22,18,.1) 100%);
}
.bento-overlay h3 {
    font-family:var(--font-head);
    font-size:clamp(1rem,2vw,1.5rem);
    color:var(--white);
    margin-bottom:.8rem;
    line-height:1.2;
}
.bento-btn {
    display:inline-block;
    background:rgba(255,255,255,.15);
    color:var(--white);
    padding:.4rem 1.1rem;
    border-radius:50px;
    font-size:.75rem;
    font-weight:600;
    border:1px solid rgba(255,255,255,.35);
    backdrop-filter:blur(6px);
    transition:var(--trans);
    width:fit-content;
    opacity:0;
    transform:translateY(8px);
    transition:opacity var(--trans), transform var(--trans), background var(--trans);
}
.bento-card:hover .bento-btn {
    opacity:1;
    transform:translateY(0);
    background:var(--white);
    color:var(--dark);
}

/* ============================================================
   STATS
   ============================================================ */
.stats-section {
    background:var(--dark);
    padding:5rem 5%;
}
.stats-inner {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2rem;
    max-width:1100px;
    margin:0 auto;
    text-align:center;
}
.stat-item { color:var(--white); }
.stat-item strong {
    display:inline;
    font-family:var(--font-head);
    font-size:3.5rem;
    color:var(--accent);
    line-height:1;
}
.stat-item > strong:last-of-type { font-size:3.5rem; }
.stat-item span {
    display:block;
    font-size:.8rem;
    color:rgba(255,255,255,.5);
    margin-top:.4rem;
    letter-spacing:.05em;
}

/* ============================================================
   ABOUT STRIP
   ============================================================ */
.about-strip { background:var(--off-white); }
.about-strip-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
    max-width:1200px;
    margin:0 auto;
}
.about-strip-img img {
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
}
.about-strip-text p { color:var(--mid); margin-bottom:1.5rem; }
.about-checks { display:flex; flex-direction:column; gap:.8rem; margin-bottom:2rem; }
.about-checks li { display:flex; align-items:center; gap:.8rem; font-size:.9rem; color:var(--mid); }
.about-checks i { color:var(--green); font-size:.85rem; }

/* ============================================================
   TESTIMONIALE
   ============================================================ */
.testimonials-section { background:var(--white); }
.testimonials-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
    max-width:1200px;
    margin:0 auto;
}
.testi-card {
    background:var(--off-white);
    padding:2rem;
    border-radius:var(--radius);
    border:1px solid var(--beige);
    transition:transform var(--trans), box-shadow var(--trans);
}
.testi-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.testi-stars { color:var(--sand); font-size:.85rem; margin-bottom:1rem; }
.testi-stars i { margin-right:2px; }
.testi-card > p { color:var(--mid); font-style:italic; margin-bottom:1.5rem; line-height:1.8; }
.testi-author { display:flex; align-items:center; gap:1rem; }
.testi-avatar {
    width:42px; height:42px;
    border-radius:50%;
    background:var(--sand);
    color:var(--white);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-head);
    font-size:1.1rem;
}
.testi-author strong { display:block; font-size:.9rem; }
.testi-author span   { font-size:.78rem; color:var(--light-text); }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-section {
    background:var(--cream);
    padding:7rem 5%;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.cta-section::before {
    content:'';
    position:absolute;
    width:500px; height:500px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(196,168,130,.2), transparent);
    top:50%; left:50%;
    transform:translate(-50%,-50%);
}
.cta-inner { position:relative; z-index:1; max-width:650px; margin:0 auto; }
.cta-inner h2 { font-size:clamp(2rem,5vw,3.5rem); margin-bottom:1rem; }
.cta-inner p  { color:var(--mid); margin-bottom:2rem; }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--dark); color:rgba(255,255,255,.6); }
.footer-top {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.2fr;
    gap:3rem;
    padding:5rem 5% 3rem;
    max-width:1400px;
    margin:0 auto;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-logo {
    font-family:var(--font-head);
    font-size:1.8rem;
    color:var(--white);
    margin-bottom:1rem;
}
.footer-logo span { color:var(--sand); }
.footer-brand p { font-size:.88rem; line-height:1.8; max-width:280px; margin-bottom:1.5rem; }
.social-links { display:flex; gap:.8rem; }
.social-links a {
    width:36px; height:36px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.6);
    font-size:.85rem;
    transition:var(--trans);
}
.social-links a:hover { background:var(--sand); border-color:var(--sand); color:var(--white); }
.footer-col h4 {
    font-family:var(--font-body);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--white);
    margin-bottom:1.2rem;
}
.footer-col a,
.footer-col p {
    display:block;
    font-size:.85rem;
    color:rgba(255,255,255,.5);
    margin-bottom:.6rem;
    transition:color var(--trans);
}
.footer-col a:hover { color:var(--white); }
.footer-col i { color:var(--sand); margin-right:.5rem; width:14px; }
.footer-bottom {
    text-align:center;
    padding:1.5rem;
    font-size:.78rem;
    color:rgba(255,255,255,.3);
    max-width:1400px;
    margin:0 auto;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width:1100px) {
    .bento-grid { grid-template-rows:240px 200px; }
    .testimonials-grid { grid-template-columns:1fr 1fr; }
    .footer-top { grid-template-columns:1fr 1fr; }
    .stats-inner { grid-template-columns:repeat(2,1fr); gap:3rem; }
}

@media (max-width:900px) {
    .hero-content { grid-template-columns:1fr; padding-top:10rem; }
    .hero-stats { grid-column:1; grid-row:auto; flex-direction:row; flex-wrap:wrap; gap:1.5rem; }
    .hero-stat strong { font-size:1.4rem; }
    .bento-grid {
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto;
    }
    .bento-large,
    .bento-medium,
    .bento-small:nth-child(3),
    .bento-small:nth-child(4),
    .bento-small:nth-child(5),
    .bento-grid .bento-card:nth-child(6) {
        grid-column:auto;
        grid-row:auto;
    }
    .bento-large { grid-column:1/3; height:300px; }
    .bento-card  { height:220px; }
    .about-strip-grid { grid-template-columns:1fr; gap:3rem; }
    .scan-box { display:none; }
}

@media (max-width:768px) {
    .nav-menu {
        position:fixed;
        top:0; right:-100%;
        width:75%; max-width:300px;
        height:100vh;
        background:var(--white);
        flex-direction:column;
        justify-content:center;
        gap:2rem;
        padding:3rem 2rem;
        transition:right var(--trans);
        box-shadow:-5px 0 30px rgba(26,22,18,.1);
        z-index:999;
    }
    .nav-menu.open { right:0; }
    .nav-menu a { color:var(--dark) !important; font-size:1.1rem; }
    .nav-toggle { display:flex; }
    .btn-nav    { display:none; }
    .testimonials-grid { grid-template-columns:1fr; }
    .footer-top { grid-template-columns:1fr; gap:2rem; padding:3rem 5%; }
    .section    { padding:4rem 5%; }
    .bento-grid { grid-template-columns:1fr; }
    .bento-large { grid-column:1; height:260px; }
    .bento-card  { height:200px; }
}

@media (max-width:480px) {
    .hero-title { font-size:3rem; }
    .stats-inner { grid-template-columns:1fr 1fr; }
    .cta-btns { flex-direction:column; align-items:center; }
    .hero-badge { font-size:.7rem; }
}