/* =========================
	 THEME VARIABLES (SINGLE SOURCE OF TRUTH)
========================= */
:root{
	--ar2j-maroon:#7a0e19;
	--ar2j-black:#111;
	--ar2j-accent:#f59e0b;
	--ar2j-cream:#fff7ec;
	--ar2j-gray:#4b5563;

	--theme-bg:#ffffff;
	--theme-text:#0f172a;

	--header-bg-solid:#ffffff;
	--header-border:rgba(2,6,23,0.08);
	--header-text:#0f172a;
	--header-muted:#475569;
	--header-hover:rgba(2,6,23,0.06);

	--search-bg:#ffffff;
	--search-border:#e2e8f0;
	--search-text:#0f172a;
	--search-placeholder:#94a3b8;

	--strip-bg:#2aa27a;
	--strip-text:#ffffff;

	--catbar-bg:#0f5132;
	--catbar-hover:#0b3f27;
}

/* DARK */
html[data-theme="dark"]{
	--theme-bg:#070708;
	--theme-text:#e6eef6;

	--header-bg-solid:#050b18;
	--header-border:rgba(148,163,184,0.12);
	--header-text:#e2e8f0;
	--header-muted:#94a3b8;
	--header-hover:rgba(148,163,184,0.12);

	--search-bg:rgba(15,23,42,0.9);
	--search-border:rgba(148,163,184,0.18);
	--search-text:#e2e8f0;
	--search-placeholder:#64748b;

	--strip-bg:#0b3f2b;
	--strip-text:#e2e8f0;

	--catbar-bg:#0a2f20;
	--catbar-hover:#0d3a28;
}

/* APPLY */
html,body{
	background:var(--theme-bg);
	color:var(--theme-text);
	transition:background .25s,color .25s;
}

.site-header{
	background:var(--header-bg-solid) !important;
	border-bottom:1px solid var(--header-border);
	color:var(--header-text);
	backdrop-filter:blur(12px);
}

.site-search{
	background:var(--search-bg);
	border:1px solid var(--search-border);
	color:var(--search-text);
}

.line-clamp-1{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; /* legacy */ line-clamp:1; /* standard */ overflow:hidden; }

/* screen-reader only utility */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Cart drawer styles */
.cart-drawer { position:fixed; right:0; top:0; bottom:0; /* ~1/4 viewport width */ width:25vw; min-width:260px; max-width:420px; background:#fff; box-shadow:0 8px 30px rgba(0,0,0,0.2); transform:translateX(110%); transition:transform 360ms cubic-bezier(.2,.8,.2,1); z-index:60; }
.cart-drawer.open { transform: translateX(0); }
.cart-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.6); opacity:0; pointer-events:none; transition:opacity 300ms; z-index:50; }
.cart-backdrop.visible { opacity:1; pointer-events:auto; }
.cart-drawer { display:flex; flex-direction:column; }
.cart-drawer .close-btn { position:absolute; right:10px; top:10px; z-index:65; }
.cart-drawer .drawer-header { position:relative; padding:12px 16px 8px 16px; }
.cart-drawer .drawer-body { flex:1; overflow:auto; padding:12px 16px; }
.cart-item-enter { animation: slideIn 280ms ease forwards; }
@keyframes slideIn { from { transform: translateX(-12px); opacity:0 } to { transform: translateX(0); opacity:1 } }

