/* ===== Shared Perkomo site styles (DESIGN-SYSTEM.md: Archivo, flat colours, thin borders, no blobs or glass) ===== */
/* Archivo is self-hosted (SIL Open Font License, see ../fonts/OFL.txt). */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:swap;
  src:url(../fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:swap;
  src:url(../fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

[hidden]{display:none!important}
.sitenav{position:sticky;top:0;z-index:50;margin:0 -24px;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--paper);border-bottom:1px solid var(--line)}
.sitenav .links{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-weight:700;font-size:16px}
.sitenav .links a{color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.sitenav .links a:hover{color:var(--violet)}
.sitenav .links a[aria-current="page"]{border-bottom-color:var(--violet)}
.sitenav .links a.navcta{background:var(--violet);color:#fff;padding:10px 16px;border-radius:12px;border:0}
.btn{transition:filter .15s ease}
.glass{background:var(--card);border:1px solid var(--line);border-radius:20px}

/* dark hero with 3D card stack */
.xhero{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;margin:20px 0 8px;padding:48px;border-radius:30px;color:#fff;position:relative;overflow:hidden;
  background:#1D1A33;border-top:6px solid var(--yellow)}
.xhero h1{color:#fff}
.xhero .lead{color:#D9D4F5}
.xhero .chips2{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.xhero .chips2 span{border:1px solid rgba(255,255,255,.35);padding:7px 12px;border-radius:99px;font-size:14px;font-weight:700;color:#fff}
.xhero .btn{color:#fff;border-color:rgba(255,255,255,.5)}
.stage3d{height:380px;perspective:1200px;display:grid;place-items:center}
.stack3d{position:relative;width:290px;height:176px;transform-style:preserve-3d;transform:rotateX(var(--rx,52deg)) rotateZ(var(--rz,-32deg));transition:transform .3s ease-out}
.c3{position:absolute;inset:0;border-radius:18px;padding:16px 18px;color:#fff;box-shadow:0 30px 40px -20px rgba(0,0,0,.6);animation:float3 6s ease-in-out infinite}
.c3 b{font:800 18px/1 var(--display);display:block;color:#fff}
.c3 small{opacity:.85;font-size:12px;color:#fff}
.c3 .d3{display:flex;gap:5px;margin-top:14px}
.c3 .d3 i{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.3)}
.c3 .d3 i.on{background:#fff}
.c3.a{background:#C2410C;transform:translateZ(0)}
.c3.b{background:#1E6FB8;transform:translateZ(46px);animation-delay:-2s}
.c3.c{background:#2F8F5B;transform:translateZ(92px);animation-delay:-4s}
.c3.d{background:#2B2453;transform:translateZ(150px);animation-delay:-1s;border:1px solid rgba(255,255,255,.25);display:flex;gap:14px;align-items:center}
.c3.d .q{width:96px;height:96px;background:#fff;border-radius:10px;padding:6px;flex:none}
.c3.d .q svg{width:100%;height:100%;display:block}
@keyframes float3{0%,100%{margin-top:0}50%{margin-top:-10px}}
[data-tilt]{transition:transform .25s ease-out;transform-style:preserve-3d;will-change:transform}
.tiltzone{perspective:1200px}

.sitefoot{margin-top:72px;padding:36px 0 48px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;font-size:15px;color:var(--ink-2)}
.sitefoot h3{font-size:15px;color:var(--ink);margin-bottom:10px}
.sitefoot a{color:var(--ink-2);text-decoration:none;display:block;padding:3px 0}
.sitefoot a:hover{color:var(--violet)}
.sitefoot p{margin:8px 0 0;max-width:34ch}
@media (max-width:900px){.xhero{grid-template-columns:1fr;padding:28px}.stage3d{height:300px}.sitefoot{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sitefoot{grid-template-columns:1fr}.sitenav .links{gap:14px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.c3{animation:none!important}}

/* ===== Grounded style: wins over page-level card, button and hero rules ===== */
:root{--display:"Archivo","Helvetica Neue",Arial,sans-serif;--body:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
body{font-family:var(--body);letter-spacing:0}
h1,h2,h3,.logo,.pname,.pprice,.price,.metric b,.c3 b,.pass .ph,.pass .prim b,.shopname,.step::before,.big,.applist b,.method b,.reach b{font-family:var(--display);font-stretch:125%}
h1{letter-spacing:-.025em}
h2,h3{letter-spacing:-.015em}
.xhero h1,.hero h1{font-size:clamp(32px,4.4vw,54px)!important;max-width:17ch;font-weight:800}
.glass,.panel,.designer,.plan,.compare,.dash,.trust,.formcard,.method,.area,.doc{background:var(--card)!important;border:1px solid var(--line)!important;box-shadow:0 1px 2px rgba(29,26,51,.06)!important}
.plan{border-top:4px solid var(--ink)!important}
.plan-main{border:2px solid var(--violet)!important;border-top:4px solid var(--violet)!important}
.plan:hover,.method:hover,.metric:hover,.shopcard:hover{transform:none!important;box-shadow:0 1px 2px rgba(29,26,51,.06)!important}
.btn-primary,.btn.primary,.sitenav .links a.navcta{background:var(--violet)!important;border-color:var(--violet)!important;box-shadow:none!important;color:#fff!important}
.btn.good{background:var(--green)!important;border-color:var(--green)!important;box-shadow:none!important}
.btn:hover{transform:none!important;filter:brightness(1.08)}
.xhero,.hero{background:#1D1A33!important;box-shadow:none!important;border-top:6px solid var(--yellow)}
.xhero .chips2 span,.hero .chips2 span{background:transparent!important;border:1px solid rgba(255,255,255,.35)!important}
.metric{background:var(--paper)!important;border:1px solid var(--line)}
.tabs button[aria-selected="true"]{box-shadow:none!important;border:1px solid var(--line)}
.phone{box-shadow:0 30px 50px -30px rgba(29,26,51,.5)!important}
.stampcard{box-shadow:0 20px 40px -24px rgba(0,0,0,.6)!important}
.compare{padding:0 20px!important}