/* ===================================================================
   FURGO — DESIGN SYSTEM v3: PURE NEUMORPHISM
   Sumber: Design System Agent Instructions (colors/typography/layout/
   radius/shadows/borders/buttons/cards).
   Prinsip inti: SELURUH permukaan (page, header, card, tombol, sidebar)
   memakai satu warna latar yang sama (neutral-primary-soft). Kedalaman
   & pemisahan dibentuk murni lewat shadow dua-arah (terang atas-kiri,
   gelap bawah-kanan), bukan lewat warna latar berbeda.

   Catatan: dark mode TIDAK diaktifkan (prefers-color-scheme) karena
   brief awal proyek FurGo secara eksplisit meminta tema warna terang
   saja. Token warna tetap disiapkan sebagai CSS variable agar mudah
   diaktifkan nanti bila dibutuhkan.
   =================================================================== */

:root{
	/* ---------------- COLOR TOKENS (colors.md) ---------------- */
	--neutral-primary-soft:#ECF0F3;   /* satu-satunya warna latar untuk SELURUH UI */
	--neutral-primary:#F5F7F9;        /* dipakai khusus untuk input (inputs.md) */

	--heading:#31344B;
	--body:#44476A;
	--body-subtle:#66799E;
	--color-brand:#128759;
	--color-secondary:#389DC6;
	--fg-disabled:#93A5BE;

	/* Varian teks-aman: fg-brand mentah (#128759) di atas neutral-primary-soft
	   hanya ±4:1 (lolos UI/ikon/large text, belum lolos teks kecil 4.5:1 AA).
	   fg-brand-strong dipakai khusus untuk teks/label/tombol kecil. */
	--fg-brand:var(--color-brand);
	--fg-brand-strong:#0d6b44;

	/* Ramai netral tambahan (dipakai terbatas: hover chip, badge alternatif,
	   bukan untuk permukaan struktural besar — supaya prinsip "satu warna
	   latar" pada card/button/sidebar tetap terjaga) */
	--neutral-secondary-soft:#e2e7ec;
	--neutral-secondary-medium:#d3dae2;
	--neutral-tertiary-soft:#d8dee6;
	--neutral-tertiary-medium:#c7d0da;
	--neutral-quaternary:#b7c2cf;

	--border-default:#d7dee6;
	--border-default-medium:#c7d0da;
	--border-default-strong:#aeb9c6;
	--border-light:#e2e7ec;
	--border-buffer:var(--neutral-primary-soft);

	--brand-softer:#e3f3ec;
	--brand-soft:#cbeadd;
	--border-brand-subtle:#9ed9be;
	--border-brand:var(--color-brand);

	--danger:#d64545;
	--danger-soft:#fbe7e7;
	--danger-medium:#f5cbcb;
	--border-danger-subtle:#efafaf;
	--border-danger:var(--danger);
	--fg-danger:var(--danger);
	--fg-danger-strong:#a82f2f;

	--success:var(--color-brand);
	--success-soft:#e3f3ec;
	--success-medium:#cbeadd;
	--border-success-subtle:#9ed9be;
	--fg-success:var(--success);
	--fg-success-strong:#0d6b44;

	--warning:#f5a524;
	--warning-soft:#fdf1de;
	--warning-medium:#fae3b8;
	--border-warning-subtle:#f0cc8c;
	--fg-warning:#8a5a0a;

	--dark:#31344b;
	--dark-strong:#23253a;
	--disabled-bg:#dde2e8;

	/* ---------------- TYPOGRAPHY (typography.md) ---------------- */
	--font-heading:'Nunito Sans', system-ui, sans-serif;
	--font-body:'Nunito Sans', system-ui, sans-serif;

	/* ---------------- RADIUS (radius.md) ---------------- */
	--radius-base:8px;      /* buttons, cards, inputs, modals, sections */
	--radius-default:6px;   /* badges, tooltips, dropdown items, small controls */
	--radius-sm:2px;        /* checkboxes, tiny elements */
	--radius-full:9999px;   /* pills, avatars, toggles, dots */

	/* ---------------- SHADOWS (shadows.md) — dual-direction, terhadap #ECF0F3 ---------------- */
	--shadow-2xs: 1px 1px 2px #b8b9be, -1px -1px 2px #ffffff;
	--shadow-xs:  2px 2px 4px #b8b9be, -2px -2px 4px #ffffff;
	--shadow-sm:  3px 3px 6px #b8b9be, -3px -3px 6px #ffffff;
	--shadow-md:  6px 6px 12px #b8b9be, -6px -6px 12px #ffffff;
	--shadow-lg:  8px 8px 16px #b8b9be, -8px -8px 16px #ffffff;
	--shadow-xl:  10px 10px 20px #b8b9be, -10px -10px 20px #ffffff;
	--shadow-2xl: 12px 12px 24px #b8b9be, -12px -12px 24px #ffffff;
	--shadow-inset: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #ffffff;

	/* ---------------- LAYOUT & SPACING (layout.md / content.md) ---------------- */
	--container-max:1140px;
	--container-padding:24px;
	--content-narrow:768px;
	--section-padding-desktop:96px;
	--section-padding-tablet:48px;
	--section-padding-mobile:32px;
	--gap-card:24px;
	--gap-wide:32px;
	--gap-row:16px;

	--ease: cubic-bezier(.4,0,.2,1);
	--nav-height:76px;
}

