/* ═══════════════════════════════════════════
   HANA MALINIČ — Design System v2
   hanamalinic.com · 2026
   Brand: #1B3D2F · #C8A96E · #F5F3EF · #333
   ═══════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --green:#1B3D2F;--green-mid:#2D5E4A;--green-dark:#142e23;
  --gold:#C8A96E;--gold-dark:#b8954f;--gold-light:#d4bc8a;
  --cream:#F5F3EF;--cream-dark:#ece8e0;--white:#FFFFFF;
  --dark:#333333;--dark-light:#666666;
  --heading:Georgia,'Cormorant Garamond','Times New Roman',serif;
  --body:'DM Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --shadow-sm:0 4px 24px rgba(27,61,47,.05);
  --shadow-md:0 16px 48px rgba(27,61,47,.1);
  --shadow-lg:0 24px 64px rgba(27,61,47,.12);
  --radius:12px;--radius-sm:7px;
}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--dark);font-size:18px;line-height:1.65;background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--heading);color:var(--green);font-weight:700;line-height:1.15}
h1{font-size:clamp(2.8rem,5.5vw,3.5rem);letter-spacing:-.02em}
h2{font-size:clamp(2.2rem,4.5vw,2.65rem);letter-spacing:-.01em}
h3{font-size:clamp(1.4rem,2.5vw,1.65rem)}
h4{font-size:1.25rem}
p{margin-bottom:1rem}p:last-child{margin-bottom:0}
a{color:var(--green)}img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto}
.container-sm{max-width:780px;margin:0 auto}
.section{padding:6rem 2rem}
.label{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:block}
.text-muted{color:var(--dark-light)}.text-center{text-align:center}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}.mb-3{margin-bottom:3rem}.mt-2{margin-top:2rem}
.icon-box{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem}
.icon-box--green{background:rgba(27,61,47,.08)}.icon-box--gold{background:rgba(200,169,110,.15)}
.icon-box svg{width:24px;height:24px;stroke:var(--green);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* ── BUTTONS ─── */
.btn{display:inline-block;padding:14px 28px;border-radius:var(--radius-sm);font-family:var(--body);font-size:1rem;font-weight:600;letter-spacing:.02em;text-decoration:none;transition:all .3s ease;cursor:pointer;border:none}
.btn-primary{background:var(--green);color:var(--white)}
.btn-primary:hover{background:var(--gold);color:var(--green);transform:translateY(-2px);box-shadow:0 8px 24px rgba(27,61,47,.18)}
.btn-secondary{background:transparent;color:var(--green);border:2px solid var(--green)}
.btn-secondary:hover{background:var(--green);color:var(--white)}
.btn-gold{background:var(--gold);color:var(--green)}.btn-gold:hover{background:var(--gold-dark);color:var(--white);transform:translateY(-2px)}
.btn-white{background:var(--white);color:var(--green)}.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-sm{padding:10px 20px;font-size:.9rem}
/* ── NAV ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(245,243,239,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(27,61,47,.06);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 2px 24px rgba(27,61,47,.08)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:72px}
.nav-logo{font-family:var(--heading);font-size:1.3rem;font-weight:700;color:var(--green);letter-spacing:-.01em;text-decoration:none}
.nav-logo span{color:var(--gold)}
.nav-links{display:flex;gap:2rem;align-items:center;list-style:none}
.nav-links a{font-size:.92rem;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--dark-light);text-decoration:none;transition:color .25s}
.nav-links a:hover,.nav-links a.active{color:var(--green)}
.nav-cta{background:var(--green);color:var(--white)!important;padding:.55rem 1.4rem;border-radius:var(--radius-sm);font-size:.85rem!important;transition:background .25s,transform .2s}
.nav-cta:hover{background:var(--gold);color:var(--green)!important;transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{width:24px;height:2px;background:var(--green);transition:transform .3s,opacity .3s}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:72px;left:0;right:0;bottom:0;background:rgba(245,243,239,.98);backdrop-filter:blur(20px);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:2rem}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:1.1rem;color:var(--green);text-decoration:none;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
/* ── PAGE HERO ─── */
.page-hero{padding:10rem 2rem 5rem;background:linear-gradient(170deg,var(--cream) 0%,var(--cream-dark) 100%);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-20%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(200,169,110,.1) 0%,transparent 70%);border-radius:50%}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{margin-bottom:1rem}
.page-hero .subtitle{font-size:1.15rem;color:var(--dark-light);max-width:600px;line-height:1.8}
.page-hero.centered{text-align:center}.page-hero.centered .subtitle{margin:0 auto}
/* ── CARDS ─── */
.card{padding:2rem;border-radius:var(--radius);border:1px solid rgba(27,61,47,.08);background:var(--white);transition:all .3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card h3{margin-bottom:.6rem}.card p{color:var(--dark-light);font-size:.95rem}
.card .link{display:inline-block;margin-top:1rem;font-weight:700;font-size:.9rem;color:var(--green);text-decoration:none}
.card .link:hover{color:var(--gold)}
/* ── TIMELINE ─── */
.timeline{position:relative;padding-left:2.5rem}
.timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--gold),var(--cream-dark))}
.timeline-item{position:relative;margin-bottom:2.5rem}
.timeline-item::before{content:'';position:absolute;left:-2.65rem;top:.4rem;width:12px;height:12px;border-radius:50%;background:var(--gold);border:3px solid var(--cream);box-shadow:0 0 0 2px var(--gold)}
.timeline-year{font-family:var(--heading);font-size:1.1rem;font-weight:700;color:var(--green);margin-bottom:.3rem}
.timeline-item p{color:var(--dark-light);font-size:.95rem;margin:0}
/* ── VALUES ─── */
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.value-card{text-align:center;padding:2rem 1.5rem;border-radius:var(--radius);background:var(--white);border:1px solid rgba(27,61,47,.06)}
.value-card h4{margin-bottom:.4rem}.value-card p{font-size:.9rem;color:var(--dark-light)}
/* ── FAQ ─── */
.faq-list{max-width:740px;margin:0 auto}.faq-item{border-bottom:1px solid rgba(27,61,47,.08)}
.faq-question{width:100%;background:none;border:none;padding:1.3rem 0;font-family:var(--body);font-size:1.08rem;font-weight:700;color:var(--green);text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-question::after{content:'+';font-size:1.4rem;font-weight:300;color:var(--gold);transition:transform .3s}
.faq-item.open .faq-question::after{content:'−'}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s}
.faq-item.open .faq-answer{max-height:300px;padding-bottom:1.3rem}
.faq-answer p{color:var(--dark-light);font-size:.95rem;margin:0}
/* ── STEPS ─── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:step}
.step{text-align:center;padding:2rem 1.2rem;counter-increment:step}
.step::before{content:counter(step);font-family:var(--heading);font-size:3rem;font-weight:700;color:var(--cream-dark);display:block;margin-bottom:.5rem}
.step h4{margin-bottom:.4rem}.step p{font-size:.9rem;color:var(--dark-light)}
/* ── BLOG ─── */
.blog-filters{display:flex;gap:.5rem;justify-content:center;margin-bottom:3rem;flex-wrap:wrap}
.filter-btn{padding:.5rem 1.2rem;border-radius:40px;font-family:var(--body);font-size:.88rem;font-weight:700;border:2px solid var(--green);background:transparent;color:var(--green);cursor:pointer;transition:all .25s}
.filter-btn.active,.filter-btn:hover{background:var(--green);color:var(--white)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.blog-card{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(27,61,47,.06);background:var(--white);transition:all .3s}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.blog-card-img{height:200px;background:var(--cream-dark);display:flex;align-items:center;justify-content:center;font-family:var(--heading);color:var(--green);opacity:.15;font-size:2rem}
.blog-card-body{padding:1.5rem}
.blog-card-meta{display:flex;gap:1rem;margin-bottom:.6rem;font-size:.78rem;color:var(--dark-light);text-transform:uppercase;letter-spacing:.06em}
.blog-card-cat{color:var(--gold);font-weight:700}
.blog-card h3{font-size:1.2rem;margin-bottom:.5rem}.blog-card h3 a{text-decoration:none;color:var(--green)}.blog-card h3 a:hover{color:var(--gold)}
.blog-card p{font-size:.92rem;color:var(--dark-light)}
/* ── ARTICLE ─── */
.article-hero{padding:10rem 2rem 3rem;background:linear-gradient(170deg,var(--cream) 0%,var(--cream-dark) 100%)}
.article-meta{display:flex;gap:1.5rem;margin-bottom:1.5rem;font-size:.85rem;color:var(--dark-light);text-transform:uppercase;letter-spacing:.06em}
.article-meta .cat{color:var(--gold);font-weight:700}
.article-body{padding:3rem 2rem 5rem;background:var(--white)}
.article-body .container-sm h2{font-size:1.6rem;margin:2.5rem 0 1rem}
.article-body .container-sm h3{font-size:1.3rem;margin:2rem 0 .8rem}
.article-body .container-sm p{font-size:1.05rem;color:var(--dark);line-height:1.85}
.article-body .container-sm blockquote{margin:2rem 0;padding:1.5rem 2rem;border-left:3px solid var(--gold);background:var(--cream);border-radius:0 var(--radius) var(--radius) 0;font-family:var(--heading);font-size:1.2rem;color:var(--green);font-style:italic}
.article-cta{margin-top:3rem;padding:2.5rem;border-radius:var(--radius);background:var(--cream);text-align:center;border:1px solid rgba(200,169,110,.2)}
.article-cta h3{margin-bottom:.5rem}.article-cta p{color:var(--dark-light);margin-bottom:1.5rem}
/* ── CONTACT ─── */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:4rem}
.form-group{margin-bottom:1.2rem}
.form-group label{display:block;margin-bottom:.4rem;font-size:.9rem;font-weight:700;color:var(--green)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:.85rem 1rem;border-radius:var(--radius-sm);border:2px solid rgba(27,61,47,.12);font-family:var(--body);font-size:.95rem;transition:border-color .25s;background:var(--white)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--green)}
.form-group textarea{resize:vertical;min-height:140px}
.contact-info-card{padding:2rem;border-radius:var(--radius);background:var(--white);border:1px solid rgba(27,61,47,.06);margin-bottom:1.5rem}
.contact-info-card h4{margin-bottom:.5rem}.contact-info-card p{font-size:.95rem;color:var(--dark-light)}
/* ── DARK/GREEN SECTION ─── */
.section-dark{background:var(--green);color:var(--white);position:relative}
.section-dark h2{color:var(--white)}.section-dark p{color:rgba(255,255,255,.65)}.section-dark .label{color:var(--gold)}
.problems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.problem-card{padding:2rem;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.problem-card h4{color:var(--white);margin-bottom:.5rem;font-size:1.1rem}.problem-card p{color:rgba(255,255,255,.55);font-size:.92rem}
/* ── PLATFORM CARDS ─── */
.platform-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.platform-card{padding:2rem;border-radius:var(--radius);background:var(--white);border:2px solid rgba(27,61,47,.08);transition:all .3s}
.platform-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.platform-card h4{margin-bottom:.4rem}.platform-card p{font-size:.92rem;color:var(--dark-light);margin-bottom:.5rem}
.platform-card .link{font-size:.85rem;color:var(--gold);font-weight:700;text-decoration:none}
.coming-soon-badge{display:inline-block;padding:.3rem .9rem;border-radius:20px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(200,169,110,.15);color:var(--gold-dark)}
/* ── FOOTER ─── */
.footer{background:var(--green);color:rgba(255,255,255,.6);padding:4rem 2rem 2rem}
.footer-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand p{font-size:.9rem;line-height:1.7;max-width:280px;margin-top:1rem}
.footer-brand .nav-logo{color:var(--white);display:inline-block}
.footer h4{color:var(--white);font-family:var(--body);font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.2rem}
.footer ul{list-style:none}.footer ul li{margin-bottom:.6rem}
.footer ul a{color:rgba(255,255,255,.55);text-decoration:none;font-size:.92rem;transition:color .25s}
.footer ul a:hover{color:var(--gold)}
.footer-bottom{max-width:1100px;margin:0 auto;padding-top:2rem;display:flex;justify-content:space-between;align-items:center;font-size:.82rem}
.footer-location{font-size:.82rem;color:rgba(255,255,255,.4);margin-top:.5rem}
.footer-socials{display:flex;gap:1rem}
.footer-socials a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);text-decoration:none;font-size:.85rem;transition:all .25s}
.footer-socials a:hover{background:var(--gold);color:var(--green)}
/* ── ANIMATIONS ─── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}
/* ── RESPONSIVE ─── */
@media(max-width:960px){
  .nav-links{display:none}.hamburger{display:flex}
  .values-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .contact-grid{grid-template-columns:1fr}.problems-grid{grid-template-columns:1fr}.platform-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column;gap:1rem;text-align:center}
  [style*="grid-template-columns:0.45fr"],[style*="grid-template-columns:1fr 0.5fr"],
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns:1.2fr 0.8fr"],
  [style*="grid-template-columns: 1fr 1fr"],[style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:1fr auto"]{grid-template-columns:1fr!important}
}
@media(max-width:600px){
  .section{padding:4rem 1.2rem}.page-hero{padding:8rem 1.2rem 3.5rem}
  .values-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}
}