/* PACKTON by XORA — Tape Division | tape.packton.com.my */

:root{
  --navy:#0E1953; --navy-deep:#070E2E; --navy-soft:#1B2A6B;
  --amber:#F4C042; --amber-dark:#B8860B;
  --cream:#F9F2EA; --steel:#EDF1F6; --white:#fff;
  --ink:#12151F; --muted:#5A6072; --border:#DCE1E9;
  --green:#25D366;
  --head:'Montserrat',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --pad:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:#fff;line-height:1.6;font-size:15px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);margin:0;line-height:1.2;letter-spacing:-.4px}
h1{font-size:29px;font-weight:800;line-height:1.16;letter-spacing:-.5px}
h2{font-size:25px;font-weight:700;letter-spacing:-.4px}
h3{font-size:15px;font-weight:700;line-height:1.3;letter-spacing:0}
p{margin:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.sec{padding:36px 0}
.cream{background:var(--cream)}
.steel{background:var(--steel)}
.navy{background:var(--navy);color:#fff}
.navy h2,.navy h3{color:#fff}
.deep{background:var(--navy-deep);color:#fff}
.deep h1,.deep h2,.deep h3{color:#fff}
.muted{color:var(--muted)}
.navy .muted,.deep .muted{color:#FFFFFFB8}
.lead{font-size:14px;line-height:1.6;color:var(--muted)}
.answer{font-size:14.5px;line-height:1.62;font-weight:500}
.deep .answer{color:#FFFFFFCC}
.stack>*+*{margin-top:14px}

/* eyebrow */
.eyebrow{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:700;letter-spacing:1.4px;color:var(--amber-dark);text-transform:uppercase}
.deep .eyebrow,.navy .eyebrow{color:var(--amber)}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 18px;border-radius:8px;font-weight:700;font-size:15.5px;text-decoration:none;border:0;cursor:pointer}
.btn svg{width:18px;height:18px;flex:none}
.btn-wa{background:var(--green);color:#fff}
.btn-amber{background:var(--amber);color:var(--navy)}
.btn-line{background:transparent;color:#fff;border:1.5px solid #FFFFFF59}
.btn-dark{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.btns{display:flex;flex-direction:column;gap:10px;margin-top:4px}

/* nav */
.nav{background:var(--navy);color:#fff}
.nav .bar{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{display:flex;align-items:center;gap:8px;background:#fff;border-radius:6px;padding:6px 10px;text-decoration:none}
.brand img{width:46px;height:auto}
.brand span{font-size:9px;font-weight:700;letter-spacing:1.4px;color:var(--navy)}
.nav-links{display:none}
.nav-act{display:flex;align-items:center;gap:14px}
.nav-act a{color:#fff;display:flex}
.nav-act svg{width:24px;height:24px}
.nav-act .wa{color:var(--amber)}
.nav-cta{display:none}
#menu{display:none}
#menu:checked+.drawer{display:block}
.drawer{display:none;background:var(--navy-deep);padding:8px var(--pad) 18px}
.drawer a{display:block;padding:11px 0;color:#FFFFFFD9;text-decoration:none;border-bottom:1px solid #FFFFFF24;font-size:15px}
.burger{cursor:pointer;display:flex}

/* breadcrumb */
.crumb{background:var(--steel);font-size:12px;color:var(--muted);padding:11px 0}
.crumb a{text-decoration:none;color:var(--muted)}
.crumb b{color:var(--ink);font-weight:600}

/* hero */
.hero-img{width:100%;height:200px;object-fit:cover}
.prod-img{width:100%;height:230px;object-fit:contain;background:var(--steel);border-radius:10px}
.trust{font-size:12.5px;color:#FFFFFFA8}

/* stats */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.stat{background:var(--cream);padding:14px 12px}
.stat b{display:block;font-family:var(--head);font-size:22px;font-weight:800;color:var(--navy);line-height:1.1}
.stat span{font-size:11.5px;color:var(--muted);line-height:1.45}

/* rows */
.rows{display:flex;flex-direction:column}
.row{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--border);align-items:flex-start}
.rows .row:first-child{border-top:0}
.navy .row,.deep .row{border-color:#FFFFFF24}
.ico{width:32px;height:32px;flex:none;border-radius:8px;background:#F4C0422e;display:flex;align-items:center;justify-content:center}
.ico svg{width:16px;height:16px;color:var(--amber-dark)}
.navy .ico svg,.deep .ico svg{color:var(--amber)}
.row .tick{width:17px;height:17px;flex:none;color:var(--amber-dark);margin-top:2px}
.navy .row .tick,.deep .row .tick{color:var(--amber)}
.row p{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:4px}
.navy .row p,.deep .row p{color:#FFFFFFB8}

/* product cards */
.prods{display:flex;flex-direction:column;gap:12px}
.pcard{display:flex;gap:14px;align-items:center;padding:14px;background:#fff;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:inherit}
.pcard img{width:76px;height:76px;flex:none;object-fit:contain;background:var(--steel);border-radius:8px}
.pcard p{font-size:13px;line-height:1.5;color:var(--muted);margin-top:5px}

/* option list */
.opts{display:flex;flex-direction:column;gap:14px}
.opt{border-left:3px solid var(--amber-dark);padding-left:14px}
.opt p{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:5px}

/* faq */
.faq details{border-bottom:1px solid var(--border);padding:16px 0}
.faq summary{display:flex;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;font-family:var(--head);font-size:15.5px;font-weight:700;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;font-weight:400;color:var(--muted);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:9px;font-size:14px;line-height:1.6;color:var(--muted)}

/* data list */
.data{display:flex;flex-direction:column}
.data div{padding:12px 0;border-top:1px solid var(--border)}
.data div:first-child{border-top:0}
.navy .data div,.deep .data div{border-color:#FFFFFF24}
.data dt{font-size:10.5px;font-weight:700;letter-spacing:1.3px;color:var(--amber-dark);margin:0}
.navy .data dt,.deep .data dt{color:var(--amber)}
.data dd{margin:4px 0 0;font-family:var(--head);font-size:14.5px;font-weight:600;line-height:1.45}

/* cta band */
.cta{background:var(--navy);color:#fff;text-align:center;padding:44px 0}
.cta h2{font-size:26px;font-weight:800}
.cta p{margin:13px auto 0;font-size:14.5px;color:#FFFFFFB8;max-width:520px}
.cta .btns{margin-top:18px}

/* footer */
.ft{background:var(--navy-deep);color:#fff;padding:34px 0 24px;font-size:13.5px}
.ft a{color:#FFFFFFB2;text-decoration:none}
.ft .cols{display:flex;gap:16px;margin:22px 0}
.ft .cols div{flex:1}
.ft h4{font-size:11px;font-weight:700;letter-spacing:1.3px;color:var(--amber);margin:0 0 10px;font-family:var(--body)}
.ft li{list-style:none;margin:0 0 8px}
.ft ul{margin:0;padding:0}
.ft .tag{color:#FFFFFF9E;line-height:1.6}
.ft hr{border:0;border-top:1px solid #FFFFFF24;margin:22px 0}
.ft .cr{font-size:12px;color:#FFFFFF8A;line-height:1.55}
.chips{display:flex;gap:8px;margin-top:14px}
.chip{border:1px solid #FFFFFF24;background:#FFFFFF14;border-radius:999px;padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:1.2px;color:#FFFFFFCC}

/* sticky bar (mobile only) */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:10px;padding:11px var(--pad);background:#fff;border-top:1px solid var(--border)}
.sticky .btn{flex:1;padding:13px 8px;font-size:15px}
body{padding-bottom:70px}

/* ===== TABLET / DESKTOP ===== */
@media (min-width:768px){
  :root{--pad:40px}
  body{font-size:16px;padding-bottom:0}
  h1{font-size:46px;letter-spacing:-.9px;line-height:1.14}
  h2{font-size:36px;letter-spacing:-.6px;line-height:1.18}
  h3{font-size:17px}
  .sec{padding:76px 0}
  .lead{font-size:16px;line-height:1.65}
  .answer{font-size:17px;line-height:1.68}
  .eyebrow{font-size:12px;letter-spacing:1.6px}
  .eyebrow::before{width:30px}
  .sticky{display:none}
  .btns{flex-direction:row;gap:14px;margin-top:10px}
  .btn{padding:15px 26px}
  .nav .bar{height:84px}
  .brand{padding:9px 14px;gap:11px}
  .brand img{width:62px}
  .brand span{font-size:10px;letter-spacing:1.8px}
  .nav-links{display:flex;gap:34px}
  .nav-links a{color:#FFFFFFD9;text-decoration:none;font-size:15px;font-weight:500}
  .nav-cta{display:flex}
  .nav-act{display:none}
  .crumb{font-size:13px;padding:14px 0}
  .hero-img{height:100%;min-height:420px}
  .prod-img{height:400px}
  .trust{font-size:13px}
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat{padding:28px 24px}
  .stat b{font-size:34px}
  .stat span{font-size:13px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px 56px;align-items:start}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .rows.grid2 .row:nth-child(2){border-top:0}
  .prods{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .pcard{flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
  .pcard img{width:100%;height:196px;border-radius:0}
  .pcard .pc-body{padding:24px}
  .pcard p{font-size:14px}
  .opts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .opt p{font-size:14.5px;line-height:1.6}
  .row p{font-size:14.5px;line-height:1.62}
  .ico{width:42px;height:42px;border-radius:10px}
  .ico svg{width:20px;height:20px}
  .faq summary{font-size:17px}
  .faq details p{font-size:15px;line-height:1.62}
  .faq details{padding:26px 0}
  .cta{padding:72px 0}
  .cta h2{font-size:38px}
  .cta p{font-size:16px;max-width:640px}
  .cta .btns{justify-content:center}
  .ft{padding:64px 0 34px;font-size:14px}
  .ft .cols{gap:56px;margin:0}
  .ft-top{display:grid;grid-template-columns:344px 1fr;gap:56px}
  .data dd{font-size:15px}
  .hero-split{display:grid;grid-template-columns:1fr 580px;gap:0;align-items:stretch}
  .hero-split .hero-copy{padding:64px 0;display:flex;flex-direction:column;justify-content:center;gap:22px}
  .prod-split{display:grid;grid-template-columns:1fr 470px;gap:64px;align-items:start}
}
@media (min-width:1024px){
  :root{--pad:80px}
  h1{font-size:52px}
}