/* ---------------- RESET DASAR ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	font-family:var(--font-body);
	font-weight:400;
	color:var(--body);
	background:var(--neutral-primary-soft);
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; }
p{ margin:0 0 1em; }

@media (prefers-reduced-motion: reduce){
	*,*::before,*::after{
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
		scroll-behavior:auto !important;
	}
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
	outline:none;
	box-shadow:0 0 0 2px var(--neutral-primary-soft), 0 0 0 4px var(--color-brand);
	border-radius:var(--radius-sm);
}

.skip-link{
	position:absolute; left:-999px; top:0; z-index:9999;
	background:var(--dark); color:#fff; padding:12px 20px; border-radius:0 0 var(--radius-base) 0;
}
.skip-link:focus{ left:0; }

.container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--container-padding); }
.content-narrow{ max-width:var(--content-narrow); }

/* ---------------- HEADING SCALE (typography.md — desktop-first) ---------------- */
h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading); font-weight:600; color:var(--heading); margin:0 0 16px; }
h1{ font-size:28px; line-height:1.15; }
h2{ font-size:24px; line-height:1.2; }
h3{ font-size:20px; line-height:1.25; }
h4{ font-size:18px; line-height:1.3; }
h5{ font-size:16px; line-height:1.5; }
h6{ font-size:14px; line-height:1.3; }

@media (min-width:768px){
	h1{ font-size:36px; }
	h2{ font-size:30px; }
	h3{ font-size:24px; }
	h4{ font-size:22px; }
	h5{ font-size:18px; }
}
@media (min-width:1024px){
	h1{ font-size:48px; letter-spacing:-0.5px; margin-bottom:24px; }
	h2{ font-size:36px; }
	h3{ font-size:28px; }
	h4{ font-size:24px; }
	h5{ font-size:20px; }
	h6{ font-size:16px; }
}

