/*
Theme Name: Pabrikbox Custom
Theme URI: https://pabrikbox.com
Author: Atlantis Pack
Description: Custom full-code WordPress theme for pabrikbox.com (Atlantis Pack) - rigid box & packaging manufacturer. Built with ACF Flexible Content page builder and custom post types for Product/Service/Industry/Portfolio/Testimonial/FAQ.
Version: 1.4.0
Text Domain: pabrikbox
*/

/* ============ TOKENS ============ */
:root{
  --white:#FFFFFF;
  --gray-50:#F5F8F9;
  --gray-100:#EBF1F2;
  --gray-200:#DCE6E9;
  --ink-900:#0F2438;
  --ink-700:#33495A;
  --ink-500:#64798A;
  --navy-950:#0A1C2B;
  --navy-900:#0F2A3E;
  --navy-800:#153A52;
  --teal-50:#E4F5F3;
  --teal-500:#12A093;
  --teal-600:#0E8074;
  --teal-700:#0A6459;
  --gold-500:#C89A4A;
  --border:#E1E7EA;

  --bg:var(--white);
  --surface:var(--white);
  --surface-alt:var(--gray-50);
  --text:var(--ink-900);
  --text-muted:var(--ink-700);
  --text-soft:var(--ink-500);
  --accent:var(--teal-600);
  --accent-strong:var(--teal-700);
  --accent-tint:var(--teal-50);
  --dark:var(--navy-900);
  --dark-deep:var(--navy-950);
  --link:var(--teal-600);
  --focus:var(--teal-600);

  --shadow-1:0 1px 2px rgba(10,28,43,.06), 0 1px 1px rgba(10,28,43,.04);
  --shadow-2:0 8px 24px rgba(10,28,43,.10);
  --shadow-3:0 24px 56px rgba(10,28,43,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--navy-950); --surface:var(--navy-900); --surface-alt:#102B3D;
    --text:#EAF1F2; --text-muted:#B7C6CD; --text-soft:#87999F; --border:#22404F;
    --accent:var(--teal-500); --accent-strong:#5CCFC2; --accent-tint:#123B39;
    --dark:var(--navy-950); --dark-deep:#050E16; --link:#5CCFC2;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px rgba(0,0,0,.45); --shadow-3:0 24px 56px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:var(--navy-950); --surface:var(--navy-900); --surface-alt:#102B3D;
  --text:#EAF1F2; --text-muted:#B7C6CD; --text-soft:#87999F; --border:#22404F;
  --accent:var(--teal-500); --accent-strong:#5CCFC2; --accent-tint:#123B39;
  --dark:var(--navy-950); --dark-deep:#050E16; --link:#5CCFC2;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px rgba(0,0,0,.45); --shadow-3:0 24px 56px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Manrope",-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:"Manrope",sans-serif;font-weight:800;line-height:1.18;text-wrap:balance;margin:0;color:var(--text);letter-spacing:-.01em;}
p{margin:0;} ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;border:none;background:none;padding:0;cursor:pointer;color:inherit;}
label{font-size:13px;font-weight:700;color:var(--text-muted);display:block;margin-bottom:6px;}
input,select,textarea{width:100%;padding:11px 13px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-strong);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:8px;font-weight:700;font-size:14.5px;letter-spacing:.01em;cursor:pointer;border:1.5px solid transparent;transition:transform .15s ease, background .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-1);}
.btn-primary:hover{background:var(--accent-strong);box-shadow:var(--shadow-2);}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border);}
.btn-outline:hover{border-color:var(--accent);background:var(--accent-tint);}
.btn-outline-invert{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);}
.btn-outline-invert:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-ghost{background:var(--surface-alt);color:var(--text);border-color:var(--border);}
.btn-ghost:hover{background:var(--surface);}
.btn-sm{padding:9px 16px;font-size:13px;}
.btn-block{width:100%;}
section{padding:88px 0;}
.section-head{max-width:640px;margin:0 0 44px;}
.section-head h2{font-size:clamp(26px,3.2vw,38px);margin-top:10px;}
.section-head p{margin-top:14px;color:var(--text-muted);font-size:16px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ============ HEADER ============ */
header.site{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--border);}
.header-row{display:flex;align-items:center;justify-content:space-between;height:82px;gap:24px;}
.logo{display:flex;align-items:center;gap:11px;color:var(--text);flex-shrink:0;}
.logo-mark{width:38px;height:38px;flex-shrink:0;}
.logo-text{display:flex;flex-direction:column;line-height:1.1;}
.logo-text b{font-size:16.5px;font-weight:800;letter-spacing:.04em;}
.logo-text span{font-size:10px;font-weight:700;letter-spacing:.28em;color:var(--accent-strong);margin-top:2px;}
nav.primary{display:flex;align-items:center;gap:2px;flex:1;padding-left:8px;}
.nav-item{position:relative;}
.nav-link{display:flex;align-items:center;gap:5px;padding:14px 14px;color:var(--ink-700);font-weight:700;font-size:14px;border-radius:6px;}
.nav-link:hover,.nav-item.open .nav-link,.nav-link.current{color:var(--accent-strong);}
.nav-link svg{width:10px;height:10px;transition:transform .15s ease;}
.nav-item.open .nav-link svg{transform:rotate(180deg);}
.mega{position:absolute;top:100%;left:0;width:min(620px,88vw);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-3);padding:22px;display:none;grid-template-columns:1fr 1fr;gap:2px 18px;}
.nav-item.open .mega{display:grid;}
.mega-cat{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;color:var(--text);font-size:14px;font-weight:600;}
.mega-cat:hover{background:var(--surface-alt);color:var(--accent-strong);}
.mega-cat .dot{width:6px;height:6px;border-radius:50%;background:var(--border);flex-shrink:0;}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.wa-btn{display:flex;flex-direction:column;align-items:center;padding:10px 20px;border-radius:8px;background:var(--accent);color:#fff;font-weight:700;font-size:13px;line-height:1.35;box-shadow:var(--shadow-1);}
.wa-btn:hover{background:var(--accent-strong);}
.wa-btn small{font-weight:600;font-size:11px;opacity:.85;font-family:"IBM Plex Mono",monospace;}
.wa-btn svg{width:14px;height:14px;margin-right:6px;}
.wa-btn .row{display:flex;align-items:center;}
.nav-toggle{display:none;width:38px;height:38px;color:var(--text);cursor:pointer;}
.mobile-panel{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:var(--surface);z-index:80;transform:translateX(100%);transition:transform .25s ease;padding:20px;overflow-y:auto;box-shadow:var(--shadow-3);}
.mobile-panel.open{transform:translateX(0);}
.mobile-scrim{position:fixed;inset:0;background:rgba(10,28,43,.55);z-index:70;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.mobile-scrim.open{opacity:1;pointer-events:auto;}
.mobile-panel a{display:block;padding:13px 6px;color:var(--text);font-weight:700;border-bottom:1px solid var(--border);}
.mobile-close{width:34px;height:34px;margin-left:auto;display:block;color:var(--text);}

/* ============ BREADCRUMB ============ */
.crumb{padding:16px 0;font-size:13px;color:var(--text-soft);border-bottom:1px solid var(--border);background:var(--surface-alt);}
.crumb a:hover{color:var(--accent-strong);}
.crumb .sep{margin:0 8px;opacity:.5;}
.crumb .current{color:var(--text);font-weight:700;}

/* ============ STAT STRIP ============ */
.stat-strip{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-1);display:flex;flex-wrap:wrap;}
.stat-strip .stat{flex:1;min-width:140px;display:flex;align-items:center;gap:12px;padding:20px 22px;border-right:1px solid var(--border);}
.stat-strip .stat:last-child{border-right:none;}
.stat-strip .stat .ic{width:38px;height:38px;border-radius:9px;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.stat-strip .stat b{display:block;font-size:19px;font-weight:800;color:var(--text);}
.stat-strip .stat span{font-size:12px;color:var(--text-soft);font-weight:600;}

/* ============ CARDS / GRIDS ============ */
.icon-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;}
.icon-card .ic{width:36px;height:36px;border-radius:8px;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.icon-card h4{font-size:14.5px;font-weight:700;}
.icon-card p{margin-top:6px;font-size:13px;color:var(--text-muted);line-height:1.5;}

.benefit-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.benefit-row .item{background:var(--surface);padding:22px;display:flex;align-items:flex-start;gap:12px;}
.benefit-row .item .ic{width:34px;height:34px;border-radius:8px;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.benefit-row .item h4{font-size:13.5px;font-weight:700;}
.benefit-row .item p{margin-top:4px;font-size:12px;color:var(--text-muted);line-height:1.45;}

/* ============ PROCESS STEPS ============ */
.process-steps{display:flex;justify-content:space-between;gap:8px;position:relative;}
.process-steps::before{content:"";position:absolute;top:26px;left:6%;right:6%;height:1px;background:var(--border);border-top:1px dashed var(--border);z-index:0;}
.process-step{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;}
.process-step .num{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;box-shadow:var(--shadow-2);}
.process-step h4{font-size:13.5px;font-weight:700;max-width:15ch;}
.process-step p{font-size:11.5px;color:var(--text-muted);max-width:18ch;line-height:1.4;}

/* ============ CTA BANNER (dark) ============ */
.cta-banner{background:linear-gradient(120deg,var(--navy-900),var(--navy-800));border-radius:16px;padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;color:#fff;}
.cta-banner h3{color:#fff;font-size:clamp(19px,2.2vw,25px);max-width:32ch;}
.cta-banner p{color:#A9BAC4;font-size:13.5px;margin-top:4px;}
.cta-full{background:linear-gradient(120deg,var(--navy-950),var(--navy-800));color:#fff;}
.cta-full .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:44px 24px;}
.cta-full h3{color:#fff;font-size:clamp(20px,2.6vw,28px);}

/* ============ SIDEBAR CTA CARD ============ */
.side-cta{background:var(--surface-alt);border:1px solid var(--border);border-radius:12px;padding:24px;}
.side-cta h4{font-size:15px;font-weight:800;max-width:20ch;}
.side-cta ul{margin-top:16px;display:flex;flex-direction:column;gap:14px;}
.side-cta li{display:flex;gap:10px;font-size:13px;}
.side-cta li .ic{width:26px;height:26px;border-radius:6px;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.side-cta li b{display:block;font-size:13px;}
.side-cta li span{color:var(--text-muted);font-size:12px;}
.side-cta .btn{margin-top:16px;width:100%;}

/* ============ FOOTER ============ */
footer{background:var(--navy-950);color:#B7C6CD;padding:56px 0 0;}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;padding-bottom:40px;}
.foot-brand .logo-text b{color:#fff;}
.foot-brand p{margin-top:14px;font-size:13px;color:#8298A3;max-width:28ch;line-height:1.55;}
.foot-social{display:flex;gap:10px;margin-top:18px;}
.foot-social a{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#B7C6CD;}
.foot-social a:hover{background:var(--accent);color:#fff;}
.foot-col h5{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#8298A3;font-weight:800;margin-bottom:15px;}
.foot-col ul{display:flex;flex-direction:column;gap:10px;}
.foot-col a{font-size:13.5px;color:#C4D1D6;}
.foot-col a:hover{color:#fff;}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;padding:22px 0;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#6C818C;border-top:1px solid rgba(255,255,255,.08);}
.foot-bottom a{color:#6C818C;} .foot-bottom a:hover{color:#fff;}

/* ============ HOMEPAGE SPECIFIC ============ */
.hero{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--navy-950) 0%,var(--navy-900) 55%,#0C3348 100%);color:#fff;padding:0;}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 64px);}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch;min-height:560px;}
.hero-copy{padding:76px 0 56px;display:flex;flex-direction:column;justify-content:center;}
.hero-copy h1{font-size:clamp(32px,4vw,48px);color:#fff;text-transform:uppercase;letter-spacing:-.01em;}
.hero-copy p{margin-top:18px;color:#B7C6CD;font-size:16.5px;max-width:48ch;}
.hero-ctas{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:28px;margin-top:44px;flex-wrap:wrap;}
.hero-stats .s{display:flex;align-items:center;gap:10px;}
.hero-stats .ic{width:36px;height:36px;border-radius:9px;background:rgba(20,160,147,.18);color:#5CCFC2;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hero-stats b{display:block;font-size:15px;color:#fff;}
.hero-stats span{font-size:11px;color:#8298A3;}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;padding:40px 0;}
.hero-visual .plate{position:relative;width:88%;aspect-ratio:5/4;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-3);background:linear-gradient(150deg,#123A4E,#0A2233);display:flex;align-items:center;justify-content:center;}
.hero-visual .plate svg{width:60%;}

.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.cat-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:box-shadow .18s ease,transform .18s ease;}
.cat-card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px);}
.cat-card .thumb{aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;}
.cat-card .body{padding:14px 16px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.cat-card .body b{font-size:14px;font-weight:700;}
.cat-card .body svg{width:15px;height:15px;color:var(--accent-strong);flex-shrink:0;}
.grid-foot{display:flex;justify-content:center;margin-top:32px;}

.capability{background:linear-gradient(120deg,var(--navy-900),var(--navy-800));color:#fff;}
.capability .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.capability h2{color:#fff;font-size:clamp(24px,3vw,32px);margin-top:10px;}
.capability p{color:#A9BAC4;margin-top:14px;font-size:15px;max-width:46ch;}
.capability-feats{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.capability-feats .item{display:flex;gap:12px;align-items:flex-start;}
.capability-feats .ic{width:36px;height:36px;border-radius:9px;background:rgba(20,160,147,.18);color:#5CCFC2;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.capability-feats b{display:block;font-size:13.5px;color:#fff;}
.capability-feats span{font-size:12px;color:#8298A3;}
.capability-photo{aspect-ratio:16/9;border-radius:12px;background:linear-gradient(150deg,#0C2C3E,#153A52);margin-top:32px;display:flex;align-items:center;justify-content:center;overflow:hidden;}

.ind-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.ind-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:22px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;}
.ind-item .ic{width:52px;height:52px;border-radius:50%;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;}
.ind-item b{font-size:13.5px;font-weight:700;}

.preview-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pv-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.pv-card .thumb{aspect-ratio:4/3;}
.pv-card .body{padding:16px 18px;}
.pv-card .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-strong);background:var(--accent-tint);padding:4px 9px;border-radius:5px;margin-bottom:10px;}
.pv-card h4{font-size:14.5px;font-weight:700;}
.pv-card p{font-size:12.5px;color:var(--text-muted);margin-top:6px;}

.about-preview{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.about-preview .photo{aspect-ratio:4/3;border-radius:14px;background:linear-gradient(150deg,var(--gray-100),var(--gray-200));box-shadow:var(--shadow-2);}
.about-preview .checks{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.about-preview .checks li{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--text-muted);}
.about-preview .checks svg{width:16px;height:16px;color:var(--accent-strong);flex-shrink:0;}

/* ============ PRODUCTS OVERVIEW ============ */
.prod-hero{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--navy-950) 0%,var(--navy-900) 55%,#0C3348 100%);color:#fff;padding:60px 0 0;}
.prod-hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 64px);}
.prod-hero-inner{position:relative;padding-bottom:56px;max-width:680px;}
.prod-hero .eyebrow{color:#5CCFC2;}
.prod-hero h1{font-size:clamp(32px,4.4vw,50px);color:#fff;margin-top:12px;}
.prod-hero p{margin-top:16px;color:#B7C6CD;font-size:16.5px;max-width:58ch;}
.prod-stat-wrap{position:relative;margin-top:-32px;z-index:2;}

.pg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.pg-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px 18px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;}
.pg-card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px);border-color:var(--accent);}
.pg-card .ic{width:50px;height:50px;border-radius:10px;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pg-card h4{font-size:14.5px;font-weight:700;}
.pg-card p{font-size:12.5px;color:var(--text-muted);line-height:1.5;}
.pg-card.pg-other{background:var(--accent-tint);border-color:var(--accent);}

/* ============ RIGID BOX CATEGORY ============ */
.rb-hero{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--navy-950) 0%,var(--navy-900) 55%,#0C3348 100%);color:#fff;padding:0;}
.rb-hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 64px);}
.rb-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch;min-height:520px;}
.rb-hero-copy{padding:68px 0 48px;display:flex;flex-direction:column;justify-content:center;}
.rb-hero-copy h1{font-size:clamp(30px,3.8vw,44px);color:#fff;margin-top:10px;}
.rb-hero-copy > p{margin-top:16px;color:#B7C6CD;font-size:16px;max-width:52ch;}
.rb-hero-ctas{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}
.rb-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:38px;max-width:480px;}
.rb-badges .b{display:flex;align-items:flex-start;gap:11px;}
.rb-badges .ic{width:34px;height:34px;border-radius:9px;background:rgba(20,160,147,.18);color:#5CCFC2;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rb-badges b{display:block;font-size:13px;color:#fff;font-weight:700;}
.rb-badges span{font-size:11.5px;color:#8298A3;line-height:1.4;display:block;margin-top:2px;}
.rb-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;padding:40px 0;}
.rb-hero-visual .plate{position:relative;width:88%;aspect-ratio:5/4;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-3);background:linear-gradient(150deg,#123A4E,#0A2233);display:flex;align-items:center;justify-content:center;}
.rb-hero-visual .plate svg{width:64%;}

.style-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.style-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 16px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;}
.style-card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px);border-color:var(--accent);}
.style-card .thumb{width:100%;aspect-ratio:1/1;border-radius:9px;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;color:var(--accent-strong);margin-bottom:14px;}
.style-card .thumb svg{width:56%;height:56%;}
.style-card h4{font-size:14px;font-weight:700;}
.style-card p{margin-top:5px;font-size:12px;color:var(--text-muted);line-height:1.45;min-height:34px;}
.style-card .btn{margin-top:14px;width:100%;}

.kust-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start;}
.tab-bar{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:26px;padding-bottom:0;}
.tab-btn{padding:11px 16px;font-size:13px;font-weight:700;color:var(--text-soft);border-radius:8px 8px 0 0;position:relative;top:1px;border-bottom:2px solid transparent;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--accent-strong);border-bottom:2px solid var(--accent);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.material-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.material-swatch{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface);}
.material-swatch .sw{aspect-ratio:4/3;}
.material-swatch .lbl{padding:10px 12px 12px;font-size:12.5px;font-weight:700;text-align:center;}
.cap-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cap-list .item{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);}
.cap-list .item .ic{width:32px;height:32px;border-radius:8px;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cap-list .item b{display:block;font-size:13.5px;}
.cap-list .item span{font-size:12px;color:var(--text-muted);}

.rb-exp{background:linear-gradient(120deg,var(--navy-900),var(--navy-800));color:#fff;}
.rb-exp .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;}
.rb-exp-photo{aspect-ratio:4/3;border-radius:14px;background:linear-gradient(150deg,#0C2C3E,#153A52);box-shadow:var(--shadow-3);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.rb-exp h2{color:#fff;font-size:clamp(23px,2.8vw,30px);margin-top:10px;}
.rb-exp > .wrap > div:last-child > p{color:#A9BAC4;margin-top:12px;font-size:15px;max-width:50ch;}
.rb-exp-feats{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;}
.rb-exp-feats .item{display:flex;gap:12px;align-items:flex-start;}
.rb-exp-feats .ic{width:36px;height:36px;border-radius:9px;background:rgba(20,160,147,.18);color:#5CCFC2;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rb-exp-feats b{display:block;font-size:13.5px;color:#fff;}
.rb-exp-feats span{font-size:12px;color:#8298A3;}

.app-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.app-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:22px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;}
.app-item .ic{width:52px;height:52px;border-radius:50%;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;}
.app-item b{font-size:13.5px;font-weight:700;}

.rb-preview-row{grid-template-columns:repeat(4,1fr);}

.testi-card{background:var(--surface-alt);border:1px solid var(--border);border-radius:14px;padding:34px 38px;display:flex;gap:22px;align-items:flex-start;max-width:820px;margin:0 auto;}
.testi-card .avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(150deg,var(--teal-500),var(--teal-700));flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;}
.testi-card blockquote{margin:0;font-size:16px;color:var(--text);line-height:1.6;font-style:italic;}
.testi-card .who{margin-top:14px;font-size:13px;color:var(--text-muted);font-weight:700;font-style:normal;}
.testi-card .who span{font-weight:500;color:var(--text-soft);}

.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.faq-item{border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden;}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;text-align:left;font-size:14.5px;font-weight:700;color:var(--text);}
.faq-q .plus{width:22px;height:22px;border-radius:50%;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s ease;}
.faq-item[aria-expanded="true"] .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{padding:0 20px 18px;font-size:13.5px;color:var(--text-muted);line-height:1.6;max-width:70ch;}

/* ============ PRODUCT GALLERY (style-level page, reusable) ============ */
.gallery-hero{background:linear-gradient(115deg,var(--navy-950) 0%,var(--navy-900) 55%,#0C3348 100%);color:#fff;padding:52px 0 46px;}
.gallery-hero .wrap{max-width:760px;}
.gallery-hero h1{font-size:clamp(26px,3.4vw,38px);color:#fff;margin-top:10px;}
.gallery-hero p{margin-top:12px;color:#B7C6CD;font-size:15.5px;max-width:58ch;}
.gallery-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:32px;}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.product-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;}
.product-card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px);border-color:var(--accent);}
.product-card .thumb{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;color:rgba(255,255,255,.9);}
.product-card .thumb svg{width:42%;height:42%;}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;}
.product-card .code{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;letter-spacing:.03em;background:rgba(10,28,43,.6);color:#fff;padding:3px 8px;border-radius:5px;font-family:"IBM Plex Mono",monospace;}
.product-card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1;}
.product-card h4{font-size:13.5px;font-weight:700;line-height:1.35;}
.product-card .spec{font-size:11.5px;color:var(--text-muted);line-height:1.45;flex:1;}
.product-card .btn{width:100%;}

/* ============ CUSTOMIZE THIS ITEM (Tahap 4) ============ */
.page-head{padding:36px 0 26px;}
.page-head h1{font-size:clamp(24px,3vw,34px);margin-top:8px;}
.page-head p{margin-top:10px;color:var(--text-muted);font-size:15px;max-width:64ch;}
.page-review-confirmation.page-head{padding:40px 0 8px;}
.page-review-confirmation .page-head h1{font-size:clamp(26px,3.4vw,36px);}
.page-review-confirmation .page-head p{max-width:60ch;}

.stepper{position:sticky;top:81px;z-index:55;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-1);}
.stepper-track{display:flex;align-items:center;gap:2px;overflow-x:auto;padding:12px 24px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.stepper-track::-webkit-scrollbar{height:5px;}
.stepper-track::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.step-item{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:6px 8px;border-radius:8px;color:var(--text-soft);white-space:nowrap;}
.step-item:hover{color:var(--accent-strong);}
.step-num{width:27px;height:27px;border-radius:50%;background:var(--surface-alt);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;color:var(--text-soft);flex-shrink:0;transition:background .15s ease,border-color .15s ease,color .15s ease;}
.step-num svg{width:13px;height:13px;}
.step-label{font-size:12.5px;font-weight:700;}
.step-item.completed .step-num{background:var(--accent);border-color:var(--accent);color:#fff;}
.step-item.completed{color:var(--text);}
.step-item.active .step-num{background:var(--accent);border-color:var(--accent);color:#fff;}
.step-item.active{color:var(--text);}
.step-sep{width:14px;height:1px;background:var(--border);flex-shrink:0;margin:0 2px;}

.cust-layout{display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:start;padding:40px 0 0;}
.cust-main{min-width:0;}
.cust-sec{padding:34px 0;border-bottom:1px solid var(--border);}
.cust-sec:first-child{padding-top:0;}
.cust-sec:last-of-type{border-bottom:none;}
.cust-sec-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;}
.cust-sec-head .step-tag{width:32px;height:32px;border-radius:50%;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13.5px;flex-shrink:0;margin-top:2px;}
.cust-sec-head h2{font-size:19px;}
.cust-sec-head p{margin-top:4px;font-size:13px;color:var(--text-muted);}

.dim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.dim-field .unit{font-size:11px;font-weight:600;color:var(--text-soft);margin-top:5px;display:block;}
.cust-note{margin-top:14px;background:var(--surface-alt);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:12.5px;color:var(--text-muted);display:flex;gap:8px;align-items:flex-start;}
.cust-note svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--accent-strong);}

.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;}
.opt-card{position:relative;display:block;cursor:pointer;}
.opt-card input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;}
.opt-card .card-inner{position:relative;border:1.5px solid var(--border);border-radius:10px;background:var(--surface);padding:12px;height:100%;display:flex;flex-direction:column;gap:9px;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;}
.opt-card:hover .card-inner{border-color:var(--accent);}
.opt-card input:focus-visible ~ .card-inner{outline:2px solid var(--focus);outline-offset:2px;}
.opt-card.selected .card-inner{border-color:var(--accent);background:var(--accent-tint);box-shadow:var(--shadow-1);}
.opt-card .swatch{width:100%;aspect-ratio:16/10;border-radius:7px;flex-shrink:0;}
.opt-card .check{position:absolute;top:9px;right:9px;width:19px;height:19px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .15s ease,background .15s ease,border-color .15s ease;}
.opt-card .check svg{width:11px;height:11px;}
.opt-card.selected .check{opacity:1;background:var(--accent);border-color:var(--accent);}
.opt-card b{font-size:12.5px;font-weight:700;}
.opt-card span{font-size:11px;color:var(--text-muted);line-height:1.4;}

.qty-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.qty-input-wrap{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;flex-shrink:0;}
.qty-input-wrap button{width:40px;height:46px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:var(--text-muted);flex-shrink:0;}
.qty-input-wrap button:hover{background:var(--surface-alt);color:var(--accent-strong);}
.qty-input-wrap input{border:none;width:96px;text-align:center;font-weight:800;font-size:15px;padding:11px 4px;border-radius:0;font-family:"IBM Plex Mono",monospace;}
.qty-input-wrap input:focus{border:none;}
.qty-presets{display:flex;gap:8px;flex-wrap:wrap;}
.qty-preset{padding:9px 15px;border-radius:20px;border:1.5px solid var(--border);font-size:12.5px;font-weight:700;color:var(--text-muted);background:var(--surface);}
.qty-preset:hover{border-color:var(--accent);color:var(--accent-strong);}
.qty-preset.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.step-anchor{padding-top:34px;border-top:1px solid var(--border);}
.step-anchor .cust-sec-head{margin-bottom:8px;}

.cust-side{position:sticky;top:158px;display:flex;flex-direction:column;gap:18px;}
.prod-visual{background:linear-gradient(150deg,#123A4E,#0A2233);border-radius:14px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-2);overflow:hidden;transition:background .3s ease;}
.prod-visual svg{width:56%;}
.prod-caption{margin-top:8px;font-size:10.5px;color:var(--text-soft);text-align:center;}
.thumb-row{display:flex;gap:8px;margin-top:10px;}
.thumb-row .thumb{flex:1;aspect-ratio:1/1;border-radius:8px;border:1.5px solid var(--border);cursor:pointer;overflow:hidden;padding:0;}
.thumb-row .thumb.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint);}
.thumb-row .thumb-visual{width:100%;height:100%;}

.page-customize .summary-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:var(--shadow-1);}
.summary-card h3{font-size:14.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--text-soft);}
.summary-head{display:flex;gap:12px;align-items:center;padding:14px 0 16px;border-bottom:1px solid var(--border);margin-bottom:14px;}
.summary-head .thumb-mini{width:50px;height:50px;border-radius:8px;background:linear-gradient(150deg,#123A4E,#0A2233);flex-shrink:0;}
.summary-head b{display:block;font-size:13.5px;}
.summary-head a{font-size:11.5px;color:var(--accent-strong);font-weight:700;}
.summary-list{display:flex;flex-direction:column;gap:11px;}
.summary-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;}
.summary-row .lbl{color:var(--text-soft);flex-shrink:0;}
.summary-row .val{font-weight:700;text-align:right;}
.summary-est{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.summary-est .est-lbl{font-size:11px;font-weight:700;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em;}
.summary-est .price{margin-top:4px;font-size:19px;font-weight:800;color:var(--accent-strong);font-family:"IBM Plex Mono",monospace;}
.summary-est .hedge{margin-top:4px;font-size:10.5px;color:var(--text-soft);line-height:1.4;}
.summary-meta{margin-top:14px;display:flex;flex-direction:column;gap:9px;}
.summary-meta .m-row{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--text-muted);}
.summary-meta .m-row svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;color:var(--accent-strong);}
.summary-meta .m-row b{display:block;color:var(--text);font-size:12px;}
.summary-ctas{margin-top:18px;display:flex;flex-direction:column;gap:10px;}

/* ============ REVIEW & CONFIRMATION (Tahap 4) ============ */
.step-track{display:flex;align-items:center;gap:0;overflow-x:auto;padding:22px 0 6px;}
.step-track .st{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.step-track .st .dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:var(--surface-alt);color:var(--text-soft);border:1.5px solid var(--border);flex-shrink:0;}
.step-track .st.done .dot{background:var(--accent-tint);color:var(--accent-strong);border-color:var(--accent-tint);}
.step-track .st.current .dot{background:var(--accent);color:#fff;border-color:var(--accent);}
.step-track .st span{font-size:11.5px;font-weight:700;color:var(--text-soft);white-space:nowrap;}
.step-track .st.current span{color:var(--text);}
.step-track .st.done span{color:var(--text-muted);}
.step-track .ln{width:20px;height:1px;background:var(--border);flex-shrink:0;margin:0 6px;}

.review-layout{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start;padding-top:28px;}
.review-main{display:flex;flex-direction:column;gap:28px;min-width:0;}
.review-main .panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:26px;}
.review-main .panel h3{font-size:16px;font-weight:800;display:flex;align-items:center;gap:9px;}
.review-main .panel h3 .ic{width:30px;height:30px;border-radius:8px;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

.gallery-main{aspect-ratio:4/3;border-radius:10px;overflow:hidden;margin-top:18px;background:linear-gradient(150deg,#123A4E,#0A2233);display:flex;align-items:center;justify-content:center;transition:background .2s ease;}
.gallery-main svg{width:44%;}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.gallery-thumbs button{width:64px;height:64px;border-radius:8px;border:1.5px solid var(--border);overflow:hidden;flex-shrink:0;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;}
.gallery-thumbs button svg{width:60%;}
.gallery-thumbs button.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint);}
.gallery-note{margin-top:12px;font-size:11.5px;color:var(--text-soft);}

.spec-list{margin-top:18px;display:flex;flex-direction:column;}
.spec-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 0;border-top:1px solid var(--border);}
.spec-row:first-child{border-top:none;}
.spec-row .lft{display:flex;gap:12px;align-items:flex-start;min-width:0;}
.spec-row .lft .ic{width:32px;height:32px;border-radius:8px;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.spec-row dt{font-size:12px;font-weight:700;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em;}
.spec-row dd{margin:3px 0 0;font-size:14.5px;font-weight:700;color:var(--text);}
.spec-row dd.list{font-weight:600;font-size:13.5px;color:var(--text-muted);}
.spec-row .chg{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--accent-strong);padding:7px 12px;border-radius:7px;border:1.5px solid var(--border);}
.spec-row .chg:hover{border-color:var(--accent);background:var(--accent-tint);}
.spec-row .chg svg{width:12px;height:12px;}

.notes-wrap textarea{margin-top:18px;min-height:110px;resize:vertical;font-size:14px;}
.notes-count{display:flex;justify-content:flex-end;margin-top:8px;font-size:12px;color:var(--text-soft);font-family:"IBM Plex Mono",monospace;}
.notes-count.warn{color:var(--gold-500);}

/* Fluent Forms shortcode reskin to match the prototype's mini-form 2-col layout */
.fluentform-wrap{margin-top:18px;}
.fluentform-wrap form{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fluentform-wrap .ff-el-group{margin:0;}
.fluentform-wrap .ff-el-input--label label,
.fluentform-wrap .ff-el-form-check-label label,
.fluentform-wrap label{font-size:13px;font-weight:700;color:var(--text-muted);display:block;margin-bottom:6px;}
.fluentform-wrap input[type="text"],
.fluentform-wrap input[type="email"],
.fluentform-wrap input[type="tel"],
.fluentform-wrap input[type="number"],
.fluentform-wrap textarea,
.fluentform-wrap select{width:100%;padding:11px 13px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;}
.fluentform-wrap input[type="text"]:focus,
.fluentform-wrap input[type="email"]:focus,
.fluentform-wrap input[type="tel"]:focus{border-color:var(--accent);}
.fluentform-wrap input[type="hidden"]{display:none;}
.fluentform-wrap .ff-el-group:last-of-type,
.fluentform-wrap .ff_submit_btn_wrapper,
.fluentform-wrap .ff-btn-submit-wrap{grid-column:1/-1;}
.fluentform-wrap button[type="submit"],
.fluentform-wrap input[type="submit"],
.fluentform-wrap .ff-btn-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 24px;border-radius:8px;font-weight:700;font-size:14.5px;letter-spacing:.01em;cursor:pointer;border:1.5px solid transparent;background:var(--accent);color:#fff;box-shadow:var(--shadow-1);transition:transform .15s ease,background .15s ease,box-shadow .15s ease;}
.fluentform-wrap button[type="submit"]:hover,
.fluentform-wrap input[type="submit"]:hover{background:var(--accent-strong);box-shadow:var(--shadow-2);transform:translateY(-1px);}
.fluentform-wrap .ff-message-success{grid-column:1/-1;margin-top:4px;font-size:13.5px;color:var(--accent-strong);font-weight:700;}
.fluentform-wrap .ff-errors-in-stack,
.fluentform-wrap .error{color:#C0392B;font-size:12px;margin-top:4px;}

.review-layout .sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:16px;}
.rc-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-1);}
.rc-card .sc-head{padding:20px 22px 16px;border-bottom:1px solid var(--border);}
.rc-card .sc-head span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);}
.rc-card .sc-product{display:flex;gap:12px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border);}
.rc-card .sc-product .thumb{width:56px;height:56px;border-radius:8px;background:linear-gradient(150deg,#123A4E,#0A2233);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.rc-card .sc-product .thumb svg{width:60%;}
.rc-card .sc-product b{display:block;font-size:14px;font-weight:800;line-height:1.3;}
.rc-card .sc-product a{font-size:12px;color:var(--accent-strong);font-weight:700;margin-top:3px;display:inline-block;}
.rc-card .sc-rows{padding:16px 22px;display:flex;flex-direction:column;gap:13px;}
.rc-card .sc-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;}
.rc-card .sc-row .k{color:var(--text-soft);font-weight:600;}
.rc-card .sc-row .v{color:var(--text);font-weight:700;text-align:right;max-width:58%;}
.rc-card .sc-est{padding:16px 22px;background:var(--surface-alt);display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--border);}
.rc-card .sc-est .row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.rc-card .sc-est .k{font-size:12.5px;font-weight:700;color:var(--text-muted);display:flex;align-items:center;gap:5px;}
.rc-card .sc-est .k svg{width:13px;height:13px;color:var(--text-soft);flex-shrink:0;}
.rc-card .sc-est .v{font-size:12.5px;font-weight:800;color:var(--text);text-align:right;}
.rc-card .sc-est .hedge{font-size:10.5px;color:var(--text-soft);font-weight:600;margin-top:-4px;}
.rc-card .sc-ctas{padding:18px 22px 22px;display:flex;flex-direction:column;gap:10px;}
.rc-card .sc-note{display:flex;gap:10px;align-items:flex-start;padding:16px 22px;border-top:1px solid var(--border);}
.rc-card .sc-note .ic{width:28px;height:28px;border-radius:7px;background:var(--accent-tint);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rc-card .sc-note p{font-size:11.5px;color:var(--text-muted);line-height:1.5;}
.benefit-row.cols-3{grid-template-columns:repeat(3,1fr);}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .benefit-row{grid-template-columns:1fr 1fr;}
  .foot-top{grid-template-columns:1fr 1fr;}
  .hero-grid{grid-template-columns:1fr;min-height:0;}
  .hero-visual{padding-bottom:60px;}
  .cat-grid{grid-template-columns:repeat(3,1fr);}
  .capability .wrap{grid-template-columns:1fr;}
  .ind-strip{grid-template-columns:repeat(3,1fr);}
  .about-preview{grid-template-columns:1fr;}
  .pg-grid{grid-template-columns:repeat(3,1fr);}
  .rb-hero-grid{grid-template-columns:1fr;min-height:0;}
  .rb-hero-visual{padding-bottom:52px;}
  .style-grid{grid-template-columns:repeat(3,1fr);}
  .kust-layout{grid-template-columns:1fr;}
  .rb-exp .wrap{grid-template-columns:1fr;}
  .app-strip{grid-template-columns:repeat(3,1fr);}
  .rb-preview-row{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(3,1fr);}
  .cust-layout{grid-template-columns:1fr;}
  .cust-side{position:static;top:auto;}
  .review-layout{grid-template-columns:1fr;}
  .review-layout .sidebar{position:static;top:auto;order:-1;}
  .benefit-row.cols-3{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  nav.primary,.header-actions .wa-btn{display:none;}
  .nav-toggle{display:block;}
  .stat-strip{flex-direction:column;}
  .stat-strip .stat{border-right:none;border-bottom:1px solid var(--border);}
  .stat-strip .stat:last-child{border-bottom:none;}
  .preview-row{grid-template-columns:1fr;}
  .material-grid{grid-template-columns:repeat(3,1fr);}
  .cap-list{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-toolbar{align-items:flex-start;}
  .stepper{top:0;}
  .fluentform-wrap form{grid-template-columns:1fr;}
}
@media (max-width:640px){
  section{padding:56px 0;}
  .benefit-row{grid-template-columns:1fr;}
  .benefit-row.cols-3{grid-template-columns:1fr;}
  .dim-grid{grid-template-columns:1fr 1fr;}
  .dim-grid .dim-field:last-child{grid-column:span 2;}
  .opt-grid{grid-template-columns:repeat(2,1fr);}
  .review-layout{padding-top:20px;gap:20px;}
  .review-main .panel{padding:20px;}
  .spec-row{flex-direction:column;gap:10px;}
  .spec-row .chg{align-self:flex-start;}
  .process-steps{flex-direction:column;}
  .process-steps::before{display:none;}
  .foot-top{grid-template-columns:1fr;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .capability-feats{grid-template-columns:1fr;}
  .ind-strip{grid-template-columns:repeat(2,1fr);}
  .hero-stats{gap:18px;}
  .pg-grid{grid-template-columns:repeat(2,1fr);}
  .prod-hero-inner{padding-bottom:44px;}
  .style-grid{grid-template-columns:repeat(2,1fr);}
  .material-grid{grid-template-columns:repeat(2,1fr);}
  .app-strip{grid-template-columns:repeat(2,1fr);}
  .rb-preview-row{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:1fr 1fr;}
  .rb-badges{grid-template-columns:1fr;}
  .rb-exp-feats{grid-template-columns:1fr;}
  .testi-card{flex-direction:column;padding:26px;}
  .cta-banner,.cta-full .wrap{flex-direction:column;align-items:flex-start;}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition-duration:.01ms !important;} }
