/* Marisole Theme — Main Styles */

:root {
  --sand:    #F5EFE4;
  --linen:   #EDE5D8;
  --stone:   #C8B9A2;
  --bark:    #8C7560;
  --dusk:    #4A3F35;
  --alumin:  #A8B0B8;
  --alumin2: #D0D8E0;
  --white:   #FDFAF6;
  --accent:  #7A9E87;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--sand);
  color: var(--dusk);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
}

/* ── NAV ── */
#marisole-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 4rem;
  background: rgba(245,239,228,0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(200,185,162,0.35);
  transition: box-shadow .3s;
}
#marisole-nav.scrolled { box-shadow: 0 2px 20px rgba(74,63,53,0.1); }
.logo, .logo-f {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--dusk);
  text-decoration: none;
}
.logo span, .logo-f span { color: var(--accent); }
.logo img { max-height: 48px; width: auto; }
.nav-links { display: flex; gap: 2.2rem; list-style: none; }
.nav-links a {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bark);
  text-decoration: none;
  transition: color .25s;
}
.nav-links a:hover { color: var(--dusk); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 0.3rem;
}
.nav-toggle span {
  display: block; width: 24px; height: 1.5px;
  background: var(--dusk);
  transition: all .3s;
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

/* ── HERO ── */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}
.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 4rem 5rem 6rem;
}
.hero-tag {
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.8rem;
  display: flex; align-items: center; gap: 0.8rem;
}
.hero-tag::before { content:''; display:block; width:2.5rem; height:1px; background:var(--accent); }
h1 {
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 5.2rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 1.6rem;
}
h1 em { font-style: italic; color: var(--bark); }
.hero-desc {
  font-size: 1rem; line-height: 1.8; color: var(--bark);
  max-width: 38ch; margin-bottom: 2.8rem;
}
.btn-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: none; cursor: pointer;
  transition: all .3s;
}
.btn-dark { background: var(--dusk); color: var(--sand); }
.btn-dark:hover { background: var(--bark); }
.btn-outline { background: transparent; color: var(--dusk); border: 1px solid var(--stone); }
.btn-outline:hover { background: var(--linen); }
.hero-right {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--linen);
  overflow: hidden;
}
.hero-photo {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 2rem;
}
.hero-visual {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.vis-b1,.vis-b2,.vis-b3 { position: absolute; border-radius: 2px; }
.vis-b1 { width:200px; height:260px; top:60px; left:80px; background: linear-gradient(135deg,var(--alumin2),var(--alumin)); box-shadow:4px 8px 32px rgba(74,63,53,.18); }
.vis-b2 { width:120px; height:80px; top:220px; left:200px; background:linear-gradient(135deg,var(--stone),var(--bark)); opacity:.55; }
.vis-b3 { width:90px; height:140px; top:30px; left:230px; background:var(--sand); border:1px solid var(--stone); }
.vis-leg { position:absolute; bottom:30px; left:100px; display:flex; gap:28px; }
.vis-leg span { display:block; width:8px; height:90px; background:linear-gradient(to bottom,var(--alumin),#888fa0); border-radius:1px; }
.vis-label { position:absolute; bottom:1.8rem; right:1.8rem; font-family:var(--serif); font-style:italic; font-size:.9rem; color:var(--bark); opacity:.7; }
.hero-scroll {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--stone);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.hero-scroll::after {
  content:''; display:block; width:1px; height:40px;
  background:linear-gradient(to bottom,var(--stone),transparent);
  animation:scrollpulse 2s ease-in-out infinite;
}
@keyframes scrollpulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ── STRIPE ── */
.stripe {
  background:var(--dusk); color:var(--sand);
  padding:1.2rem 6rem;
  display:flex; align-items:center; justify-content:space-between;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
}
.stripe-items { display:flex; gap:3rem; }
.stripe-item { display:flex; align-items:center; gap:.6rem; }
.stripe-item::before { content:'◆'; font-size:.5rem; color:var(--accent); }

/* ── APIE ── */
.about { display:grid; grid-template-columns:1fr 1fr; min-height:80vh; }
.about-img {
  background:var(--linen);
  display:flex; align-items:center; justify-content:center;
  padding:4rem; position:relative; overflow:hidden;
}
.alu-texture {
  width:300px; height:380px;
  background: repeating-linear-gradient(90deg,rgba(168,176,184,.15) 0px,rgba(168,176,184,.15) 1px,transparent 1px,transparent 12px),
    linear-gradient(160deg,#cdd4da 0%,#a8b0b8 40%,#d8dfe5 70%,#b0b8c0 100%);
  border-radius:3px;
  box-shadow:0 20px 60px rgba(74,63,53,.22);
  position:relative;
}
.alu-texture::after {
  content:'ALUMINIUM\A6082-T6'; white-space:pre;
  position:absolute; bottom:1.5rem; left:1.5rem;
  font-size:.6rem; letter-spacing:.2em;
  color:rgba(74,63,53,.4); font-family:var(--sans);
}
.about-text { padding:5rem 5rem 5rem 4rem; display:flex; flex-direction:column; justify-content:center; }
.section-tag {
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.2rem;
  display:flex; align-items:center; gap:.7rem;
}
.section-tag::before { content:''; display:block; width:1.8rem; height:1px; background:var(--accent); }
h2 { font-family:var(--serif); font-size:clamp(2rem,3.5vw,3.2rem); font-weight:300; line-height:1.15; margin-bottom:1.6rem; }
h2 em { font-style:italic; color:var(--bark); }
.body-text { font-size:.95rem; line-height:1.85; color:var(--bark); margin-bottom:1.4rem; max-width:46ch; }
.stat-row { display:flex; gap:3rem; margin-top:2.8rem; padding-top:2.8rem; border-top:1px solid var(--stone); }
.stat { display:flex; flex-direction:column; gap:.3rem; }
.stat-num { font-family:var(--serif); font-size:2.8rem; font-weight:300; color:var(--dusk); line-height:1; }
.stat-lbl { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); }

/* ── PRIVALUMAI ── */
.features { background:var(--white); padding:6rem; }
.features-header { text-align:center; margin-bottom:4rem; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; }
.feature-card {
  padding:2.5rem 2rem; background:var(--sand);
  border:1px solid transparent; transition:all .35s;
  position:relative; overflow:hidden;
}
.feature-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--alumin));
  transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
.feature-card:hover { border-color:var(--stone); transform:translateY(-4px); }
.feature-card:hover::before { transform:scaleX(1); }
.feat-icon { width:44px; height:44px; margin-bottom:1.5rem; display:flex; align-items:center; justify-content:center; background:var(--linen); border-radius:50%; }
.feat-icon svg { width:20px; height:20px; stroke:var(--bark); fill:none; stroke-width:1.5; }
.feat-title { font-family:var(--serif); font-size:1.3rem; font-weight:600; margin-bottom:.8rem; color:var(--dusk); }
.feat-text { font-size:.88rem; line-height:1.75; color:var(--bark); }

/* ── PRODUKTAI ── */
.products { padding:6rem; background:var(--linen); }
.products-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3.5rem; }
.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.product-card { background:var(--sand); overflow:hidden; cursor:pointer; transition:transform .3s; }
.product-card:hover { transform:translateY(-6px); }
.product-img { height:220px; background:var(--white); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-img img { width:100%; height:100%; object-fit:contain; padding:.8rem; }
.product-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.product-info { padding:1.4rem 1.2rem; }
.product-name { font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--dusk); margin-bottom:.3rem; }
.product-sub { font-size:.72rem; letter-spacing:.12em; color:var(--stone); text-transform:uppercase; }
.products-empty { grid-column:1/-1; text-align:center; padding:3rem; color:var(--bark); }
.products-empty a { color:var(--accent); }