.section-title{ /* alias h2 pada tiap section */ }
.section-eyebrow{
	font-family:var(--font-heading); font-weight:500; font-size:12px; letter-spacing:.4px;
	text-transform:uppercase; color:var(--fg-brand-strong); margin-bottom:12px;
}
.cta-box .section-eyebrow{ margin:0 auto 12px; width:fit-content; }
.section-eyebrow--on-accent{ color:#fff; opacity:.85; }
.section-desc{ max-width:70ch; color:var(--body); font-size:20px; line-height:1.7; }
@media (max-width:767px){ .section-desc{ font-size:17px; } }

/* ---------------- NEUMORPHIC PRIMITIVES ---------------- */
.neu-raised{ background:var(--neutral-primary-soft); border-radius:var(--radius-base); box-shadow:var(--shadow-md); }
.neu-inset{ background:var(--neutral-primary-soft); border-radius:var(--radius-base); box-shadow:var(--shadow-inset); }

/* ===================================================================
   BUTTONS (buttons.md) — satu latar untuk semua, varian dibedakan
   HANYA lewat warna teks
   =================================================================== */
.btn{
	display:inline-flex; align-items:center; gap:8px; justify-content:center;
	padding:12px 24px; border-radius:var(--radius-base); font-family:var(--font-heading);
	font-weight:500; font-size:16px; border:1px solid transparent;
	background:var(--neutral-primary-soft); color:var(--heading);
	box-shadow:var(--shadow-sm);
	transition:all 200ms ease-in-out;
}
.btn:hover{ box-shadow:var(--shadow-md); }
.btn:active{ box-shadow:var(--shadow-inset); }

.btn--accent{ color:var(--fg-brand-strong); }   /* Brand / primary */
.btn--dark{ background:var(--dark); color:#fff; box-shadow:none; }
.btn--dark:hover{ background:var(--dark-strong); }
.btn--dark:active{ box-shadow:var(--shadow-inset); }
.btn--outline{ background:transparent; color:var(--fg-brand-strong); box-shadow:none; border:1px solid var(--border-brand-subtle); margin-top:8px; }
.btn--outline:hover{ box-shadow:var(--shadow-sm); }

/* Ghost — dipakai di atas foto hero, satu-satunya pengecualian dari aturan
   "latar sama dengan parent" karena berada di atas gambar, bukan permukaan flat */
.btn--ghost{ background:rgba(255,255,255,.14); color:#fff; box-shadow:none; border:1.5px solid rgba(255,255,255,.7); }
.btn--ghost:hover{ background:rgba(255,255,255,.24); }

/* ===================================================================
   ROUTE LINE — elemen ciri khas: mengikuti scroll naik & turun
   =================================================================== */
.furgo-route-line{
	position:fixed; top:0; right:18px; height:100vh; width:4px;
	background:var(--neutral-tertiary-soft); z-index:60; display:none; border-radius:var(--radius-full);
}
.furgo-route-line__fill{
	position:absolute; top:0; left:0; width:100%; height:0%;
	background:var(--color-brand); border-radius:var(--radius-full); transition:height .05s linear;
}
.furgo-route-line__marker{
	position:absolute; top:0%; left:50%; transform:translate(-50%,-50%);
	width:34px; height:34px; border-radius:var(--radius-base); background:var(--neutral-primary-soft);
	color:var(--fg-brand-strong); box-shadow:var(--shadow-md);
	display:flex; align-items:center; justify-content:center;
	transition:top .05s linear;
}
.furgo-route-line__marker svg{ width:18px; height:18px; }
@media (min-width:1280px){ .furgo-route-line{ display:block; } }

/* ===================================================================
   HEADER (mengikuti pola sidebars.md: flat default, shadow saat perlu
   penegasan, bukan warna latar berbeda / border tebal)
   =================================================================== */
.site-header{
	position:fixed; top:0; left:0; right:0; z-index:100;
	height:var(--nav-height); background:var(--neutral-primary-soft);
	transform:translateY(0); transition:transform .35s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header.is-scrolled{ box-shadow:var(--shadow-sm); }

.site-header__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--gap-row); }
.site-title{ font-family:var(--font-heading); font-weight:600; font-size:20px; color:var(--heading); }
.custom-logo-link{ height:80px; padding:15px; display:block; }
.custom-logo-link img{ max-height:100%; width:auto; }

.primary-navigation{ display:flex; align-items:center; gap:var(--gap-row); }
.primary-menu{ display:flex; gap:4px; }
.primary-menu a{
	font-family:var(--font-heading); font-weight:500; font-size:14px; color:var(--body);
	padding:10px 16px; border-radius:var(--radius-base); display:inline-block;
	transition:all 150ms ease-in-out;
}
.primary-menu a:hover{ color:var(--heading); box-shadow:var(--shadow-sm); }
.primary-menu li.current-menu-item a{ color:var(--fg-brand-strong); box-shadow:var(--shadow-inset); }
.nav-cta{ padding:10px 20px; font-size:14px; }

.menu-toggle{ display:none; align-items:center; gap:8px; font-family:var(--font-heading); font-weight:600; font-size:14px; color:var(--heading); }
.menu-toggle__icon{ display:inline-flex; flex-direction:column; gap:4px; width:20px; }
.menu-toggle__icon span{ height:2px; background:var(--heading); border-radius:2px; transition:transform .25s var(--ease), opacity .2s var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:900px){
	.menu-toggle{ display:inline-flex; }
	.primary-navigation{
		position:fixed; inset:var(--nav-height) 0 0 0; background:var(--neutral-primary-soft);
		flex-direction:column; align-items:stretch; justify-content:flex-start; padding:32px 24px;
		transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
	}
	.primary-navigation.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
	.primary-menu{ flex-direction:column; gap:6px; }
	.primary-menu a{ display:block; padding:14px 16px; font-size:16px; }
	.nav-cta{ margin-top:16px; width:100%; }
}

/* ===================================================================
   HERO SLIDESHOW (SwiperJS) — pengecualian neumorphism (di atas foto,
   butuh overlay solid agar teks tetap terbaca, bukan permukaan flat)
   =================================================================== */
.hero{ position:relative; height:82vh; min-height:480px; overflow:hidden; }
.hero-slide{ position:relative; height:100%; }
.hero-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-slide__placeholder{ position:absolute; inset:0; background:linear-gradient(135deg, var(--brand-softer), var(--neutral-primary-soft)); }
.hero-slide__overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(35,37,58,.62) 0%, rgba(35,37,58,.2) 55%, rgba(35,37,58,.05) 100%); }
.hero-slide__content{ position:absolute; left:0; right:0; bottom:12%; color:#fff; max-width:640px; z-index:2; text-align:center; margin:0 auto; }
.hero-slide__title{ color:#fff; font-size:clamp(28px,4.4vw,48px); letter-spacing:-0.3px; }
.hero-slide__text{ font-size:17px; opacity:.92; }
.hero-slide__actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; justify-content:center; }

.swiper-wrapper{ height:100%; }

.hero-controls{ position:absolute; left:0; right:0; bottom:24px; z-index:3; display:flex; align-items:center; justify-content:center; gap:16px; }
.hero-arrow{ width:38px; height:38px; border-radius:var(--radius-base); background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.5); font-size:1rem; }
.hero-arrow:hover{ background:rgba(255,255,255,.32); }
.hero-pagination{ position:relative !important; display:flex; align-items:center; gap:8px; width:auto !important; }
.hero-pagination .swiper-pagination-bullet{
	width:8px; height:8px; border-radius:var(--radius-full); background:rgba(255,255,255,.5); opacity:1; margin:0; transition:transform .2s, background .2s;
}
.hero-pagination .swiper-pagination-bullet-active{ background:#fff; transform:scale(1.2); }

@media (max-width:600px){ .hero{ height:74vh; } }

/* ===================================================================
   CONTINUOUS PARTNER LOGO SLIDER (SwiperJS)
   =================================================================== */
.section--partners .container{ margin-bottom:32px; }
.partner-swiper{ overflow:hidden; padding:8px 0; position:relative; }
.partner-swiper .swiper-wrapper{ transition-timing-function:linear !important; }
.partner-slide{ width:auto; display:flex; align-items:center; justify-content:center; }
.partner-slide img{
	height:40px; width:auto; max-width:140px; object-fit:contain;
	filter:grayscale(1) opacity(.6); transition:filter .2s ease-in-out;
}
.partner-slide:hover img{ filter:grayscale(0) opacity(1); }
/* Fade tepi kiri-kanan agar transisi loop tidak terlihat terpotong */
.partner-swiper::before, .partner-swiper::after{
	content:''; position:absolute; top:0; bottom:0; width:64px; z-index:2; pointer-events:none;
}
.partner-swiper::before{ left:0; background:linear-gradient(to right, var(--neutral-primary-soft), transparent); }
.partner-swiper::after{ right:0; background:linear-gradient(to left, var(--neutral-primary-soft), transparent); }

/* ===================================================================
   SECTION (layout.md: 96px desktop / 48px tablet / 32px mobile)
   =================================================================== */
.section{ padding:var(--section-padding-mobile) 0; }
@media (min-width:768px){ .section{ padding:var(--section-padding-tablet) 0; } }
@media (min-width:1024px){ .section{ padding:var(--section-padding-desktop) 0; } }

/* Prinsip pure neumorphism: TIDAK ada section dengan warna latar berbeda —
   semua sama dengan neutral-primary-soft, kedalaman lewat shadow saja. */
.section--muted{ background:var(--neutral-primary-soft); }
.section--cta{ background:var(--dark); }

.page-header{ padding-top:calc(var(--nav-height) + 40px); }
.page-intro{ margin-top:16px; color:var(--body); font-size:17px; line-height:1.7; }
.page-intro p:last-child{ margin-bottom:0; }

[data-reveal]{ opacity:1; }
[data-reveal-fade]{
	opacity:0; transform:translateY(12px);
	transition:opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal-fade].is-visible{ opacity:1; transform:translateY(0); }

/* ---------------- INSTAGRAM ---------------- */
.instagram-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap-row); margin:var(--gap-wide) 0; }
.instagram-item{
	position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius-base);
	box-shadow:var(--shadow-sm);
}
.instagram-item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.instagram-item:hover{ box-shadow:var(--shadow-md); }
.instagram-item:hover img{ transform:scale(1.06); }
@media (max-width:900px){ .instagram-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .instagram-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===================================================================
   CARDS (cards.md) — latar sama persis dengan halaman, border tipis
   sebagai penegas tepi, shadow-md untuk kartu statis
   =================================================================== */
.article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-card); margin:var(--gap-wide) 0; }
.article-card{
	background:var(--neutral-primary-soft); border:1px solid var(--border-default);
	border-radius:var(--radius-base); overflow:hidden;
	box-shadow:var(--shadow-sm);
	transition:box-shadow .2s ease-in-out, transform .2s ease-in-out;
}
.article-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.article-card:active{ box-shadow:var(--shadow-inset); }
.article-card__thumb{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--brand-softer); }
.article-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.article-card__placeholder{ width:100%; height:100%; background:linear-gradient(135deg,var(--brand-softer),var(--neutral-primary-soft)); }
.article-card__body{ padding:20px; }
.article-card__date{ font-size:12px; font-weight:500; letter-spacing:.4px; color:var(--body-subtle); margin-bottom:8px; }
.article-card__title{ font-size:18px; margin-bottom:8px; }
.article-card__title a:hover{ color:var(--fg-brand-strong); }
.article-card__excerpt{ color:var(--body); font-size:15px; }
.article-card__link{ font-family:var(--font-heading); font-weight:500; color:var(--fg-brand-strong); font-size:14px; }
@media (max-width:900px){ .article-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .article-grid{ grid-template-columns:1fr; } }