/* Left ad panel (visible on larger screens) */
.left-ad {
	position:fixed;
	left:0;
	bottom:20px;
	width:25vw;
	min-width:260px;
	max-width:420px;
	height:96px;
	background:linear-gradient(90deg, #fff 0%, #f9fafb 100%);
	border:1px solid rgba(0,0,0,0.06);
	box-shadow:0 6px 20px rgba(0,0,0,0.08);
	border-radius:10px;
	padding:12px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	z-index:45; /* behind drawer (60) and backdrop (50) */
	color:#111;
}
.left-ad .ad-text{ font-weight:600; }
.left-ad .ad-cta{ background:var(--brand-navy); color:#fff; padding:8px 12px; border-radius:8px; text-decoration:none; }

@media(max-width:768px){
	/* on mobile the drawer should be nearly full-screen and hide the left ad */
	.cart-drawer { width:100vw; max-width:100%; }
	.left-ad { display:none; }
}

/* Cart fragment / drawer styles (buttons & subtotal) */
.cart-fragment-root { padding-bottom: 18px; }
.cart-fragment-subtotal { background: transparent; padding-bottom: 6px; }
.cart-btn{ display:inline-block; padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:600; }
.cart-btn-outline{ display:inline-block; padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:600; border:1px solid rgba(0,0,0,0.12); color:#111; background:#fff }
.cart-btn:hover{ opacity:0.95 }
.cart-btn-outline:hover{ background:#f7f7f8 }

/* drawer tab styles */
.drawer-tabs{ display:flex; gap:8px; padding:6px; }
.tab-btn{ flex:1; padding:8px 10px; border-radius:999px; background:transparent; border:1px solid rgba(0,0,0,0.06); cursor:pointer; font-weight:600 }
.tab-btn.active{ background:var(--brand-navy); color:#fff; border-color:transparent }
.tab-content{ display:block }

/* Hero banner styles */
.hero-banner{ position:relative; overflow:hidden }
.hero-slides{ position:relative; width:100%; height:420px }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.03); filter:blur(2px) brightness(0.6); transition:opacity 900ms cubic-bezier(.2,.8,.2,1), transform 900ms cubic-bezier(.2,.8,.2,1), filter 900ms ease; will-change:opacity,transform,filter }
.hero-slide.active{ opacity:1; transform:scale(1); filter:blur(0px) brightness(1); z-index:2 }
.hero-overlay{ position:absolute; inset:0; display:flex; align-items:center; background:linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.35) 100%); z-index:3 }
.hero-cta{ display:inline-block; background:var(--brand-yellow,#FACC15); color:#111; padding:12px 18px; border-radius:10px; font-weight:700; text-decoration:none }
/* hide dots entirely (removed from DOM) */
.hero-dots{ display:none !important }

/* per-slide CTA overlay */
.hero-cta-overlay{ position:absolute; inset:0; pointer-events:none }
.hero-cta-overlay .per-slide-cta{ pointer-events:auto }

/* prev/next arrows removed - controls hidden by design */
.hero-arrow{ display:none }

@media(max-width:768px){
	.hero-slides{ height:260px }
	.hero-slide{ transition:opacity 420ms ease, transform 420ms cubic-bezier(.2,.8,.2,1) }
}

/* Feature panels */
.feature-panel{ min-height:160px; display:flex; flex-direction:column; justify-content:center }
.panel-yellow{ background: linear-gradient(180deg, rgba(250,204,21,0.95), rgba(250,184,0,0.95)); color:#111 }
.panel-dark{ background:linear-gradient(180deg,#111,#222); }
.panel-navy{ background:linear-gradient(180deg,var(--brand-navy,#0f172a), #0b1220); }
.feature-cta{ display:inline-block; margin-top:12px; padding:8px 12px; border-radius:8px; background:#111; color:#fff; text-decoration:none; font-weight:700 }
.feature-cta-light{ background:transparent; border:1px solid rgba(255,255,255,0.12); color:#fff }

@media(max-width:768px){
	.hero-banner img{ height:260px }
}

/* Header styles */
.nav-top-link{ color:var(--brand-navy); text-decoration:none; padding:6px 8px; border-radius:6px }
.nav-top-link:hover{ background:rgba(0,0,0,0.04) }

#topStrip{ letter-spacing:0.2px }

header .feature-btn{ background:transparent; border:none; color:inherit; cursor:pointer; font-weight:600 }
.feature-btn:focus{ outline:2px solid rgba(255,255,255,0.12); outline-offset:2px }

#searchSuggestions{ max-height:320px; overflow:auto }
#searchSuggestions .suggestion{ padding:8px 12px; cursor:pointer }
#searchSuggestions .suggestion:hover{ background:#f7fafc }

/* wishlist toggle state */
.wishlist-active svg{ color:var(--brand-navy); fill:var(--brand-navy) }

@media(max-width:1024px){
	.nav-top-link{ display:none }
	/* small screens: tighten header padding */
	header > div { padding-left:12px; padding-right:12px }
}

/* About page specific styles (scoped) */
.about-page-topbar{ background:#047857; color:#f9fafb; text-align:center; padding:8px 0; font-size:14px }
.about-page .logo-pill{ background:#111827; color:#f9fafb; padding:6px 14px; border-radius:999px; font-weight:700 }
.about-page .page { max-width:1120px; margin:32px auto 64px; padding:0 16px }
.about-page .page-title{ font-size:32px; font-weight:800; margin-bottom:24px }
.about-grid{ display:grid; grid-template-columns:1.1fr 1.1fr; gap:32px; align-items:center; margin-bottom:40px }
.about-image{ border-radius:24px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,0.15) }
.about-image img{ width:100%; height:100%; object-fit:cover; display:block }
.about-heading{ font-size:18px; font-weight:700; color:#047857; margin-bottom:8px; letter-spacing:0.08em; text-transform:uppercase }
.about-main-title{ font-size:26px; font-weight:800; margin-bottom:12px }
.about-text{ font-size:15px; line-height:1.7; color:#4b5563; margin-bottom:16px }
.about-highlight{ background:#ecfdf3; border-radius:16px; padding:12px 16px; font-size:14px; color:#166534; margin-bottom:16px }
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.tag{ font-size:12px; border-radius:999px; padding:4px 10px; border:1px solid #d1fae5; background:#f0fdf4; color:#166534 }
.section-title{ font-size:20px; font-weight:700; margin-bottom:8px }
.section-sub{ font-size:14px; color:#6b7280; margin-bottom:14px }
.process-list{ list-style:none; padding-left:0 }
.process-list li{ font-size:14px; color:#374151; margin-bottom:6px; position:relative; padding-left:18px }
.process-list li::before{ content:'•'; position:absolute; left:4px; top:-1px; color:#047857; font-size:18px }
.stats-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:32px }
.stat-card{ background:#fff; border-radius:12px; padding:24px 18px; box-shadow:0 10px 28px rgba(15,23,42,0.06); border:1px solid rgba(15,23,42,0.04); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transition:transform 200ms ease, box-shadow 200ms ease }
.stat-card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(2,6,23,0.10) }
.stat-number{ font-size:40px; font-weight:900; margin-bottom:8px; color:var(--brand-green); letter-spacing:0.01em }
.stat-label{ font-size:14px; color:#374151; line-height:1.5; max-width:320px }

/* make plus sign smaller and inline */
.stat-plus{ font-size:16px; margin-left:6px; color:var(--brand-green); font-weight:800 }

/* About page fine-tuning */
.about-page{ background:linear-gradient(180deg,#fbfdff,#ffffff); padding-top:18px }
.about-page .page{ margin-top:20px; margin-bottom:48px }
.about-page .about-main-title{ font-size:28px }
.about-page .about-text{ font-size:15px; color:#374151 }
.about-page .stat-number{ color:var(--brand-green) }
.about-page .stat-card{ border:1px solid rgba(2,6,23,0.06); background:#fff }
.about-page .features-grid{ gap:14px }

.about-hero-title{ font-size:40px; line-height:1.02; margin-bottom:12px }
.about-hero-title .accent{ color:var(--brand-green) }

.check-list{ list-style:none; padding:0; margin:18px 0 20px 0 }
.check-list li{ display:flex; align-items:center; gap:12px; padding:10px 0; color:#374151 }
.check-list li::before{ content:''; width:22px; height:22px; display:inline-block; background:linear-gradient(135deg,var(--brand-green), #10B981); border-radius:999px; margin-right:6px; box-shadow:0 6px 18px rgba(16,185,129,0.12); position:relative }
.check-list li::after{ content:'\2713'; position:absolute; left:6px; top:2px; font-weight:700; color:#fff; font-size:12px }

.cta-btn{ display:inline-block; background:var(--brand-green); color:#fff; padding:12px 20px; border-radius:8px; font-weight:800; text-decoration:none }

.assistant-card{ width:100%; max-width:420px; border-radius:18px; padding:20px; background:#fff; color:var(--brand-navy); box-shadow:0 20px 48px rgba(2,6,23,0.10); border:1px solid rgba(15,23,42,0.06) }
.mic-circle{ width:56px; height:56px; border-radius:999px; background:linear-gradient(180deg, #f3f4f6, #fff); display:flex; align-items:center; justify-content:center; margin:0 auto 14px auto; box-shadow:0 6px 18px rgba(2,6,23,0.04) }
.mic-circle svg{ width:20px; height:20px }
.assistant-title{ text-align:center; font-size:18px; font-weight:800; margin-bottom:6px }
.assistant-sub{ text-align:center; color:#4b5563; font-size:14px; margin-bottom:12px }
.start-btn{ display:inline-block; background:var(--brand-orange); color:#fff; padding:10px 16px; border-radius:8px; font-weight:700; text-decoration:none; margin:0 auto 12px; display:block; width:72%; text-align:center }

.try-saying{ background:linear-gradient(180deg,#fbfbfd,#fff); border-radius:10px; padding:10px; margin-top:6px; border:1px solid rgba(15,23,42,0.02) }
.try-saying strong{ display:block; margin-bottom:8px; color:#0f172a }
.try-saying ul{ margin:0; padding-left:18px }
.try-saying li{ margin-bottom:6px; font-size:13px; color:#374151 }

@media(max-width:980px){
	.two-col-layout{ grid-template-columns:1fr }
	.two-col-layout .right-col{ order:2 }
}

/* Reveal / motion utilities */
.reveal{ opacity:0; transform:translateY(18px) scale(.995); transition:opacity 520ms cubic-bezier(.2,.9,.2,1), transform 520ms cubic-bezier(.2,.9,.2,1) }
.reveal.show{ opacity:1; transform:translateY(0) scale(1) }
.reveal-delay-1{ transition-delay:120ms }
.reveal-delay-2{ transition-delay:220ms }
.reveal-delay-3{ transition-delay:320ms }

/* Stat card micro-interaction (consolidated) */
.stat-number.animated{ transition:all 420ms ease; color:var(--brand-navy) }

/* CTA gradient like attachment (yellow -> blue) */
.cta-gradient{ display:inline-block; background:linear-gradient(90deg,#FACC15,#3B82F6); color:#fff; padding:14px 22px; border-radius:14px; font-weight:800; text-decoration:none; box-shadow:0 18px 40px rgba(59,130,246,0.18); }
.cta-gradient .cta-arrow{ margin-left:10px; opacity:0.98 }

/* icon row below CTA */
.icon-row{ display:flex; gap:14px; align-items:flex-start; margin-top:18px; flex-wrap:wrap }
.icon-item{ display:flex; flex-direction:column; align-items:center; width:86px }
.icon-box{ width:52px; height:52px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(2,6,23,0.06); font-size:20px }
.icon-label{ margin-top:8px; font-size:13px; color:#374151; text-align:center }

/* visual stack: image above, testimonial card below (with overlap visual) */
.visual-stack{ display:flex; flex-direction:column; gap:18px; align-items:flex-end }
.visual-photo{ width:420px; border-radius:18px; overflow:hidden; box-shadow:0 34px 80px rgba(2,6,23,0.14); }
.visual-photo img{ width:100%; height:auto; display:block; border-radius:18px }

.testimonial-card{ width:360px; background:#fff; border-radius:18px; padding:18px; box-shadow:0 26px 56px rgba(2,6,23,0.12); margin-top:-26px }
.testimonial-meta{ display:flex; align-items:center; gap:8px; margin-bottom:8px }
.test-name{ font-weight:800; color:#0f172a }
.test-stars{ color:#F59E0B; font-size:16px }
.test-quote{ font-style:italic; color:#374151; margin:0 }

@media(max-width:1000px){
	.visual-photo{ width:280px }
	.testimonial-card{ width:100%; margin-top:0 }
}

/* subtle glass highlight for content blocks */
.about-highlight{ background:linear-gradient(180deg, rgba(236,253,243,0.9), rgba(236,253,243,0.82)); box-shadow:0 8px 28px rgba(2,6,23,0.06) }

/* mobile tweaks */
@media(max-width:640px){
	.about-hero{ height:260px }
	.about-hero .hero-title{ font-size:22px }
}

/* Bubble-like hero card and feature cards polish */
.about-hero-card{ background:linear-gradient(180deg,var(--brand-navy,#07103a), #06102f); color:#fff; border-radius:36px; padding:40px; box-shadow:0 30px 60px rgba(2,6,23,0.25); overflow:hidden }
.about-hero-card .container{ display:flex; gap:28px; align-items:center }
.about-hero-card .hero-left{ flex:1; max-width:720px }
.about-hero-card .hero-right{ flex:0 0 420px; display:flex; align-items:center; justify-content:center }
.about-hero-card .hero-art{ width:360px; height:240px; background:#0b2446; border-radius:18px; display:block }
.hero-title.large{ font-size:48px; line-height:1.02 }
.hero-sub.lead{ color:rgba(255,255,255,0.9); font-size:16px; margin-bottom:18px }
.hero-cta.pill{ display:inline-block; background:#fff; color:var(--brand-navy); padding:14px 22px; border-radius:999px; font-weight:700; box-shadow:0 8px 24px rgba(2,6,23,0.18); text-decoration:none }

.features-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:36px }
.feature-card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; padding:20px; color:#eef6ff; min-height:130px; display:flex; gap:12px; align-items:flex-start; transition:transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease }
.feature-card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(2,6,23,0.18); border-color:rgba(255,255,255,0.04) }
.feature-icon{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.03); color:var(--brand-green); font-size:18px; flex:0 0 44px }
.feature-card h4{ margin:0 0 6px 0; font-size:15px; font-weight:800; color:#fff }
.feature-card p{ margin:0; color:rgba(255,255,255,0.82); font-size:14px; line-height:1.5 }

/* ===== Features: dark rounded panel (scoped to .features-wrap) ===== */
.features-wrap {
	position: relative;
	padding: 56px 16px 64px;
}

.features-wrap .container {
	max-width: 1120px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

/* DUPLICATE THEME VARS REMOVED (consolidated at top) */
/* original Theme / Toggle animations & dark overrides block removed */

.top-strip{ background:var(--top-strip); color:#fff }

/* smooth transitions for theme changes */
html, body, header, .top-strip, .hero-overlay, .features-wrap{ transition: background-color 360ms ease, color 360ms ease, border-color 360ms ease, box-shadow 360ms ease; }

/* icon spin */
.theme-rotate{ display:inline-block; animation:theme-spin 520ms cubic-bezier(.2,.8,.2,1); }
@keyframes theme-spin{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }

/* ripple/splash used on the toggle button when switching themes */
.theme-button{ position:relative; overflow:visible }
.theme-splash{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.2); width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.18); pointer-events:none; z-index:2; animation:theme-splash 600ms cubic-bezier(.2,.8,.2,1); }
@keyframes theme-splash{ 0%{ transform:translate(-50%,-50%) scale(0.2); opacity:0.9 } 60%{ transform:translate(-50%,-50%) scale(4); opacity:0.6 } 100%{ transform:translate(-50%,-50%) scale(8); opacity:0 } }

/* ensure svg icons follow text color */
#themeIcon, #themeIcon *{ fill:currentColor; stroke:currentColor }

/* dark mode overrides */
[data-theme="dark"]{
	--theme-bg: #070708;
	--theme-surface: #0b1220;
	--theme-text: #e6eef6;
	--top-strip: #07241a;
}
[data-theme="dark"] body{ background:var(--theme-bg); color:var(--theme-text); }
[data-theme="dark"] header{ background: rgba(2,6,23,0.78) !important; color:var(--theme-text) }
[data-theme="dark"] .top-strip{ background:var(--top-strip) !important; color:var(--theme-text) }
[data-theme="dark"] .hero-overlay{ background: linear-gradient(90deg, rgba(2,6,23,0.6) 0%, rgba(2,6,23,0.45) 50%, rgba(2,6,23,0.6) 100%) !important }

/* small pressed animation to give tactile feedback */
.theme-pressed{ transform: scale(0.96); transition: transform 160ms cubic-bezier(.2,.9,.2,1); }


/* big rounded dark card back */
.features-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	max-width: 1120px;
	margin: 0 auto;
	border-radius: 32px;
	background: radial-gradient(circle at top left, #0f172a 0, #020617 55%, #000 100%);
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
	z-index: 0;
}

/* heading di dalam dark card */
.features-wrap .section-head {
	position: relative;
	z-index: 1;
	margin-bottom: 24px;
}

.features-wrap .about-heading {
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: #22c55e;
	margin-bottom: 6px;
}

.features-wrap .about-main-title {
	font-size: clamp(22px, 3vw, 26px);
	font-weight: 800;
	color: #f9fafb;
}

/* GRID */
.features-wrap .features-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

/* dark band that holds feature cards */
.features-wrap{ background:linear-gradient(180deg,var(--brand-navy,#07103a), #06102f); padding:44px 0; margin-top:22px; border-radius:18px }
.features-wrap .container{ max-width:1120px; margin:0 auto; padding:0 16px }
.features-wrap .section-head{ color: #d1fae5; margin-bottom:18px }
.features-wrap .section-head .about-main-title{ color:#fff; font-size:22px; margin-top:6px }

/* stats band with white background to contrast */
.stats-band{ background:transparent; padding:20px 0; margin-top:28px }
.stats-band .container{ max-width:1120px; margin:0 auto; padding:0 16px }

/* make feature cards a bit lighter on the dark band */
/* (scoped background removed to prefer global .feature-card rules) */
.feature-card .feature-text h4{ color:#ffffff }
.feature-card .feature-text p{ color:rgba(255,255,255,0.78) }
@media(max-width:1100px){ .features-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } .about-hero-card .hero-right{ display:none } }
@media(max-width:900px){ .features-wrap{ padding:28px 0 } }
@media(max-width:640px){ .features-grid{ grid-template-columns:1fr } .hero-title.large{ font-size:26px } .about-hero-card{ padding:22px; border-radius:20px } }

/* Decorative SVG/art container and floating shapes */

.hero-art svg{ width:100%; height:auto; display:block }
.floating-shape{ position:absolute; border-radius:999px; opacity:0.12; filter:blur(12px); transform:translate3d(0,0,0); max-width:280px; max-height:280px }
.floating-shape.s1{ width:140px; height:140px; right:20px; top:10px; background:linear-gradient(135deg,#7dd3fc,#60a5fa); }
.floating-shape.s2{ width:180px; height:100px; right:80px; bottom:10px; background:linear-gradient(135deg,#fbcfe8,#fda4af); }
.hero-art-wrap{ position:relative; width:360px; height:240px }

/* global safeguard: prevent oversized inline svgs/images from breaking layout */
img, svg { max-width:100%; height:auto }

@media(max-width:1100px){ .hero-art-wrap{ width:300px; height:200px } }

/* subtle floating animation */
@keyframes floaty{ 0%{ transform:translateY(0px) } 50%{ transform:translateY(-10px) } 100%{ transform:translateY(0px) } }
.floating-shape{ animation:floaty 6s ease-in-out infinite }

/* Team section */
.team-band{ padding:36px 0; background:linear-gradient(180deg,#ffffff,#fbfdff); }
.team-band .container{ max-width:1120px; margin:0 auto; padding:0 16px }
team-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:18px }
.team-card{ display:flex; gap:12px; background:#fff; border-radius:12px; padding:12px; align-items:flex-start; box-shadow:0 10px 30px rgba(2,6,23,0.04) }
.team-photo-wrap{ width:120px; height:120px; flex:0 0 120px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#f8fafc,#ffffff) }
.team-photo{ width:100%; height:100%; object-fit:cover; display:block }
.team-meta{ flex:1 }
.team-name{ font-weight:800; font-size:16px; color:#0f172a }
.team-role{ font-size:13px; color:#6b7280; margin-bottom:8px }
.team-bio{ font-size:14px; color:#374151; margin-bottom:8px }
.team-more{ background:transparent; border:none; color:var(--brand-green); font-weight:700; cursor:pointer }
.team-more:active{ transform:translateY(1px) }

/* reduce very small-screen paddings */

/* KUNCI CATBAR BIAR GAK BALIK PUTIH */
.site-header .catbar{
	background: #0f5132 !important;  /* hijau */
	color: #ffffff !important;
	border-bottom: 1px solid rgba(2,6,23,0.08) !important;
}

html[data-theme="dark"] .site-header .catbar{
	background: #0a2f20 !important;  /* hijau gelap */
	color: #ffffff !important;
}

.site-header .catbar .feature-btn{
	color: inherit !important;
	font-weight: 700;
}
@media(max-width:520px){
	.hero-title{ font-size:20px }
	.hero-sub{ font-size:14px }
	.portrait{ width:160px; height:160px }
	.team-photo-wrap{ width:72px; height:72px; flex:0 0 72px }
}

/* ensure placeholders render nicely */
.visual-photo img, .team-photo{ background:linear-gradient(180deg,#f8fafc,#fff); display:block }

/* modal */
.modal{ display:none; position:fixed; inset:0; z-index:80; align-items:center; justify-content:center }
.modal[aria-hidden="false"]{ display:flex }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,0.5) }
.modal-content{ position:relative; background:#fff; border-radius:12px; width:min(880px,96%); max-height:85vh; overflow:auto; z-index:90; padding:20px }
.modal-close{ position:absolute; right:12px; top:12px; border:none; background:transparent; font-size:28px; cursor:pointer }
.modal-body{ display:flex; gap:14px; align-items:flex-start }
.modal-photo{ width:180px; flex:0 0 180px }
.modal-photo img{ width:100%; height:auto; border-radius:8px }
.modal-info{ flex:1 }
.modal-name{ font-size:20px; font-weight:800; margin-bottom:6px }
.modal-role{ color:#6b7280; margin-bottom:10px }
.modal-bio{ color:#374151 }

@media(max-width:900px){
	.team-grid{ grid-template-columns:1fr }
	.team-photo-wrap{ width:96px; height:96px; flex:0 0 96px }
	.modal-body{ flex-direction:column }
	.modal-photo{ width:100%; flex:0 0 auto }
}

/* ===== Modern 'Tentang AR2J' section styles (added) ===== */
.about-hero {
	padding: 72px 0 96px;
	background: radial-gradient(circle at top left, #fef9c3, #f9fafb 40%, #e5e7eb 100%);
}

.about-grid {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.about-copy { max-width: 640px; }

.about-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #f59e0b; font-weight: 600; margin-bottom: 8px; }
.about-title { font-size: 40px; line-height: 1.1; margin: 0 0 16px; color: #111827; }
.about-desc { margin: 0 0 10px; color: #4b5563; line-height: 1.7; font-size: 15px; }

.about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; cursor: pointer; }
.btn-primary { background: #f59e0b; color: #111827; box-shadow: 0 10px 30px rgba(245, 158, 11, 0.35); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(245, 158, 11, 0.45); }
.btn-outline { background: #ffffff; color: #111827; border-color: #e5e7eb; }
.btn-outline:hover { background: #f3f4f6; }

.about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pill { font-size: 11px; padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.03); border: 1px solid rgba(148, 163, 184, 0.5); color: #4b5563; }

/* KANAN */
.about-visual { display: flex; justify-content: center; }

.about-card { background: rgba(15, 23, 42, 0.96); border-radius: 24px; padding: 18px 18px 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.5); max-width: 340px; width: 100%; }

.about-product-mock { background: radial-gradient(circle at top, #f59e0b 0, #111827 55%); border-radius: 18px; padding: 20px; display: flex; justify-content: center; align-items: center; margin-bottom: 14px; }
.about-product-mock img { max-width: 100%; height: auto; display: block; }

.about-stats { display: flex; justify-content: space-between; gap: 12px; }
.stat-item { flex: 1; text-align: left; }
.stat-number { display: block; font-size: 18px; font-weight: 700; color: #f9fafb; }
.stat-label { display: block; font-size: 11px; color: #9ca3af; }

/* Responsif */
@media (max-width: 900px) {
	.about-grid { grid-template-columns: 1fr; gap: 32px; }
	.about-visual { order: -1; }
	.about-hero { padding: 56px 16px 72px; }
}

/* End modern Tentang AR2J styles */

/* AR2J: additional about section styles (from designer) */

/* SECTION ABOUT */

.about-hero.ar2j {
	position: relative;
	padding: 80px 0 100px;
	background: radial-gradient(circle at top left, var(--ar2j-cream), #f3f4f6 45%, #e5e7eb 100%);
	overflow: hidden;
}

.about-hero.ar2j .about-blur {
	position: absolute;
	inset: -100px;
	background:
		radial-gradient(circle at 10% 0, rgba(122, 14, 25, 0.16), transparent 55%),
		radial-gradient(circle at 80% 0, rgba(245, 158, 11, 0.22), transparent 60%);
	filter: blur(0);
	pointer-events: none;
	z-index: 0;
}

.about-grid {
	position: relative;
	z-index: 1;
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	padding-inline: 16px;
}

.about-copy {
	max-width: 640px;
}

.about-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ar2j-maroon);
	font-weight: 600;
	margin-bottom: 8px;
}

.about-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--ar2j-maroon), var(--ar2j-accent));
}

.about-title {
	font-size: 40px;
	line-height: 1.1;
	margin: 0 0 16px;
	color: var(--ar2j-black);
}

.about-desc {
	margin: 0 0 10px;
	color: var(--ar2j-gray);
	line-height: 1.7;
	font-size: 15px;
}

.about-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 16px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease,
		border-color 0.16s ease, color 0.16s ease;
}

.btn-primary {
	background: linear-gradient(135deg, var(--ar2j-maroon), var(--ar2j-accent));
	color: #f9fafb;
	box-shadow: 0 16px 40px rgba(17, 17, 17, 0.35);
}

.btn-primary:hover {
	transform: translateY(-1px) scale(1.01);
	box-shadow: 0 20px 55px rgba(17, 17, 17, 0.5);
}

.btn-ghost {
	background: rgba(255, 255, 255, 0.7);
	color: var(--ar2j-black);
	border-color: rgba(148, 163, 184, 0.6);
	backdrop-filter: blur(12px);
}

.btn-ghost:hover {
	background: rgba(255, 255, 255, 0.95);
}

.about-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.pill {
	font-size: 11px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(122, 14, 25, 0.28);
	color: var(--ar2j-maroon);
	backdrop-filter: blur(8px);
}

.about-visual {
	display: flex;
	justify-content: center;
}

.about-card {
	background: radial-gradient(circle at top left, #1f2933, #020617 70%);
	border-radius: 26px;
	padding: 18px 18px 16px;
	box-shadow: 0 28px 80px rgba(15, 23, 42, 0.85);
	border: 1px solid rgba(148, 163, 184, 0.4);
	max-width: 340px;
	width: 100%;
	transform: translateY(0);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.about-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 36px 100px rgba(15, 23, 42, 0.95);
}

.about-card-header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	font-size: 11px;
	color: #e5e7eb;
	opacity: 0.85;
}

.about-card-header .dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #4b5563;
}

.about-card-header .dot:nth-child(1) { background: #f97316; }
.about-card-header .dot:nth-child(2) { background: #22c55e; }
.about-card-header .dot:nth-child(3) { background: #ef4444; }

.card-label { margin-left: 4px; }

.about-product-mock {
	background: radial-gradient(circle at top, rgba(245, 158, 11, 0.35), #020617 70%);
	border-radius: 18px;
	padding: 18px;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 10px;
	margin-bottom: 14px;
}

.mock-block {
	border-radius: 14px;
	background: rgba(15, 23, 42, 0.9);
	box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
}

.mock-main { background: linear-gradient(145deg, #f9fafb, #e5e7eb); }
.mock-side { background: linear-gradient(145deg, #fee2e2, #fecaca); }

.about-stats { display: flex; justify-content: space-between; gap: 12px; }
.stat-item { flex: 1; text-align: left; }
.stat-number { display: block; font-size: 18px; font-weight: 700; color: #f9fafb; }
.stat-label { display: block; font-size: 11px; color: #9ca3af; }

@media (max-width: 900px) {
	.about-grid { grid-template-columns: 1fr; gap: 32px; }
	.about-visual { order: -1; }
	.about-hero.ar2j { padding: 64px 0 80px; }
}

/* End AR2J about styles */

/* AR2J Team section styles */
.ar2j-team {
	padding: 40px 0 80px;
	background: linear-gradient(to bottom, rgba(17, 24, 39, 0.02), #ffffff);
}

.ar2j-team .container {
	max-width: 1120px;
	margin: 0 auto;
	padding-inline: 16px;
}

.team-header {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 32px;
}

.team-eyebrow {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ar2j-maroon);
	font-weight: 600;
	margin-bottom: 6px;
}

.team-title {
	font-size: 28px;
	margin: 0 0 8px;
	color: var(--ar2j-black);
}

.team-subtitle {
	margin: 0;
	font-size: 14px;
	color: var(--ar2j-gray);
	line-height: 1.6;
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.team-card {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	padding: 16px 16px 14px;
	border: 1px solid rgba(148, 163, 184, 0.45);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.team-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 70px rgba(15, 23, 42, 0.14);
	border-color: rgba(122, 14, 25, 0.55);
}

.team-avatar {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	overflow: hidden;
	border: 2px solid rgba(122, 14, 25, 0.8);
	box-shadow: 0 8px 24px rgba(122, 14, 25, 0.35);
}

.team-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-body { flex: 1; }

.team-name { font-size: 15px; margin: 0 0 2px; color: var(--ar2j-black); }
.team-role { font-size: 12px; margin: 0 0 6px; color: var(--ar2j-maroon); font-weight: 600; }
.team-desc { font-size: 13px; margin: 0; color: var(--ar2j-gray); line-height: 1.6; }

.team-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.team-tags span { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.4); color: var(--ar2j-black); }

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

@media (max-width: 640px) {
	.team-grid { grid-template-columns: 1fr; }
	.ar2j-team { padding-bottom: 64px; }
}

/* End AR2J Team styles */

/* =========================================
	 HEADER SOLID + BLUR (TIDAK TRANSPARAN)
========================================= */
/* DUPLICATE HEADER THEME VARS REMOVED (consolidated at top) */

/* HEADER */
.site-header{
	background: var(--header-bg-solid) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--header-border);
	transition: background .25s ease, border-color .25s ease;
}

/* LOGO CHIP */
.logo-chip{
	background: var(--brand-navy);
	color: white;
	padding: 8px 12px;
	border-radius: 10px;
	font-weight: 900;
	letter-spacing: .04em;
}

/* NAV LINK ANIMASI */
.nav-top-link{
	color: var(--header-muted);
	font-weight: 700;
	position: relative;
	transition: color .2s ease;
}
.nav-top-link:hover{
	color: var(--header-text);
}
.nav-top-link::after{
	content:"";
	position:absolute;
	left:0; right:0; bottom:-6px;
	height:2px;
	background: linear-gradient(90deg,var(--brand-orange),var(--brand-yellow));
	border-radius:2px;
	transform: scaleX(0);
	transform-origin:left;
	transition: transform .25s ease;
}
.nav-top-link:hover::after{
	transform: scaleX(1);
}

/* RIGHT ACTION BUTTON SPACING */
.header-actions{
	display:flex;
	align-items:center;
	gap:14px;
}
.action-btn{
	width:40px;
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:12px;
	transition: background .2s ease, transform .2s ease;
}
.action-btn:hover{
	background: var(--header-hover);
	transform: translateY(-2px);
}

/* SEARCH INPUT */
.site-search{
	background: var(--header-bg-solid);
	border:1px solid var(--header-border);
	color: var(--header-text);
	transition: border .2s ease, background .2s ease;
}
.site-search:focus{
	border-color: var(--brand-orange);
	box-shadow: 0 0 0 3px rgba(245,158,11,.25);
}

/* CATEGORY BAR ANIMASI SCROLL */
.catbar{
	background: var(--header-bg-solid);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--header-border);
	transform: translateY(0);
	opacity: 1;
	transition: transform .3s ease, opacity .3s ease;
}
.catbar.is-hidden{
	transform: translateY(-100%);
	opacity: 0;
	pointer-events:none;
}

/* DARK MODE ANIMASI */
.theme-rotate{ animation: themeSpin .6s cubic-bezier(.2,.8,.2,1); }
@keyframes themeSpin{
	0%{ transform: rotate(0) scale(1);}
	50%{ transform: rotate(160deg) scale(1.2);}
	100%{ transform: rotate(360deg) scale(1);}
}

.theme-pop{ animation: themePop .4s ease; }
@keyframes themePop{
	0%{ transform: scale(1); }
	60%{ transform: scale(1.25); }
	100%{ transform: scale(1); }
}

/* RIPPLES */
.ripple{
	position:relative;
	overflow:hidden;
}
.ripple::after{
	content:"";
	position:absolute; inset:-30%;
	background: radial-gradient(circle, rgba(245,158,11,.4) 10%, transparent 12%);
	transform:scale(0);
	opacity:0;
	transition:transform .7s ease, opacity .9s ease;
}
.ripple.rippling::after{
	transform:scale(7);
	opacity:1;
}


/* DUPLICATE THEME VARS REMOVED (consolidated at top) */

/* =========================
	 HEADER MODERN LOOK
========================= */
.site-header{
	background: var(--header-bg-solid);
	border-bottom: 1px solid var(--header-border);
	color: var(--header-text);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.site-header .nav-top-link{
	position: relative;
	color: var(--header-muted);
	font-weight: 700;
	letter-spacing: .01em;
	transition: color .2s ease, transform .2s ease;
}
.site-header .nav-top-link:hover{
	color: var(--header-text);
	transform: translateY(-1px);
}
.site-header .nav-top-link::after{
	content:"";
	position:absolute;
	left:0; right:0; bottom:-6px;
	height:2px; border-radius:2px;
	background: linear-gradient(90deg,var(--brand-orange),var(--brand-yellow));
	transform: scaleX(0);
	transform-origin:left;
	transition: transform .25s ease;
}
.site-header .nav-top-link:hover::after{
	transform: scaleX(1);
}

/* logo chip */
.logo-chip{
	background: var(--brand-navy);
	color: white;
	border-radius: 10px;
	padding: 8px 12px;
	font-weight: 900;
	letter-spacing: .04em;
	box-shadow: 0 10px 22px rgba(2,6,23,0.18);
}

/* search */
.site-search{
	background: var(--search-bg);
	border: 1px solid var(--search-border);
	color: var(--search-text);
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.site-search::placeholder{ color: var(--search-placeholder); }
.site-search:focus{
	box-shadow: var(--ring);
	border-color: var(--brand-orange);
	transform: translateY(-1px);
}

/* right action buttons (boxed icons) */
.action-btn{
	width:40px;
	height:40px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:12px;
	transition: background .2s ease, transform .15s ease, color .2s ease;
}
.action-btn:hover{
	background: var(--header-hover);
	transform: translateY(-1px);
}

/* theme button pill */
.theme-button{
	display:flex; align-items:center; gap:8px;
	padding:8px 10px; border-radius:999px;
	background: transparent;
	color: var(--header-text);
	transition: background .2s ease, transform .15s ease;
}
.theme-button:hover{ background: var(--header-hover); transform: translateY(-1px); }

/* icon animations */
.theme-rotate{ animation: themeSpin .55s cubic-bezier(.2,.7,.1,1); }
@keyframes themeSpin{
	0%{ transform: rotate(0) scale(1); }
	50%{ transform: rotate(160deg) scale(1.15); }
	100%{ transform: rotate(360deg) scale(1); }
}
.theme-pop{ animation: themePop .35s ease; }
@keyframes themePop{
	0%{ transform: scale(1); }
	60%{ transform: scale(1.18); }
	100%{ transform: scale(1); }
}

/* ripple effect */
.ripple{
	position: relative;
	overflow: hidden;
}
.ripple::after{
	content:"";
	position:absolute; inset:0;
	background: radial-gradient(circle, rgba(245,158,11,.35) 10%, transparent 12%);
	transform: scale(0);
	opacity:0;
	transition: transform .6s ease, opacity .8s ease;
}
.ripple.rippling::after{
	transform: scale(6);
	opacity:1;
}

/* top strip dark-aware */
#topStrip{
	background: var(--strip-bg) !important;
	color: var(--strip-text) !important;
	transition: background .25s ease, color .25s ease;
}

/* category bar dark-aware */
.catbar{
	background: var(--catbar-bg);
	color:white;
	transition: background .25s ease;
}
.catbar .feature-btn{
	border-radius: 10px;
	transition: background .2s ease, transform .15s ease, opacity .2s ease;
}
.catbar .feature-btn:hover{
	background: var(--catbar-hover);
	transform: translateY(-1px);
}

/* catbar hide/show animation */
.catbar{
	position: relative;
	transform: translateY(0);
	transition: transform .28s ease, opacity .28s ease;
	will-change: transform, opacity;
}
.catbar.is-hidden{
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

/* header-actions: spacing on the right side */
.header-actions{
	display:flex;
	align-items:center;
	gap:10px;
	margin-left:8px;
}
@media(min-width:640px){
	.header-actions{ gap:12px; }
}

/* theme toggle animations (more pronounced) */
.theme-rotate{ animation: themeSpin .65s cubic-bezier(.16,.8,.2,1); }
@keyframes themeSpin{
	0%{ transform: rotate(0) scale(1); filter: blur(0); }
	45%{ transform: rotate(140deg) scale(1.2); filter: blur(.5px); }
	100%{ transform: rotate(360deg) scale(1); filter: blur(0); }
}
.theme-pop{ animation: themePop .45s cubic-bezier(.2,.9,.2,1); }
@keyframes themePop{
	0%{ transform: scale(1); }
	55%{ transform: scale(1.25); }
	100%{ transform: scale(1); }
}

/* stronger ripple */
.ripple::after{
	content:"";
	position:absolute; inset:-20%;
	background: radial-gradient(circle, rgba(245,158,11,.45) 12%, transparent 14%);
	transform: scale(0);
	opacity:0;
	transition: transform .7s ease, opacity .9s ease;
}
.ripple.rippling::after{
	transform: scale(7);
	opacity:1;
}

/* optional: smooth body transition */
body{
	transition: background .25s ease, color .25s ease;
}

/* DUPLICATE header-bg-solid definitions removed (consolidated at top) */


/* Temporary: hide duplicated site header elements and only show the newest one
	 If a script clones the header or a second header is injected, this keeps
	 the last (newest) header visible. Remove after root-cause fix. */
header.site-header:not(:last-of-type){
	display: none !important;
}



/* Chat widget stacking: ensure chat button and chat box appear above visuals */
#chat-root{
	z-index: 80 !important;
}

/* Keep chat button fixed in the bottom-right corner so it doesn't flow with page content */
#chatBtn{
	position: fixed !important;
	right: 1rem !important;
	bottom: 1rem !important;
	z-index: 9999 !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: 999px !important;
}

/* Chat box panel should appear above other UI (drawers, modals) */
#chatBox{
	position: fixed !important;
	right: 1rem !important;
	bottom: 6.5rem !important; /* sits above the button */
	z-index: 9999 !important;
	max-width: 360px;
}