/* ── MEDŽIAGOS ── */
.materials { padding:6rem; background:var(--dusk); color:var(--sand); display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.materials h2 { color:var(--sand); }
.materials h2 em { color:var(--alumin2); }
.materials .body-text { color:rgba(245,239,228,.7); }
.materials .section-tag { color:var(--alumin); }
.materials .section-tag::before { background:var(--alumin); }
.mat-list { list-style:none; margin-top:2rem; display:flex; flex-direction:column; gap:1rem; }
.mat-list li { display:flex; align-items:center; gap:1.2rem; padding:1.1rem 1.4rem; background:rgba(255,255,255,.05); border-left:2px solid var(--alumin); font-size:.88rem; letter-spacing:.05em; color:rgba(245,239,228,.85); }
.mat-list li strong { font-weight:500; color:var(--sand); margin-right:.5rem; }
.alu-specs { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.spec-box { padding:1.8rem; background:rgba(255,255,255,.06); border:1px solid rgba(168,176,184,.2); }
.spec-val { font-family:var(--serif); font-size:2.2rem; font-weight:300; color:var(--alumin2); margin-bottom:.4rem; line-height:1; }
.spec-key { font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(168,176,184,.6); }

/* ── LIETUVA ── */
.lithuania { padding:6rem; background:var(--sand); text-align:center; }
.lt-inner { max-width:700px; margin:0 auto; }
.lt-badge { display:inline-flex; align-items:center; gap:.6rem; background:var(--linen); padding:.5rem 1.2rem; font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bark); margin-bottom:2rem; }
.lt-flag { width:22px; height:14px; display:flex; flex-direction:column; }
.lt-flag span { flex:1; display:block; }
.lt-flag .y { background:#FDB913; }
.lt-flag .g { background:#006A44; }
.lt-flag .r { background:#C1272D; }
.lt-points { display:flex; justify-content:center; gap:4rem; margin-top:3.5rem; flex-wrap:wrap; }
.lt-point { text-align:center; max-width:160px; }
.lt-num { font-family:var(--serif); font-size:3rem; font-weight:300; color:var(--dusk); line-height:1; margin-bottom:.4rem; }
.lt-desc { font-size:.78rem; line-height:1.6; color:var(--bark); }

/* ── KONTAKTAI ── */
.contact { background:var(--bark); color:var(--sand); padding:5rem 6rem; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.contact h2 { color:var(--sand); font-size:clamp(2rem,3vw,2.8rem); }
.contact h2 em { color:var(--alumin2); }
.contact-body { font-size:.95rem; line-height:1.8; color:rgba(245,239,228,.75); margin:1.2rem 0 2rem; }
.contact-details { display:flex; flex-direction:column; gap:.9rem; }
.contact-item { display:flex; align-items:center; gap:1rem; font-size:.85rem; color:rgba(245,239,228,.8); }
.contact-item strong { color:var(--sand); font-weight:500; }
.contact-form { display:flex; flex-direction:column; gap:1rem; }
.contact-form input, .contact-form textarea {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(245,239,228,.2);
  padding:.9rem 1.2rem;
  color:var(--sand); font-family:var(--sans); font-size:.85rem;
  outline:none; resize:none; transition:border-color .25s;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color:rgba(245,239,228,.35); }
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--alumin); }
.contact-form textarea { height:100px; }
.form-message { font-size:.82rem; padding:.5rem 0; min-height:1.5rem; }
.form-message.success { color:#a8d5b5; }
.form-message.error { color:#e0a0a0; }

/* ── FOOTER ── */
#marisole-footer {
  background:var(--dusk); color:rgba(245,239,228,.45);
  padding:2rem 6rem;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.68rem; letter-spacing:.12em;
}
.logo-f { font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--sand); text-decoration:none; }
.logo-f span { color:var(--accent); }

/* ── ANIMATIONS ── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  #marisole-nav { padding:1rem 1.5rem; }
  .nav-links { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(245,239,228,.97); padding:1rem 1.5rem 2rem; gap:1rem; border-bottom:1px solid var(--stone); }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; }
  .hero { grid-template-columns:1fr; }
  .hero-right { min-height:60vw; }
  .hero-left { padding:3rem 2rem; }
  .about, .materials, .contact { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .products-grid { grid-template-columns:1fr 1fr; }
  .stripe { padding:1rem 1.5rem; flex-direction:column; gap:.8rem; }
  .stripe-items { flex-wrap:wrap; gap:1rem; justify-content:center; }
  .features, .products, .lithuania { padding:3rem 2rem; }
  .materials, .contact { padding:3rem 2rem; }
  .about-text { padding:3rem 2rem; }
  #marisole-footer { padding:1.5rem 2rem; flex-direction:column; gap:.5rem; text-align:center; }
  .lt-points { gap:2rem; }
  .products-header { flex-direction:column; align-items:flex-start; gap:1rem; }
  .stat-row { gap:1.5rem; }
}
@media (max-width: 500px) {
  .products-grid { grid-template-columns:1fr; }
  .alu-specs { grid-template-columns:1fr 1fr; }
  h1 { font-size:2.5rem; }
}