/* ---------------- TESTIMONIAL ---------------- */
.testimonial-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-card); margin-top:var(--gap-wide); }
.testimonial-card{
	background:var(--neutral-primary-soft); border:1px solid var(--border-default);
	border-radius:var(--radius-base); padding:24px;
	box-shadow:var(--shadow-md);
	display:flex; flex-direction:column; gap:16px;
}
.testimonial-card__text{ font-size:15px; color:var(--body); flex:1; }
.testimonial-card__author{ display:flex; align-items:center; gap:10px; }
.testimonial-card__author img{ width:40px; height:40px; border-radius:var(--radius-base); object-fit:cover; }
.testimonial-card__avatar-fallback{
	width:40px; height:40px; border-radius:var(--radius-base); background:var(--neutral-primary-soft); color:var(--fg-brand-strong);
	box-shadow:var(--shadow-inset);
	display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:600;
}
.testimonial-card__name{ font-weight:600; margin:0; font-family:var(--font-heading); color:var(--heading); font-size:14px; }
.testimonial-card__pet{ margin:0; color:var(--body-subtle); font-size:13px; }
@media (max-width:900px){ .testimonial-track{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .testimonial-track{ grid-template-columns:1fr; } }

/* ---------------- CTA BOOKING ---------------- */
.cta-box{ text-align:center; max-width:680px; }
.cta-box__title{ color:#fff; font-size:clamp(24px,2.8vw,32px); }
.cta-box__text{ color:rgba(255,255,255,.72); margin:0 auto 24px; }

/* ---------------- KONTAK (list per lists.md) ---------------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--gap-wide); align-items:start; }
.contact-list{ margin-top:24px; display:flex; flex-direction:column; gap:16px; }
.contact-list li{ display:flex; flex-direction:column; gap:2px; border-bottom:1px solid var(--border-default); padding-bottom:8px; }
.contact-list__label{ font-family:var(--font-heading); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--body-subtle); }
.contact-list a:hover{ color:var(--fg-brand-strong); }
.contact-card{
	background:var(--neutral-primary-soft); border:1px solid var(--border-default);
	border-radius:var(--radius-base); padding:32px;
	box-shadow:var(--shadow-lg);
}
.contact-card h3{ font-size:20px; }

@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------------- STEP LIST (Tentang) ---------------- */
.step-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-card); margin-top:var(--gap-wide); }
.step-item{
	background:var(--neutral-primary-soft); border:1px solid var(--border-default);
	border-radius:var(--radius-base); padding:24px; box-shadow:var(--shadow-sm);
}
.step-item__number{
	display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-base);
	background:var(--neutral-primary-soft); color:var(--fg-brand-strong);
	box-shadow:var(--shadow-inset);
	font-family:var(--font-heading); font-weight:600; margin-bottom:12px;
}
@media (max-width:900px){ .step-list{ grid-template-columns:1fr; } }

