/* =========================
   [CSS:HERO PNG] — SVG kalktı, PNG görsel
   ========================= */
.hero-visual{ background:none; border:0; padding:0; display:flex; align-items:center; justify-content:center }
.hero-img{
  width:100%; height:auto; display:block;
  max-height:min(520px, 70vh); object-fit:contain;
  border-radius:16px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.08));
}
/* Mobilde görseli ortala ve taşmayı önle */
@media (max-width: 960px){
  .hero-img{ max-width:420px; margin:0 auto }
}

/* =========================
   [CSS:VARS] Global değişkenler
   ========================= */
:root{
  --bg:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb; --card:#f8fafc;
  --accent:#12b886; --accent-600:#0ea271; --accent-100:#e6faf3;
  --shadow:0 8px 30px rgba(0,0,0,.06);

  /* Topbar için ek UX değişkenleri */
  --tb-h: 40px;
  --focus: 2px solid #22c55e;
}
html{scroll-behavior:smooth}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--text)}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
section{padding:56px 0}

/* =========================
   [CSS:TOPBAR] Üst bilgi çubuğu (geliştirilmiş)
   ========================= */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--border);
  color:var(--muted);
  /* Sticky istersen aç: */
  /* position: sticky; top: 0; z-index: 60; */
}
.tb{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; height:var(--tb-h); font-size:.92rem;
}
.tb .links{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.tb a{color:var(--muted); text-decoration:none; transition:color .2s ease}
.tb a:hover,
.tb a:focus{color:var(--text); outline:none}
.tb a:focus-visible{outline:var(--focus); outline-offset:2px; border-radius:6px}
.tb .sep{opacity:.5; user-select:none}

/* Dil butonları */
.btn-mini{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:10px; border:1px solid var(--accent);
  background:transparent; color:var(--accent); font-weight:700; cursor:pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .06s ease;
}
.btn-mini:hover{ background:var(--accent-100) }
.btn-mini:active{ transform: translateY(1px) }
.btn-mini[aria-pressed="true"]{
  background:var(--accent-100);
}
.btn-mini:focus{ outline:none }
.btn-mini:focus-visible{ outline:var(--focus); outline-offset:2px }

/* Küçük ekran topbar düzeni */
@media (max-width: 640px){
  .tb{ height:auto; padding-block:8px; align-items:flex-start; flex-direction:column; gap:6px }
  .tb .links{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
}

/* =========================
   [CSS:HEADER] Ana header + navigasyon
   ========================= */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.8)}
