/* hero.css: homepage hero + example strip styles, shared with inner pages. Copied from index.html 2026-11-02 */
/* minis */
.mini-track{gap:22px;align-items:flex-start}
.marquee:hover .mini-track{animation-play-state:paused}
.mini{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;width:300px;text-decoration:none;color:var(--ink)}
.mini-win{display:block;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(11,11,11,.08),0 0 0 1px rgba(11,11,11,.06);transition:transform .2s ease,box-shadow .2s ease}
.mini:hover .mini-win{transform:translateY(-4px);box-shadow:0 18px 36px rgba(11,11,11,.12),0 0 0 1px rgba(11,11,11,.06)}
.mini-chrome{display:flex;gap:5px;padding:9px 11px;background:#F1EEE7;border-bottom:1px solid #E7E2D7}
.mini-chrome i{width:7px;height:7px;border-radius:50%;background:#DCD5C7}
.mini-chrome i:nth-child(1){background:#F26D5F}.mini-chrome i:nth-child(2){background:#F5BD4F}.mini-chrome i:nth-child(3){background:#5FC454}
.mini-body{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:center;height:150px;padding:14px 14px 14px 16px}
.mini-copy{display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left}
.mini-logo{display:flex;align-items:center;gap:6px;font:700 12px var(--sans);letter-spacing:-.01em}
.mini-logo b{width:18px;height:18px;border-radius:5px;background:var(--a);color:var(--on);display:grid;place-items:center;font-size:10px}
.mini-h{font-family:var(--hf);font-weight:700;font-size:17px;line-height:1.08;letter-spacing:-.015em;color:#141414}
.mini-h em{font-style:normal;color:var(--a);filter:brightness(.85)}
.mini-btn{font:600 10.5px var(--sans);background:var(--a);color:var(--on);padding:6px 11px;border-radius:99px}
.mini-img{display:block;height:100%;border-radius:10px;background-size:cover;background-position:center}
.mini-cap{font:500 13px var(--sans);color:var(--ink-soft);padding-left:4px}
.mini-cap span{opacity:.6}
@media (max-width:600px){.mini{width:250px}.mini-body{height:128px}.mini-h{font-size:15px}}
/* picxelo-hero */
.ph{--jak:'Plus Jakarta Sans',sans-serif;--ph-ink:#181225;--ph-soft:#5b5470;--ph-line:#ECE5DA;--ph-coral:#F25C3A;--ph-grad:linear-gradient(110deg,#F25C3A,#B455C8 55%,#7C5CFF);--ease:cubic-bezier(.22,1,.36,1);padding:clamp(28px,4vw,48px) 0 clamp(28px,4vw,48px);position:relative;overflow:hidden;text-align:left;color:var(--ph-ink)}
.ph-grid{max-width:1440px;margin:0 auto;padding:0 var(--gutter-tight,clamp(16px,4vw,40px));display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,80px);align-items:center}
.ph-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--ph-coral);background:#FFE4DA;padding:8px 16px;border-radius:999px;margin-bottom:24px;font:600 11.5px var(--jak);text-transform:uppercase;letter-spacing:.16em}
.ph-pip{width:7px;height:7px;border-radius:50%;background:var(--ph-coral)}
.ph-h1{font-family:var(--jak);font-weight:700;font-size:clamp(42px,5.8vw,74px);line-height:1.03;letter-spacing:-.02em;margin:0 0 22px;max-width:none;color:var(--ph-ink)}
.ph-h1 em{font-style:normal}
.ph-grad{color:var(--ph-coral)}
.ph-sub{font-family:'Inter',system-ui,sans-serif;font-size:19px;line-height:1.6;color:var(--ph-soft);max-width:580px;margin:0 0 30px}
.ph-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:28px}
.ph-btn{display:inline-flex;align-items:center;gap:9px;font:600 15px var(--jak);padding:14px 26px;border-radius:999px;border:2px solid transparent;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s;white-space:nowrap}
.ph-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ph-btn-coral{background:var(--ph-coral);color:#fff;box-shadow:0 12px 26px -10px rgba(242,92,58,.7)}
.ph-btn-coral:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(242,92,58,.8)}
.ph-btn-line{background:transparent;color:var(--ph-ink);border-color:#ddd3c4}
.ph-btn-line:hover{color:var(--ph-ink);border-color:var(--ph-ink);transform:translateY(-2px)}
.ph-specs{display:flex;gap:20px;flex-wrap:wrap;color:var(--ph-soft);font:600 11.5px var(--jak);text-transform:uppercase;letter-spacing:.16em}
.ph-specs>span{display:inline-flex;align-items:center;gap:8px}
.ph-tick{width:18px;height:18px;border-radius:50%;background:#DDF4EC;display:grid;place-items:center;flex:0 0 auto}
.ph-tick::after{content:"";width:5px;height:8px;border:solid #22B98F;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.ph-card{position:relative;z-index:0;border-radius:46px;padding:14px;background:#fff;border:1px solid var(--ph-line);box-shadow:0 40px 80px -40px rgba(242,92,58,.45),0 10px 30px -16px rgba(0,0,0,.1)}
.ph-card::after{content:"";position:absolute;inset:-2px;border-radius:48px;z-index:-1;background:var(--ph-grad);opacity:.45;filter:blur(22px)}
.ph-show{position:relative;aspect-ratio:1/1.02;border-radius:30px;overflow:hidden;background:#fff}
.ph-slide{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transition:opacity .7s var(--ease);background:#fff;color:#141414;text-decoration:none}
.ph-slide.on{opacity:1;z-index:1}
.ph-s-chrome{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#F3EEE6;border-bottom:1px solid #E9E2D6;flex:0 0 auto}
.ph-s-chrome i{width:9px;height:9px;border-radius:50%;background:#ddd}
.ph-s-chrome i:nth-child(1){background:#F26D5F}.ph-s-chrome i:nth-child(2){background:#F5BD4F}.ph-s-chrome i:nth-child(3){background:#5FC454}
.ph-s-chrome span{margin-left:12px;flex:1;max-width:58%;font:500 11px var(--jak);color:#8a8272;background:#fff;border:1px solid #E9E2D6;border-radius:7px;padding:4px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-s-nav{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid #f0ebe3}
.ph-s-logo{width:24px;height:24px;border-radius:7px;background:var(--a);color:var(--on);display:grid;place-items:center;font:800 12px var(--jak)}
.ph-s-name{font:700 14px var(--jak);flex:1}
.ph-s-links{display:flex;gap:12px;font:400 11px 'Inter',sans-serif;color:#6b6457}
.ph-s-call{font:600 11px var(--jak);background:var(--a);color:var(--on);padding:6px 11px;border-radius:99px}
.ph-s-img{flex:1 1 auto;margin:14px 18px 0;border-radius:16px;background-size:cover;background-position:center;min-height:0}
.ph-s-body{padding:16px 18px 20px;flex:0 0 auto}
.ph-s-eye{display:block;font:700 10px var(--jak);letter-spacing:.1em;text-transform:uppercase;color:var(--a);filter:brightness(.85)}
.ph-s-h{display:block;font-family:var(--hf);font-weight:700;font-size:clamp(20px,2.2vw,27px);line-height:1.06;letter-spacing:-.02em;margin:6px 0 12px}
.ph-s-h em{font-style:normal;color:var(--a);filter:brightness(.85)}
.ph-s-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ph-s-b1{font:600 12px var(--jak);background:var(--a);color:var(--on);padding:8px 14px;border-radius:99px}
.ph-s-b2{font:600 12px var(--jak);box-shadow:inset 0 0 0 1.5px #141414;padding:8px 14px;border-radius:99px}
.ph-s-t{font:400 11px 'Inter',sans-serif;color:#555;margin-left:6px}
.ph-floats{position:absolute;inset:0;pointer-events:none;z-index:2}
.ph-chip{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:#fff;border:1px solid var(--ph-line);font:600 12.5px 'Inter',sans-serif;color:var(--ph-ink);box-shadow:0 12px 28px -12px rgba(0,0,0,.25);animation:phbob 5s var(--ease) infinite}
.ph-d{width:8px;height:8px;border-radius:50%}
.ph-c1{top:16%;right:-16px;animation-delay:.2s}
.ph-c2{bottom:20%;left:-18px;animation-delay:1.4s}
@keyframes phbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.ph-dots{display:flex;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.ph-dots button{font:600 12px var(--jak);border:1px solid var(--ph-line);background:#fff;color:var(--ph-soft);padding:6px 12px;border-radius:99px;cursor:pointer}
.ph-dots button.on{background:var(--ph-ink);color:#fff;border-color:var(--ph-ink)}
@media (max-width:980px){.ph-grid{grid-template-columns:1fr;gap:40px}.ph-card{max-width:460px;margin:0 auto}}
@media (max-width:600px){.ph-sub{font-size:17px}.ph-chip{display:none}.ph-btn{padding:13px 22px}}
@media (prefers-reduced-motion:reduce){.ph-chip{animation:none}.ph-slide{transition:none}}