.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-card); margin-top:var(--gap-wide); }
.trust-item{
	background:var(--neutral-primary-soft); border:1px solid var(--border-default);
	border-radius:var(--radius-base); padding:20px; box-shadow:var(--shadow-sm);
}
@media (max-width:900px){ .trust-grid{ grid-template-columns:1fr; } }

/* ---------------- TARIF ---------------- */
.tarif-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:var(--gap-wide); }
.tarif-card{
	background:var(--neutral-primary-soft); border-radius:var(--radius-base); padding:20px 12px; text-align:center;
	box-shadow:var(--shadow-inset);
}
.tarif-card h3{ font-size:24px; color:var(--fg-brand-strong); margin-bottom:4px; }
.tarif-card p{ font-size:13px; color:var(--body-subtle); margin:0; }
.tarif-note{ font-size:13px; color:var(--body-subtle); margin-top:16px; }
.tarif-highlight{
	background:var(--neutral-primary-soft); border:1px solid var(--border-brand-subtle); border-radius:var(--radius-base);
	padding:24px; margin-top:16px; max-width:640px; box-shadow:var(--shadow-md);
}
.tarif-highlight h3{ color:var(--fg-brand-strong); font-size:18px; }
@media (max-width:900px){ .tarif-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .tarif-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------------- SINGLE ARTIKEL ---------------- */
.single-article__meta{ color:var(--body-subtle); font-size:14px; }
.single-article__cover{ margin-bottom:40px; border-radius:var(--radius-base); overflow:hidden; box-shadow:var(--shadow-md); }
.single-article__content{ font-size:16px; line-height:1.7; }
.single-article__content h2{ margin-top:1.6em; }
.single-article__content img{ border-radius:var(--radius-base); margin:1.4em 0; }
.single-article__content a{ color:var(--fg-brand-strong); text-decoration:underline; text-underline-offset:3px; }
.single-article__content a:hover{ text-decoration:none; }

/* ---------------- FOOTER ---------------- */
.site-footer{ background:var(--neutral-primary-soft); padding-top:var(--gap-wide); box-shadow:var(--shadow-inset); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--gap-wide); padding-bottom:24px; align-items:start; }
.footer-tagline{ font-family:var(--font-heading); font-weight:600; margin-top:8px; color:var(--heading); }
.footer-area{ color:var(--body-subtle); font-size:14px; }
.footer-social{ display:flex; height:100%; align-items:self-start !important; justify-content:end; }
.footer-social__row{ display:flex; align-items:center; gap:12px; }
.footer-social__icon{
	display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
	border-radius:var(--radius-base); background:var(--neutral-primary-soft); color:var(--body);
	box-shadow:var(--shadow-sm); transition:box-shadow .2s ease-in-out, color .2s ease-in-out;
}
.footer-social__icon svg{ width:18px; height:18px; }
.footer-social__icon:hover{ box-shadow:var(--shadow-md); color:var(--fg-brand-strong); }
.footer-social__icon:active{ box-shadow:var(--shadow-inset); }
.footer-bottom{ border-top:1px solid var(--border-default); padding:16px 0; text-align:center; font-size:13px; color:var(--body-subtle); }
@media (max-width:600px){
	.footer-grid{ grid-template-columns:1fr; text-align:center; }
	.footer-brand img, .footer-brand .custom-logo-link{ margin-left:auto; margin-right:auto; }
	.footer-social{ justify-content:center; margin-top:8px; }
	.footer-social__row{ justify-content:center; }
}

/* ---------------- MOBILE STICKY CTA ---------------- */
.mobile-cta-float{
	position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:90;
	display:none; align-items:center; gap:8px; background:var(--neutral-primary-soft); color:var(--fg-brand-strong);
	padding:12px 20px; border-radius:var(--radius-base); font-family:var(--font-heading); font-weight:600; font-size:14px;
	box-shadow:var(--shadow-lg);
	transition:transform .25s var(--ease), opacity .25s var(--ease), box-shadow .2s ease-in-out;
}
.mobile-cta-float:active{ box-shadow:var(--shadow-inset); }
.mobile-cta-float svg{ width:18px; height:18px; }
.mobile-cta-float.is-hidden{ transform:translateX(-50%) translateY(140%); opacity:0; }
@media (max-width:900px){ .mobile-cta-float{ display:inline-flex; } }