/* Joker Dent — exact component styles extracted from static index.html */


  html { scroll-behavior: smooth; font-size: 17.5px; }
  body { font-feature-settings: 'ss01', 'ss02', 'cv11'; }
  .font-display { font-optical-sizing: auto; }

  .grain { position: relative; }
  .grain::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    opacity: 0.07;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 5;
  }

  .section-num {
    position: absolute;
    top: -0.45em;
    left: -0.05em;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(7rem, 16vw, 16rem);
    line-height: 1;
    color: rgba(56, 27, 57, 0.055);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -0.04em;
  }

  .card-lift {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.3s ease;
  }
  .card-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 32px 60px -28px rgba(56, 27, 57, 0.28);
  }

  .hero-overlay {
    background:
      linear-gradient(110deg, rgba(15, 23, 42, 0.78) 0%, rgba(56, 27, 57, 0.55) 48%, rgba(15, 23, 42, 0.68) 100%),
      radial-gradient(80% 60% at 20% 80%, rgba(56, 27, 57, 0.45) 0%, transparent 70%);
  }

  @keyframes wpPulse {
    0%, 100% { box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.5); }
    50% { box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.85), 0 0 0 10px rgba(37, 211, 102, 0.15); }
  }
  .wp-float { animation: wpPulse 2.8s ease-in-out infinite; transition: opacity .35s ease, transform .35s ease; }
  .wp-float.is-hidden, #back-to-top.is-hidden { opacity: 0; transform: translateY(80px); pointer-events: none; }
  #back-to-top { transition: opacity .35s ease, transform .35s ease; }

  #scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px;
    background: linear-gradient(90deg, #381B39 0%, #6D8A51 100%);
    z-index: 100; transition: width 0.12s ease; width: 0;
  }

  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee-track { animation: marquee 50s linear infinite; }

  /* Mobile drawer */
  .drawer { transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
  .drawer.is-open { transform: translateX(0); }
  .drawer-backdrop { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
  .drawer-backdrop.is-open { opacity: 1; visibility: visible; }

  /* Hero kicker dot */
  .kicker-dot::before {
    content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #6D8A51; margin-right: 10px; vertical-align: middle;
    box-shadow: 0 0 0 4px rgba(109, 138, 81, 0.18);
  }

  /* Underline reveal on links */
  .link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.35s ease; }
  .link-underline:hover { background-size: 100% 1px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .wp-float, .marquee-track { animation: none !important; }
  }

  ::selection { background: #381B39; color: #FAF7F2; }
  *:focus-visible { outline: 2px solid #381B39; outline-offset: 3px; border-radius: 4px; }

  /* Floating pill navbar */
  .nav-pill {
    transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .5s ease, background-color .35s ease, padding .5s ease;
  }
  .nav-pill.is-scrolled {
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 20px 50px -25px rgba(15, 23, 42, 0.25);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
  .nav-pill-link {
    position: relative;
    transition: color .25s ease;
  }
  .nav-pill-link[data-active="true"]::before {
    content: '';
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #381B39;
  }
  .nav-pill-link[data-active="true"] { padding-left: 1.5rem; color: #381B39; }

  /* Editorial brand row */
  .brand-row > * { position: relative; }
  .brand-row > *:not(:last-child)::after {
    content: '·';
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(56, 27, 57, 0.25);
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    font-style: italic;
  }

  /* P1 — Word stagger reveal (GSAP + SplitType target) */
  .word { display: inline-block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
  .word .inner { display: inline-block; transform: translateY(110%); }
  [data-animate-text] { will-change: transform; }

  /* P2 — Sticky scroll-stack De ce noi */
  .stack-section { position: relative; }
  .stack-card {
    position: sticky;
    top: 6rem;
    background: #FAF7F2;
    border-radius: 1.5rem;
    border: 1px solid #e4e4e7;
    padding: 2.5rem 2rem;
    transition: transform .5s ease, box-shadow .5s ease;
    will-change: transform;
  }
  .stack-card:nth-child(1) { top: 6rem; }
  .stack-card:nth-child(2) { top: 6.5rem; }
  .stack-card:nth-child(3) { top: 7rem; }
  .stack-card:nth-child(4) { top: 7.5rem; }
  @media (max-width: 768px) {
    .stack-card { position: relative; top: auto !important; margin-bottom: 1rem; }
  }

  /* P3 — Marquee testimoniale (different from existing brand marquee) */
  @keyframes testiMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  .testi-marquee-track {
    display: inline-flex;
    gap: 1.5rem;
    animation: testiMarquee 60s linear infinite;
    white-space: normal;
  }
  .testi-marquee-track:hover { animation-play-state: paused; }
  .testi-card {
    flex-shrink: 0;
    width: min(360px, 80vw);
    background: white;
    border: 1px solid #f4f4f5;
    border-radius: 1rem;
    padding: 1.75rem;
  }

  /* P4 — Office gallery asymmetric grid */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 140px;
    gap: 1rem;
  }
  .gallery-grid > a:nth-child(1) { grid-column: span 4; grid-row: span 2; }
  .gallery-grid > a:nth-child(2) { grid-column: span 2; grid-row: span 1; }
  .gallery-grid > a:nth-child(3) { grid-column: span 2; grid-row: span 2; }
  .gallery-grid > a:nth-child(4) { grid-column: span 3; grid-row: span 1; }
  .gallery-grid > a:nth-child(5) { grid-column: span 3; grid-row: span 1; }
  .gallery-grid > a:nth-child(6) { grid-column: span 2; grid-row: span 1; }
  .gallery-grid > a:nth-child(7) { grid-column: span 4; grid-row: span 1; }
  .gallery-grid > a {
    overflow: hidden;
    border-radius: 0.75rem;
    background: #f4f4f5;
    position: relative;
  }
  .gallery-grid > a img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .gallery-grid > a:hover img { transform: scale(1.05); }
  @media (max-width: 768px) {
    .gallery-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 120px;
    }
    .gallery-grid > a { grid-column: span 1 !important; grid-row: span 1 !important; }
    .gallery-grid > a:nth-child(1) { grid-column: span 2 !important; grid-row: span 2 !important; }
  }

  /* P5 — Three.js carousel canvas */
  .hero-canvas-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  #hero-carousel-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    will-change: transform;
  }

  /* P6 — Lenis init */
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: clip; }



.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:90;transform:translateY(110%);transition:transform .4s cubic-bezier(.22,1,.36,1);}
.cookie-banner.is-visible{transform:translateY(0);}
.cookie-banner-inner{max-width:1200px;margin:0 auto;background:#0f172a;color:#FAF7F2;padding:18px 22px;border-radius:18px 18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:14px;box-shadow:0 -20px 40px -10px rgba(0,0,0,.35);}
.cookie-banner-text{flex:1;min-width:240px;font-size:13px;line-height:1.55;color:#e7e1d3;}
.cookie-banner-text a{color:#f2c97b;text-decoration:underline;}
.cookie-banner-actions{display:flex;gap:8px;flex-wrap:wrap;}
.cookie-btn{padding:9px 16px;border-radius:999px;font-size:13px;font-weight:500;cursor:pointer;border:none;transition:opacity .2s,background .2s;}
.cookie-btn-reject{background:transparent;color:#cdc4b5;border:1px solid rgba(255,255,255,.2);}
.cookie-btn-reject:hover{background:rgba(255,255,255,.06);}
.cookie-btn-prefs{background:rgba(255,255,255,.08);color:#FAF7F2;}
.cookie-btn-prefs:hover{background:rgba(255,255,255,.14);}
.cookie-btn-accept{background:#f2c97b;color:#0f172a;}
.cookie-btn-accept:hover{background:#ffd998;}
.cookie-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);}
.cookie-modal.is-open{display:flex;}
.cookie-modal-card{background:#FAF7F2;border-radius:20px;max-width:520px;width:100%;padding:28px;max-height:90vh;overflow-y:auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);}
.cookie-modal h3{font-family:Georgia,serif;font-size:22px;margin:0 0 6px;color:#0f172a;}
.cookie-modal p{font-size:13px;color:#5a5340;line-height:1.6;margin:0 0 18px;}
.cookie-toggle{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;background:#fff;border:1px solid #e8e2d6;border-radius:12px;margin-bottom:10px;}
.cookie-toggle-info{flex:1;}
.cookie-toggle-label{font-size:14px;font-weight:600;color:#0f172a;display:block;margin-bottom:2px;}
.cookie-toggle-desc{font-size:12px;color:#857d6e;line-height:1.5;}
.cookie-toggle-readonly{font-size:11px;color:#857d6e;background:#f4eee1;padding:3px 8px;border-radius:99px;align-self:center;}
.cookie-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;align-self:center;}
.cookie-switch input{opacity:0;width:0;height:0;}
.cookie-switch-slider{position:absolute;cursor:pointer;inset:0;background:#cfc7b5;border-radius:24px;transition:background .25s;}
.cookie-switch-slider:before{content:'';position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .25s;}
.cookie-switch input:checked + .cookie-switch-slider{background:#381B39;}
.cookie-switch input:checked + .cookie-switch-slider:before{transform:translateX(18px);}
.cookie-modal-actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end;flex-wrap:wrap;}
.cookie-prefs-fab{position:fixed;left:14px;bottom:14px;z-index:80;width:44px;height:44px;border-radius:50%;background:#f2c97b;border:none;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 8px 24px -6px rgba(0,0,0,.25);transition:transform .25s;}
.cookie-prefs-fab.is-visible{display:flex;}
.cookie-prefs-fab:hover{transform:scale(1.08);}
.cookie-prefs-fab svg{width:22px;height:22px;color:#0f172a;}
@media (max-width:520px){.cookie-banner-inner{flex-direction:column;align-items:stretch;}.cookie-banner-actions{justify-content:flex-end;flex-wrap:wrap;}.cookie-btn{flex:0 1 auto;}.cookie-modal-actions{justify-content:flex-end;}}

/* Responsive utilitare lipsă din app.css purjat (sm=640) */
.items-stretch{align-items:stretch;}
@media (min-width:640px){
  .sm\:w-auto{width:auto;}
  .sm\:h-auto{height:auto;}
  .sm\:mt-0{margin-top:0;}
  .sm\:mx-0{margin-left:0;margin-right:0;}
  .sm\:aspect-square{aspect-ratio:1/1;}
  .sm\:text-left{text-align:left;}
  .sm\:flex-col{flex-direction:column;}
}