.navline{border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:800}
.brand .logo{width:28px;height:28px}
.menu{display:flex; align-items:center; gap:16px}
.menu a{color:var(--text); text-decoration:none; font-weight:600; transition:color .2s ease}
.menu a:hover{color:var(--accent)}
.right{display:flex; align-items:center; gap:10px}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; padding:10px 14px; border-radius:12px; border:0; cursor:pointer; font-weight:700; box-shadow:var(--shadow); transition:background .2s ease}
.btn:hover{background:var(--accent-600)}
.btn-outline{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.btn-outline:hover{background:var(--accent-100)}

/* Mobil menü (hamburger sağda) */
.hamburger{display:none; background:#fff; border:1px solid var(--border); border-radius:10px; padding:8px; cursor:pointer}
.hamburger svg{width:20px;height:20px}

/* =========================
   [CSS:HERO] Hero alanı
   ========================= */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.badge{display:inline-block; border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:.85rem; color:var(--muted); background:#fff}
h1{font-size:clamp(28px, 4.2vw, 46px); line-height:1.15; margin:14px 0}
.lead{font-size:1.08rem; color:var(--muted)}
.cta-row{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}
.hero-visual{background:linear-gradient(135deg, var(--accent-100), #fff); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); padding:12px}
.dna{width:100%; aspect-ratio:1/1; background: radial-gradient(120% 80% at 0% 0%, rgba(18,184,134,.10), transparent), radial-gradient(120% 80% at 100% 100%, rgba(18,184,134,.08), transparent)}

/* =========================
   [CSS:FEATURES] 3 Ana Kutu kartları
   ========================= */
.features{padding:28px 0}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.card h3{margin:10px 0 6px; font-size:1.05rem}
.card p{margin:0; color:var(--muted)}
.icon{width:26px;height:26px;color:var(--accent)}

/* =========================
   [CSS:ABOUT] Hakkımızda iki sütun
   ========================= */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:24px}

/* =========================
   [CSS:PRODUCTS] Ürün grid
   ========================= */
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.prod{background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.prod .img{background:#f3f4f6; aspect-ratio:1/1}
.prod .px{padding:14px}
.badge-mini{display:inline-block; font-size:.75rem; padding:4px 8px; border-radius:999px; background:var(--accent-100); color:var(--accent); border:1px solid var(--accent)}

/* =========================
   [CSS:FRANCHISE] Form stilleri
   ========================= */
form{display:grid; gap:12px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
input, select, textarea{padding:12px 14px; border:1px solid var(--border); border-radius:12px; font:inherit}
textarea{min-height:120px}
.form-help{color:var(--muted); font-size:.92rem}

/* =========================
   [CSS:CONTACT]
   ========================= */
.contact-actions{display:flex; gap:10px; margin-top:8px}

/* =========================
   [Responsive]
   ========================= */
@media (max-width: 960px){
  .menu{position:absolute; left:0; right:0; top:104px; background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow); padding:12px 20px; display:none; flex-direction:column; gap:12px}
  .menu.open{display:flex}
  .hamburger{display:inline-flex}
  .hero .wrap{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr}
}

/* =========================
   [CSS:FOOTER] Detaylı footer
   ========================= */
.footer{border-top:1px solid var(--border); padding:40px 0}
.fgrid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px}
.footer h4{margin:0 0 10px; font-size:1rem}
.footer a{color:var(--muted); text-decoration:none; transition:color .2s ease}
.footer a:hover{color:var(--text)}
.fmeta{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; color:var(--muted); font-size:.92rem}
@media (max-width: 960px){.fgrid{grid-template-columns:1fr 1fr}}

/* =========================
   [Erişilebilirlik ve Tercihler]
   ========================= */
@media (prefers-reduced-motion: reduce){
  .btn, .btn-outline, .btn-mini, .menu a{ transition:none }
}
@media (prefers-contrast: more){
  :root{ --focus: 3px solid #22c55e; }
}
/* Tema: Mocha & Caramel */
:root{
  --bg:#fffaf6;
  --text:#241c15;
  --muted:#7b6a5f;
  --border:#ecd8c9;
  --card:#fff5ea;        /* karamel krema */
  --accent:#b36b2f;      /* karamel */
  --accent-600:#8e4f1f;  /* koyu karamel */
  --accent-100:#fde8d3;  /* açık karamel */
  --shadow:0 8px 30px rgba(139, 76, 31, 0.08);
}
.hero-visual{ background:linear-gradient(135deg, var(--accent-100), #fff); }
.prod .img{ background:#fff1e3; }
<!-- HOTFIX (geçici): Slider kritik CSS -->
<style>
.hc-hero{position:relative;overflow:hidden}.hc-swiper{width:100%;height:clamp(520px,70dvh,780px)}.swiper-slide{position:relative}
.hc-slide-bg{position:absolute;inset:0;background-image:var(--bg),radial-gradient(1200px 1200px at 80% 20%,rgba(255,255,255,.12),transparent 40%),linear-gradient(135deg,#f7efe8 0%,#f6eee8 60%,#f7efe8 100%);background-size:cover,cover,cover;background-position:center,center,center;transform:scale(1.05);transition:transform 1.2s ease;filter:saturate(1.05) contrast(1.02)}
.swiper-slide-active .hc-slide-bg{transform:scale(1)}
.hc-container{position:relative;z-index:2;height:100%;max-width:1200px;margin:0 auto;padding:0 20px;display:grid;place-items:center;isolation:isolate}
.hc-layer{color:#2b2b2b;text-align:left;max-width:680px}
.hc-badge{display:inline-block;font-weight:600;letter-spacing:.06em;background:rgba(0,0,0,.08);padding:8px 12px;border-radius:999px;margin-bottom:10px}
.hc-title{font-size:clamp(36px,5.2vw,64px);line-height:1.05;margin:0 0 18px;color:#222}
.hc-accent{color:#d6722f}
.hc-btn{display:inline-block;background:#e67e22;color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;margin-right:10px}
.hc-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.hc-btn-outline{background:transparent;border:2px solid rgba(0,0,0,.6);color:#222}
.hc-deco{position:absolute;width:clamp(70px,10vw,130px);opacity:.95;filter:drop-shadow(0 10px 20px rgba(0,0,0,.15))}
.hc-deco-1{right:6%;bottom:12%;transform:translateY(20px)}
.hc-deco-2{right:14%;bottom:28%;transform:translateY(30px)}
.swiper-slide .hc-layer{opacity:0;transform:translateY(20px);transition:all .6s ease .15s}
.swiper-slide-active .hc-layer{opacity:1;transform:translateY(0)}
.swiper-slide .hc-deco-1,.swiper-slide .hc-deco-2{transition:transform .9s ease,opacity .9s ease;opacity:0}
.swiper-slide-active .hc-deco-1{transform:translateY(0);opacity:1;transition-delay:.2s}
.swiper-slide-active .hc-deco-2{transform:translateY(0);opacity:1;transition-delay:.35s}
.hc-nav{position:absolute;top:50%;translate:0 -50%;z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.25);border:none;cursor:pointer}
.hc-prev{left:14px}.hc-next{right:14px}
.hc-nav::before{content:"";display:block;width:10px;height:10px;border:2px solid #fff;border-left:0;border-bottom:0;margin:0 auto;rotate:45deg}
.hc-prev::before{transform:translateX(2px) rotate(225deg)}.hc-next::before{transform:translateX(-2px) rotate(45deg)}
.hc-pagination{position:absolute;left:0;right:0;bottom:18px;z-index:3;text-align:center}
.hc-pagination .swiper-pagination-bullet{background:rgba(0,0,0,.35);width:9px;height:9px;opacity:.6}
.hc-pagination .swiper-pagination-bullet-active{background:#000;opacity:.9}
@media (max-width:768px){.hc-deco{display:none}.hc-layer{text-align:left}}
</style>
/* Coffee Features */
.coffee-features {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.cf-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eee7e1;
  box-shadow: 0 8px 28px rgba(57, 35, 21, .06);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.cf-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(57, 35, 21, .10);
  filter: saturate(1.04);
}

.cf-card .icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
}

.cf-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #2b2b2b;
  letter-spacing: .2px;
}

.cf-card p {
  margin: 0;
  color: #58524b;
  line-height: 1.6;
  font-size: .95rem;
}

/* Pastel arkaplanlar (kahve teması) */
.cf-1 { background: linear-gradient(180deg, #fff9f4 0%, #fff 55%); }
.cf-2 { background: linear-gradient(180deg, #f4fbf6 0%, #fff 55%); }
.cf-3 { background: linear-gradient(180deg, #fdf6ee 0%, #fff 55%); }

/* Kart kenarlıkları pastel tonda */
.cf-1 { border-color: #fde7d8; }
.cf-2 { border-color: #e3f1e7; }
.cf-3 { border-color: #f1e2d3; }

/* Mobil uyum */
@media (max-width: 900px) {
  .coffee-features { grid-template-columns: 1fr; }
}
.grid4 { 
  display: grid; 
  gap: 24px; 
  grid-template-columns: repeat(4, minmax(0,1fr)); 
}
@media (max-width: 1200px){ .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .grid4 { grid-template-columns: 1fr; } }

.prod {
  display: flex; 
  flex-direction: column; 
  height: 100%;
  background: #fff; 
  border: 1px solid #eadfd6; 
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(57,35,21,.06);
  overflow: hidden;
  transition: .25s;
}
.prod:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(57,35,21,.12); }

.prod-media { 
  margin: 0; 
  aspect-ratio: 1 / 1;  /* KARE (4:4) */
  width: 100%; 
  overflow: hidden; 
}
.prod-media img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

.prod .px { padding: 18px 20px 24px; }
.prod .badge-mini {
  display:inline-block; 
  padding:6px 12px; 
  border-radius:999px;
  background:#fff4ea; 
  color:#b8622d; 
  border:1px solid #f1dcc9; 
  font-size:.82rem; 
  margin-bottom:10px;
}
.prod h3 { margin:0 0 8px; font-size:1.05rem; color:#2b2b2b; }
.prod p { margin:0; color:#5b5149; line-height:1.55; }
/* === Compact spacing preset (bölümler arası boşlukları azaltır) === */
:root{
  --space-section-sm: 24px;   /* mobil */
  --space-section-lg: 40px;   /* desktop */
}

/* Varsayılan: tüm section'lar sıkı padding, margin yok */
main > section{ 
  margin: 0 !important;
  padding-block: var(--space-section-sm);
}
@media (min-width: 992px){
  main > section{ padding-block: var(--space-section-lg); }
}

/* Slider kendi yüksekliğini yönetiyor: ekstra boşluk verme */
.hc-hero{ margin:0 !important; padding:0 !important; }

/* Sliderdan sonra ilk bölüm iyice yaklaşsın */
.hc-hero + section{ margin-top:0 !important; }

/* Section başlık alanları: alt boşluğu sabitle */
.section-head{ margin: 0 0 12px !important; }

/* Container dış boşluk üretmesin */
.container{ margin:0 auto; padding-inline:16px; }

/* Başlık ve paragraf varsayılan boşluklarını kıs */
h1,h2,h3,h4,h5,h6{ margin:0 0 .5em; }
p{ margin:0 0 .8em; }
p:last-child{ margin-bottom:0; }

/* Kart/set araları daha sıkı */
.grid3,.grid4{ gap: 16px; }
@media (min-width: 992px){
  .grid3,.grid4{ gap: 20px; }
}

/* Ürün kartı içerik boşluğu (bir tık sıkı) */
.prod .px{ padding:14px 16px 18px; }

/* Features kartları: dışarıya ekstra boşluk bırakmasın */
.cf-card{ margin:0; }

/* Bölüm altındaki son öğede artık boşluk kalmasın */
#features .container > *:last-child,
#products .container > *:last-child{ margin-bottom:0; }

/* Küçük ekranlarda daha da yakınlaştırmak istersen (opsiyonel) */
@media (max-width: 576px){
  :root{ --space-section-sm: 18px; }
}
.brand-logo {
  height: 40px;       /* ihtiyaca göre 36px - 48px arası oynatabilirsin */
  width: auto;
  margin-right: 8px;  /* yazıyla araya biraz boşluk */
  display: inline-block;
  vertical-align: middle;
}
/* === ABOUT HERO: 3 görsel yan yana ve sağa yaslı === */
:root{
  --about-illus-size: 160px;
  --about-illus-gap: 20px;
}

.about-hero .wrap{
  display: grid !important;
  grid-template-columns: 1fr auto !important; /* sağ sütun içeriğe göre */
  align-items: center;
  gap: 32px;
}

.about-hero .about-illus{
  justify-self: end !important;       /* grid item'ı sağa hizala */
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center;
  gap: var(--about-illus-gap);
  flex-wrap: nowrap;
  /* önceki süslemeleri sıfırla */
  background: none !important;
  border: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.about-hero .about-illus img{
  width: var(--about-illus-size);
  height: var(--about-illus-size);
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}

/* mobil/tablet: görseller merkezde ve wrap */
@media (max-width: 900px){
  .about-hero .wrap{ grid-template-columns: 1fr !important; }
  .about-hero .about-illus{
    justify-self: center !important;
    justify-content: center !important;
    flex-wrap: wrap;
  }
  .about-hero .about-illus img{
    width: 44vw;
    height: auto;
    aspect-ratio: 1/1;
  }
}

/* küçük yardımcılar */
.sub{ margin:10px 0 6px; font-size:1.1rem; color:#2b2b2b }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
@media (max-width: 960px){ .grid-3{ grid-template-columns:1fr } }

.chart-box h2, .chart-box h3{
  color:#c48f6a;  /* pastel başlık */
  margin:0 0 10px;
}
/* 2 sütun düzeni */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* sağdaki foto */
.about-photo img {
  max-width: 400px;   /* en fazla 400px genişlik */
  width: 100%;        /* alanına göre esnesin */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  display: block;
  margin: 0 auto;
}

/* mobil uyum */
@media (max-width: 768px){
  .grid-2 {
    grid-template-columns: 1fr; /* tek sütun */
  }
  .about-photo {
    text-align: center;
    margin-top: 16px;
  }
}


/* Şirket hakkında görsel */
.about-photo img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  display: block;
  margin: 0 auto;
}

/* Grid ve kart düzeni */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.kp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kp-list li {
  margin: 8px 0;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .about-photo img {
    max-width: 100%;
  }
}
/* === Palette (Pastel) === */
:root{
  --pp-bg:#fffaf6;
  --pp-card:#fff5ea;
  --pp-border:#ecd8c9;
  --pp-text:#2b2b2b;
  --pp-muted:#7b6a5f;
  --pp-accent:#b36b2f;
  --pp-accent-100:#fde8d3;
  --pp-accent-600:#8e4f1f;
  --pp-shadow:0 10px 34px rgba(139,76,31,.08);
}

/* Utilities */
.badge{display:inline-block; padding:6px 10px; border-radius:999px; font-weight:600}
.badge-soft{background:var(--pp-accent-100); color:var(--pp-accent); border:1px solid var(--pp-border)}
.lead{color:var(--pp-muted)}
.muted{color:var(--pp-muted)}
.sm{font-size:.95rem}

/* HERO */
.products-hero{background:linear-gradient(180deg,#fff7ef 0%, #fff 55%); border-bottom:1px solid var(--pp-border); padding:48px 0}
.ph-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.ph-visual{margin:0; border:1px dashed #f1dcc9; border-radius:20px; background:#fff; padding:8px; display:grid; place-items:center}
.ph-visual img{max-width:86%; height:auto; display:block; border-radius:14px; filter:drop-shadow(0 12px 28px rgba(0,0,0,.08))}
.products-hero h1{margin:.35em 0}

/* WHY */
.why{max-width:1100px}
.why-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.why-card{background:#fff; border:1px solid var(--pp-border); border-radius:16px; padding:16px; box-shadow:var(--pp-shadow)}
.why-card .ic{width:24px;height:24px;color:var(--pp-accent); margin-bottom:8px}

/* PRODUCT CARDS */
.prod-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.prod-card{background:#fff; border:1px solid var(--pp-border); border-radius:18px; overflow:hidden; box-shadow:var(--pp-shadow); display:flex; flex-direction:column}
.prod-card .media{margin:0; position:relative; aspect-ratio:1/1; background:#fff1e3}
.prod-card .media img{width:100%; height:100%; object-fit:cover; display:block}
.prod-card .pill{position:absolute; left:12px; top:12px; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--pp-border); color:var(--pp-accent); font-weight:700; font-size:.85rem}
.prod-card .px{padding:16px 16px 18px}
.prod-card h3{margin:0 0 6px}
.prod-card .feat{margin:8px 0 14px; padding-left:18px; color:#51473f}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--pp-accent); color:#fff; padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none; box-shadow:var(--pp-shadow); border:1px solid transparent}
.btn:hover{background:var(--pp-accent-600)}
.btn-soft{background:#fff; color:var(--pp-accent); border-color:var(--pp-accent); }
.btn-soft:hover{background:var(--pp-accent-100)}
.btn-ghost{background:transparent; color:var(--pp-accent); border:1px solid var(--pp-border)}
.btn-ghost:hover{background:var(--pp-accent-100)}

/* BENEFITS */
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.b-card{background:#fff; border:1px solid var(--pp-border); border-radius:14px; padding:16px; box-shadow:var(--pp-shadow)}

/* COMPANY CARD */
.company-card{background:var(--pp-card); border:1px solid var(--pp-border); border-radius:18px; padding:18px; box-shadow:var(--pp-shadow)}
.company-card h2{margin-top:0}
.company-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.kp-list{margin:8px 0 0; padding-left:18px}

/* CTA BAND */
.cta-band{background:linear-gradient(180deg,#fff,#fffaf6); border-top:1px solid var(--pp-border); border-bottom:1px solid var(--pp-border)}
.cta-wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* Responsive */
@media (max-width: 1024px){
  .ph-grid{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .company-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .why-grid{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .cta-wrap{flex-direction:column; text-align:center}
}