/* ==========================================================================
   Simplex Solutions — website design system (ERPNext / Frappe v16)
   Mobile-first. Breakpoints: 480 (large phone) · 768 (tablet) · 1024 (laptop)
   · 1280 (desktop) · 1920 (wide). No framework, ~25 KB unminified.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --brand:#0B2A45;          /* navy */
  --brand-2:#0E3B60;
  --brand-blue:#1B75BB;
  --brand-orange:#F6921E;
  --orange-ink:#1A1200;     /* text on orange (AA contrast) */
  --green:#1F9D6B;
  --ink:#101828;
  --ink-2:#344054;
  --muted:#5B6472;
  --border:#E4E7EC;
  --bg:#F6F7F9;
  --surface:#fff;
  --tint:#F2F5FF;
  --accent:var(--brand-blue);
  --accent-ink:#fff;

  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:"Space Grotesk","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-sm:9px; --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow:0 16px 30px -14px rgba(20,40,80,.22);
  --shadow-lg:0 30px 60px -25px rgba(20,40,80,.28);
  --ease:cubic-bezier(.22,.9,.32,1);

  --wrap:1200px;
  --gutter:16px;
  --header-h:72px;
}
@media (min-width:768px){ :root{ --gutter:24px; } }
@media (min-width:1920px){ :root{ --wrap:1360px; } }

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }
body{ font-family:var(--font); font-size:16px; line-height:1.6; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; text-rendering:optimizeLegibility; }
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
h1,h2,h3,h4,h5{ font-family:var(--font-head); line-height:1.2; letter-spacing:-.015em; color:inherit; font-weight:700; }
:focus-visible{ outline:3px solid var(--brand-blue); outline-offset:2px; border-radius:4px; }
::selection{ background:rgba(246,146,30,.3); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--brand); color:#fff; padding:10px 16px; border-radius:var(--r-sm); font-weight:600; transition:top .2s; }
.skip-link:focus{ top:12px; }
main{ display:block; }
[hidden]{ display:none!important; }

/* ---------- 3. Buttons ---------- */
.btn,.ph-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:12px 22px; border-radius:999px; font-weight:700; font-size:14px; line-height:1.2; border:1px solid transparent; transition:transform .18s var(--ease), box-shadow .18s, background .18s, color .18s; text-align:center; }
.btn:hover,.ph-btn:hover{ transform:translateY(-2px); }
.btn-primary,.ph-btn.primary{ background:var(--brand-orange); color:var(--orange-ink); box-shadow:0 10px 22px -10px rgba(246,146,30,.7); }
.btn-primary:hover,.ph-btn.primary:hover{ box-shadow:0 14px 26px -10px rgba(246,146,30,.8); }
.btn-dark{ background:var(--brand); color:#fff; }
.btn-ghost,.ph-btn.alt{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); color:#fff; }
.btn-outline{ background:#fff; border-color:var(--border); color:var(--ink); }
.btn-outline:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }
.btn-sm{ min-height:40px; padding:9px 16px; font-size:13px; }

/* ---------- 4. Notice bar ---------- */
.noticebar{ position:relative; display:flex; align-items:center; background:#06101F; color:#93A0B5; font-size:12.5px; line-height:1.7; overflow:hidden; white-space:nowrap; }
.noticebar b{ color:var(--brand-orange); }
.noticebar a{ color:#9CC4FF; }
.noticebar a:hover{ text-decoration:underline; }
.noticebar .sep{ opacity:.4; margin:0 14px; }
/* fade the edges */
.noticebar::before,.noticebar::after{ content:""; position:absolute; top:0; bottom:0; width:40px; z-index:2; pointer-events:none; }
.noticebar::before{ left:0; background:linear-gradient(90deg,#06101F,transparent); }
.noticebar::after{ right:40px; background:linear-gradient(-90deg,#06101F,transparent); }
.nb-track{ display:flex; flex:1; min-width:0; padding:7px 0; }
.nb-group{ display:flex; flex-shrink:0; align-items:center; padding-left:14px; animation:nbScroll var(--nb-speed,40s) linear infinite; }
.noticebar:hover .nb-group,.noticebar:focus-within .nb-group,.noticebar.paused .nb-group{ animation-play-state:paused; }
@keyframes nbScroll{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
.nb-pause{ position:relative; z-index:3; flex-shrink:0; width:40px; height:34px; border:0; background:#06101F; color:#93A0B5; display:inline-flex; align-items:center; justify-content:center; }
.nb-pause span{ width:8px; height:10px; border-left:2px solid currentColor; border-right:2px solid currentColor; }
.noticebar.paused .nb-pause span{ width:0; height:0; border:0; border-left:8px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.nb-pause:hover{ color:#fff; }
@media (prefers-reduced-motion:reduce){
  .nb-group{ animation:none!important; }
  .nb-group[aria-hidden="true"],.nb-pause{ display:none; }
  .nb-track{ overflow-x:auto; }
}

/* ---------- 5. Header & navigation ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); border-bottom:1px solid var(--border); transition:box-shadow .3s; }
@supports (backdrop-filter:blur(8px)){ .site-header{ background:rgba(255,255,255,.88); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); } }
.site-header.scrolled{ box-shadow:0 8px 24px -12px rgba(11,28,61,.25); }
.headrow{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; }
.logo-link{ flex-shrink:0; display:block; }
.logo-img{ height:52px; width:auto; transition:height .25s var(--ease); }
.site-header.scrolled .logo-img{ height:46px; }

.hamburger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:10px; background:none; border:0; border-radius:10px; z-index:61; }
.hamburger span{ display:block; height:2px; width:100%; background:var(--brand); border-radius:2px; transition:transform .25s, opacity .25s; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer (default) */
.nav-panel{ position:fixed; top:0; right:0; bottom:0; width:min(340px,88vw); height:100vh; height:100dvh; background:#fff; z-index:60; display:none; flex-direction:column; padding:76px 20px 28px; overflow-y:auto; overscroll-behavior:contain; box-shadow:-12px 0 32px -12px rgba(11,28,61,.3); }
.nav-panel.open{ display:flex; animation:drawerIn .32s var(--ease); }
@keyframes drawerIn{ from{ transform:translateX(100%); } to{ transform:none; } }
.nav-scrim{ position:fixed; inset:0; background:rgba(6,16,31,.45); z-index:55; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.nav-scrim.show{ opacity:1; visibility:visible; }
.nav-list{ display:flex; flex-direction:column; }
.nav-item{ position:relative; border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center; }
.nav-link{ flex:1; display:flex; align-items:center; min-height:48px; padding:10px 4px; font-weight:600; font-size:15px; color:var(--ink-2); transition:color .15s; }
.nav-link:hover,.nav-item.current > .nav-link{ color:var(--brand-blue); }
.dd-toggle{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; color:var(--muted); border-radius:8px; }
.dd-toggle svg{ width:16px; height:16px; transition:transform .2s; }
.nav-item.open .dd-toggle svg{ transform:rotate(180deg); }
.dropdown{ display:none; width:100%; padding:0 4px 12px; }
.nav-item.open .dropdown{ display:block; }
.dropdown a{ display:flex; align-items:center; min-height:40px; padding:8px 10px; font-size:14px; font-weight:500; color:#475467; border-radius:8px; }
.dropdown a:hover{ background:var(--tint); color:var(--brand-blue); }
.dd-label{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:10px 10px 4px; }
.head-actions{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.cta-pill{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; background:var(--brand-orange); color:var(--orange-ink); font-weight:700; padding:10px 18px; border-radius:999px; font-size:13.5px; white-space:nowrap; animation:ctaPulse 2.6s ease-in-out infinite; }
.head-phone{ white-space:nowrap; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--ink-2); min-height:44px; }
.head-phone svg{ width:18px; height:18px; color:var(--brand-blue); }
@keyframes ctaPulse{ 0%{ box-shadow:0 0 0 0 rgba(246,146,30,.45); } 70%{ box-shadow:0 0 0 10px rgba(246,146,30,0); } 100%{ box-shadow:0 0 0 0 rgba(246,146,30,0); } }
body.nav-locked{ overflow:hidden; }
body.nav-locked .site-header{ z-index:70; }

/* Desktop navigation */
@media (min-width:1100px){
  .hamburger,.nav-scrim{ display:none; }
  .logo-img{ height:58px; }
  .nav-panel,.nav-panel.open{ position:static; display:flex; animation:none; width:auto; height:auto; padding:0; flex-direction:row; align-items:center; flex:1; justify-content:space-between; gap:20px; background:none; box-shadow:none; overflow:visible; transition:none; }
  .nav-list{ flex-direction:row; gap:2px; }
  .nav-item{ border:0; flex-wrap:nowrap; }
  .nav-link{ font-size:14px; min-height:44px; padding:10px 4px 10px 12px; flex:none; }
  .dd-toggle{ width:26px; height:44px; padding-right:6px; }
  .dd-toggle svg{ width:13px; height:13px; }
  .dropdown{ display:block; position:absolute; top:calc(100% + 6px); left:0; min-width:230px; background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:10px; box-shadow:0 24px 48px -16px rgba(11,28,61,.32); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s, transform .18s, visibility .18s; z-index:70; }
  .dropdown::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } /* hover bridge */
  .nav-item:hover .dropdown,.nav-item:focus-within .dropdown,.nav-item.open .dropdown{ opacity:1; visibility:visible; transform:none; }
  .dropdown a{ font-size:13.5px; min-height:36px; white-space:nowrap; }
  .dropdown-wide{ display:flex; gap:18px; min-width:600px; padding:14px; left:50%; transform:translate(-50%,6px); }
  .nav-item:hover .dropdown-wide,.nav-item:focus-within .dropdown-wide,.nav-item.open .dropdown-wide{ transform:translate(-50%,0); }
  .nav-item:first-child .dropdown-wide{ left:0; transform:translateY(6px); }
  .dd-col{ min-width:170px; }
  .nav-item.current > .nav-link{ color:var(--brand-blue); box-shadow:inset 0 -2px 0 var(--brand-blue); }
  .head-actions{ flex-direction:row; align-items:center; margin:0; gap:16px; }
}
@media (min-width:1100px) and (max-width:1279px){ .head-phone span{ display:none; } }

/* ---------- 6. Page hero (inner pages) ---------- */
.page-hero{ position:relative; overflow:hidden; color:#fff; padding:52px 0 46px; background:var(--brand); isolation:isolate; }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 85% 20%,rgba(27,117,187,.55),transparent 55%),linear-gradient(120deg,var(--brand) 0%,var(--brand-2) 100%); }
.page-hero::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.18; background-image:linear-gradient(30deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(-30deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:46px 80px; }
.theme-prepaid .page-hero::after{ background:radial-gradient(circle at 85% 20%,rgba(246,146,30,.42),transparent 55%),linear-gradient(120deg,var(--brand) 0%,#3A2408 100%); }
.theme-marketing .page-hero::after{ background:radial-gradient(circle at 85% 20%,rgba(31,157,107,.45),transparent 55%),linear-gradient(120deg,var(--brand) 0%,#0E3B27 100%); }
.theme-prepaid{ --accent:var(--brand-orange); --accent-ink:var(--orange-ink); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:rgba(255,255,255,.75); margin-bottom:14px; }
.breadcrumb li+li::before{ content:"/"; margin-right:6px; opacity:.6; }
.breadcrumb a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.page-hero h1{ font-size:clamp(28px,5.2vw,48px); max-width:780px; }
.page-hero .lead{ font-size:clamp(15px,1.6vw,17px); color:rgba(255,255,255,.86); max-width:640px; margin-top:16px; line-height:1.65; }
.page-hero-ctas{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
@media (min-width:768px){ .page-hero{ padding:72px 0 64px; } }

/* ---------- 7. Sections & cards ---------- */
.section{ padding:44px 0; }
@media (min-width:768px){ .section{ padding:64px 0; } }
.panel{ background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:36px 20px; margin-block:12px; }
@media (min-width:768px){ .panel{ padding:50px 32px; } }
.section-head{ margin-bottom:28px; }
.section-head h2{ font-size:clamp(22px,3.2vw,32px); }
.section-head p{ font-size:15px; color:var(--muted); margin-top:8px; max-width:660px; }
.section-head.center{ text-align:center; }
.section-head.center p{ margin-inline:auto; }
.kicker{ display:inline-block; color:var(--brand-orange); font-weight:600; font-size:14px; letter-spacing:.02em; margin-bottom:8px; }

.row-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:480px){ .row-grid,.row-grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .row-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } .row-grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .row-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.svc{ background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:22px 20px; box-shadow:var(--shadow-sm); transition:transform .18s var(--ease), box-shadow .18s, border-color .18s; }
.svc:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(27,117,187,.5); }
.svc .num{ font-family:var(--font-head); font-size:12px; font-weight:600; color:var(--brand-blue); display:block; margin-bottom:10px; letter-spacing:.06em; }
.svc h4{ font-size:16px; margin-bottom:6px; }
.svc p{ font-size:14px; color:var(--muted); line-height:1.6; }
.svc a.more{ display:inline-flex; margin-top:10px; font-size:13.5px; font-weight:700; color:var(--brand-blue); }
.icon-badge{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#fff; background:var(--brand-blue); margin-bottom:14px; }

.biller-head{ margin:34px 0 14px; }
.biller-head h3{ font-size:18px; }
.biller-head p{ font-size:14px; color:var(--muted); }
.biller-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media (min-width:768px){ .biller-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } }
@media (min-width:1024px){ .biller-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.biller-tile{ background:#fff; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; aspect-ratio:1/1; transition:transform .15s, box-shadow .15s; }
.biller-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.biller-tile img{ width:100%; height:100%; object-fit:cover; }

.net-pill,.value-pill{ display:inline-block; background:#fff; border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-size:13.5px; font-weight:600; margin:4px 6px 0 0; }

.callout{ position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(135deg,var(--brand) 0%,var(--brand-blue) 100%); border-radius:22px; padding:40px 22px; color:#fff; text-align:center; }
.callout::before{ content:""; position:absolute; inset:-2px; z-index:-1; background:conic-gradient(from 0deg,var(--brand-blue),var(--brand-orange),var(--green),var(--brand-blue)); filter:blur(30px); opacity:.3; }
.callout h2{ font-size:clamp(22px,3.2vw,32px); margin-bottom:12px; }
.callout p{ color:rgba(255,255,255,.88); font-size:15px; max-width:600px; margin:0 auto 24px; }
.callout.prose{ text-align:left; padding:32px 24px; }
.callout.prose p{ max-width:none; margin:0 0 14px; }
.callout.prose p:last-child{ margin-bottom:0; }
@media (min-width:768px){ .callout{ padding:52px 40px; } .callout.prose{ padding:40px 36px; } }

.steps{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
.step{ background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:22px; }
.step .n{ width:36px; height:36px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; margin-bottom:12px; }
.step h4{ font-size:16px; margin-bottom:6px; }
.step p{ font-size:14px; color:var(--muted); line-height:1.6; }

.pill-links{ display:flex; flex-wrap:wrap; gap:10px; }
.pill-links a,.pill-links span{ display:inline-flex; align-items:center; min-height:42px; background:#fff; border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-size:14px; font-weight:600; transition:transform .15s, border-color .15s, color .15s; }
.pill-links a:hover{ border-color:var(--brand-blue); color:var(--brand-blue); transform:translateY(-2px); }

.team-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px; text-align:center; }
.team-avatar{ width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--brand-blue),var(--brand-orange)); margin:0 auto 14px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:20px; }
.team-card h4{ font-size:16px; margin-bottom:4px; }
.team-card p{ font-size:14px; color:var(--muted); }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1.3fr 1fr; gap:28px; } }
.contact-form{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:24px; box-shadow:var(--shadow-sm); }
@media (min-width:768px){ .contact-form{ padding:32px; } }
.contact-form h3{ font-size:20px; margin-bottom:6px; }
.contact-form > p{ font-size:14px; color:var(--muted); }
.contact-form label{ display:block; font-size:13.5px; font-weight:600; margin:16px 0 6px; }
.contact-form input,.contact-form select,.contact-form textarea,.field{ width:100%; min-height:46px; padding:11px 14px; border:1px solid #D0D5DD; border-radius:var(--r-sm); font-size:16px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus,.field:focus{ outline:0; border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(27,117,187,.15); }
.contact-form textarea{ min-height:130px; resize:vertical; }
.contact-form button{ margin-top:20px; }
.contact-side .svc{ margin-bottom:14px; }
.form-status{ font-size:14px; margin-top:12px; min-height:1.4em; }
.form-status.ok{ color:#067647; } .form-status.err{ color:#B42318; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* FAQ (native <details>) */
.faq-item{ background:#fff; border:1px solid var(--border); border-radius:var(--r); margin-bottom:12px; overflow:hidden; }
.faq-q{ list-style:none; padding:18px 20px; min-height:56px; font-weight:700; font-size:15px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::after{ content:"+"; flex-shrink:0; font-size:22px; line-height:1; color:var(--brand-blue); transition:transform .2s; }
.faq-item[open] .faq-q::after,.faq-item.open .faq-q::after{ transform:rotate(45deg); }
.faq-a{ padding:0 20px 18px; font-size:14.5px; color:var(--muted); line-height:1.65; }
.kb-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:20px; }
.kb-card h4{ font-size:15px; margin-bottom:6px; }
.kb-card p{ font-size:14px; color:var(--muted); }

/* ---------- 8. Home page ---------- */
.home-top{ padding-top:20px; }
@media (min-width:768px){ .home-top{ padding-top:32px; } }
.hero-shell{ position:relative; background:#fff; border-radius:var(--r-xl); padding:8px; box-shadow:0 0 0 1px #EEF1F4, var(--shadow-lg); margin-bottom:44px; }
@media (min-width:768px){ .hero-shell{ padding:14px; margin-bottom:60px; } }
.hero-shell::before{ content:""; position:absolute; inset:-2px; border-radius:30px; z-index:-1; background:conic-gradient(from 0deg,var(--brand-blue),var(--brand-orange),var(--green),var(--brand-blue)); filter:blur(18px); opacity:.45; }
.hero{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:460px; background:var(--brand); }
@media (min-width:768px){ .hero{ min-height:480px; } }
.slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s, visibility .9s; display:flex; align-items:center; justify-content:center; text-align:center; padding:56px 20px 60px; }
@media (min-width:768px){ .slide{ padding:72px 40px 64px; } }
.slide.active{ opacity:1; visibility:visible; z-index:2; }
.slide video,.slide .slide-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.slide::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(135deg,rgba(8,18,42,.9) 0%,rgba(15,40,80,.8) 45%,rgba(35,95,160,.7) 100%); }
.slide[data-pillar="prepaid"]::after{ background:linear-gradient(135deg,rgba(42,26,8,.9) 0%,rgba(80,50,15,.8) 45%,rgba(160,110,35,.68) 100%); }
.slide[data-pillar="marketing"]::after{ background:linear-gradient(135deg,rgba(8,30,22,.9) 0%,rgba(15,55,40,.8) 45%,rgba(35,120,85,.68) 100%); }
.slide-content{ position:relative; z-index:3; max-width:740px; }
.slide .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; }
.slide[data-pillar="it"] .eyebrow{ color:#9CC4FF; } .slide[data-pillar="prepaid"] .eyebrow{ color:var(--brand-orange); } .slide[data-pillar="marketing"] .eyebrow{ color:#6EE0AE; }
.slide h1,.slide h2{ color:#fff; font-size:clamp(26px,4.4vw,44px); line-height:1.15; }
.slide p{ color:rgba(255,255,255,.88); font-size:clamp(15px,1.6vw,17px); max-width:580px; margin:16px auto 0; }
.slide-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.slide-cta{ display:inline-flex; align-items:center; min-height:46px; font-weight:700; font-size:14px; padding:12px 22px; border-radius:999px; color:#0B1420; transition:transform .2s, box-shadow .2s; }
.slide-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(0,0,0,.35); }
.slide[data-pillar="it"] .slide-cta{ background:#9CC4FF; } .slide[data-pillar="prepaid"] .slide-cta{ background:var(--brand-orange); } .slide[data-pillar="marketing"] .slide-cta{ background:#6EE0AE; }
.slide .slide-cta.alt{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); color:#fff; }
.hero-nav{ position:absolute; bottom:14px; left:0; right:0; z-index:4; display:flex; justify-content:center; gap:4px; }
.hero-dot{ width:44px; height:24px; background:none; border:0; padding:0; display:flex; align-items:center; }
.hero-dot::before{ content:""; display:block; width:100%; height:4px; border-radius:2px; background:rgba(255,255,255,.35); transition:background .2s; }
.hero-dot.active::before,.hero-dot:hover::before{ background:#fff; }

.cards{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:768px){ .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } }
.card{ position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-lg); padding:30px 24px 26px; color:#fff; min-height:260px; display:flex; flex-direction:column; transition:transform .2s var(--ease), box-shadow .2s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background-image:linear-gradient(30deg,rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(-30deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:34px 60px; }
.card.it{ background:linear-gradient(160deg,var(--brand-blue) 0%,var(--brand) 100%); }
.card.prepaid{ background:linear-gradient(160deg,#E0820F 0%,#9A5F0A 100%); }
.card.marketing{ background:linear-gradient(160deg,var(--green) 0%,#145C40 100%); }
.card .stat{ font-family:var(--font-head); font-size:26px; font-weight:700; }
.card .badge{ display:inline-block; background:rgba(255,255,255,.2); font-size:11px; font-weight:700; letter-spacing:.05em; padding:7px 14px; border-radius:999px; margin-top:14px; width:fit-content; }
.card ul{ margin-top:16px; font-size:14px; color:rgba(255,255,255,.94); }
.card li{ padding:3px 0 3px 16px; position:relative; }
.card li::before{ content:"—"; position:absolute; left:0; opacity:.7; }
.card a.card-link{ margin-top:auto; padding-top:20px; font-size:14px; font-weight:700; color:#fff; display:inline-flex; align-items:center; gap:6px; }
.card a.card-link::after{ content:""; position:absolute; inset:0; } /* whole card clickable */

/* ---------- 9. Reveal & motion ---------- */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .js .reveal{ opacity:1; transform:none; }
}

/* ---------- 10. Blog: listing ---------- */
.news-toolbar{ display:flex; flex-direction:column; gap:14px; margin-bottom:28px; }
@media (min-width:900px){ .news-toolbar{ flex-direction:row; align-items:center; justify-content:space-between; } }
.chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.chip{ flex-shrink:0; display:inline-flex; align-items:center; min-height:40px; padding:8px 16px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:14px; font-weight:600; color:var(--ink-2); transition:all .15s; }
.chip:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }
.chip[aria-current="page"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
.news-search{ display:flex; gap:8px; width:100%; }
@media (min-width:900px){ .news-search{ width:340px; } }
.news-search .field{ border-radius:999px; padding-inline:18px; }

.news-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:640px){ .news-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .news-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; } }

.news-card{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.news-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(27,117,187,.4); }
.news-card-media{ display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,var(--brand-blue),var(--brand)); }
.news-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.news-card:hover .news-card-media img{ transform:scale(1.06); }
.news-card-body{ display:flex; flex-direction:column; gap:10px; padding:20px 20px 22px; flex:1; }
.news-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:13px; color:var(--muted); }
.news-meta .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
.news-cat{ display:inline-flex; align-items:center; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-blue); background:var(--tint); padding:4px 10px; border-radius:999px; position:relative; z-index:2; }
.news-card h3{ font-size:19px; line-height:1.3; }
.news-card h3 a::after{ content:""; position:absolute; inset:0; z-index:1; } /* stretched link */
.news-card h3 a:hover{ color:var(--brand-blue); }
.news-card p{ font-size:14.5px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.read-more{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--brand-blue); }
.read-more svg{ width:16px; height:16px; transition:transform .2s; }
.news-card:hover .read-more svg{ transform:translateX(4px); }

.news-featured{ display:grid; grid-template-columns:1fr; margin-bottom:30px; }
@media (min-width:900px){ .news-featured{ grid-template-columns:1.25fr 1fr; } .news-featured .news-card-media{ aspect-ratio:auto; height:100%; min-height:360px; } .news-featured .news-card-body{ padding:36px; justify-content:center; } .news-featured h3{ font-size:clamp(24px,2.4vw,32px); } .news-featured p{ -webkit-line-clamp:4; font-size:16px; } }
.news-featured .feature-tag{ align-self:flex-start; font-size:12px; font-weight:700; color:var(--orange-ink); background:var(--brand-orange); padding:4px 10px; border-radius:999px; }

.news-empty{ text-align:center; background:#fff; border:1px dashed #D0D5DD; border-radius:var(--r-lg); padding:48px 20px; color:var(--muted); }
.news-empty h2{ color:var(--ink); font-size:22px; margin-bottom:8px; }

.pagination{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:40px; }
.pagination a,.pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--border); background:#fff; font-weight:600; font-size:14px; }
.pagination a:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }
.pagination [aria-current="page"]{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ---------- 11. Blog: article ---------- */
.article-hero{ padding:48px 0 0; }
.article-hero .page-hero-inner{ max-width:820px; }
.article-hero h1{ font-size:clamp(28px,5vw,46px); }
.article-hero .news-meta{ color:rgba(255,255,255,.82); margin-top:18px; font-size:14px; }
.article-hero .news-cat{ background:rgba(255,255,255,.14); color:#fff; }
.article-cover{ position:relative; z-index:2; max-width:1000px; margin:-96px auto 0; padding-inline:var(--gutter); }
.article-cover img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); background:#dfe5ee; }
.article-hero.has-cover{ padding-bottom:128px; }
@media (min-width:768px){ .article-cover{ margin-top:-140px; } .article-hero.has-cover{ padding-bottom:180px; } }
.article-wrap{ padding:40px 0 20px; }
.article-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; max-width:1100px; margin-inline:auto; }
@media (min-width:1100px){ .article-layout.has-toc{ grid-template-columns:minmax(0,1fr) 260px; } }
.article-main{ max-width:740px; width:100%; margin-inline:auto; }
.toc{ align-self:start; position:sticky; top:calc(var(--header-h) + 20px); background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:18px; font-size:14px; }
.toc h2{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:10px; }
.toc a{ display:block; padding:6px 0; color:var(--ink-2); border-left:2px solid transparent; padding-left:10px; }
.toc a:hover,.toc a.active{ color:var(--brand-blue); border-left-color:var(--brand-blue); }
.toc .lvl-3{ padding-left:22px; font-size:13.5px; }
@media (max-width:1099px){ .toc{ position:static; order:-1; } }

.prose{ font-size:17px; line-height:1.8; color:#2B3442; overflow-wrap:anywhere; }
.prose > * + *{ margin-top:1.15em; }
.prose h2{ font-size:clamp(22px,2.8vw,28px); margin-top:1.9em; color:var(--ink); }
.prose h3{ font-size:clamp(19px,2.2vw,22px); margin-top:1.6em; color:var(--ink); }
.prose a{ color:var(--brand-blue); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ color:#0F5A94; }
.prose ul,.prose ol{ padding-left:1.4em; }
.prose ul{ list-style:disc; } .prose ol{ list-style:decimal; }
.prose li + li{ margin-top:.4em; }
.prose img{ border-radius:var(--r); margin-inline:auto; box-shadow:var(--shadow-sm); }
.prose figure figcaption{ font-size:14px; color:var(--muted); text-align:center; margin-top:8px; }
.prose blockquote{ border-left:4px solid var(--brand-orange); background:#FFF7EC; padding:16px 22px; border-radius:0 12px 12px 0; color:var(--ink-2); font-style:italic; }
.prose pre{ background:#0F172A; color:#E2E8F0; padding:18px; border-radius:12px; overflow-x:auto; font-size:14px; line-height:1.6; }
.prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em; background:#EEF2F7; padding:2px 6px; border-radius:6px; }
.prose pre code{ background:none; padding:0; }
.prose table{ width:100%; border-collapse:collapse; display:block; overflow-x:auto; font-size:15px; }
.prose th,.prose td{ border:1px solid var(--border); padding:10px 12px; text-align:left; }
.prose th{ background:var(--bg); }
.prose iframe,.prose video{ max-width:100%; border-radius:var(--r); }
.prose hr{ border:0; border-top:1px solid var(--border); }

.share{ margin-top:44px; padding-top:24px; border-top:1px solid var(--border); }
.share h2{ font-size:16px; margin-bottom:14px; }
.share-icons{ display:flex; flex-wrap:wrap; gap:10px; }
.share-icon{ width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; border:0; transition:transform .2s var(--ease), box-shadow .2s; box-shadow:var(--shadow-sm); }
.share-icon svg{ width:20px; height:20px; fill:currentColor; }
.share-icon:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.s-wa{ background:#25D366; } .s-x{ background:#000; } .s-fb{ background:#1877F2; } .s-li{ background:#0A66C2; } .s-mail{ background:var(--brand); } .s-copy{ background:var(--brand-orange); color:var(--orange-ink); } .s-native{ background:var(--brand-blue); }
.share-note{ font-size:13.5px; color:#067647; margin-top:10px; min-height:1.3em; }
.article-back{ margin-top:28px; }
.related{ padding:56px 0 20px; }

/* ---------- 12. Footer (CTA band + link grid) ---------- */
.site-footer{ position:relative; margin-top:64px; padding-top:8px; color:#475467; background-color:#fff; border-top:1px solid var(--border); overflow:hidden; isolation:isolate; }
.site-footer::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.55; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400' fill='none' stroke='%23E9ECF2' stroke-width='1.2'%3E%3Cpath d='M-20 60c80-40 160 40 240 0s160-60 240-10 140 20 160 0'/%3E%3Cpath d='M-20 100c90-30 150 50 240 10s170-50 250 0 120 10 150-10'/%3E%3Cpath d='M-20 150c70-50 170 30 250-10s150-40 240 10 120 30 150 0'/%3E%3Cpath d='M-20 210c100-20 140 60 240 20s160-70 240-20 130 20 160 0'/%3E%3Cpath d='M-20 260c80-50 160 50 250 10s150-40 230 0 120 30 160 0'/%3E%3Cpath d='M-20 320c90-30 160 40 240 0s170-50 250 0 110 20 150-10'/%3E%3Cpath d='M-20 370c80-40 170 40 250 0s150-50 240 0 120 20 150 0'/%3E%3Ccircle cx='470' cy='120' r='26'/%3E%3Ccircle cx='470' cy='120' r='46'/%3E%3Ccircle cx='120' cy='300' r='20'/%3E%3Ccircle cx='120' cy='300' r='38'/%3E%3C/svg%3E"); background-size:600px 400px; }
.footer-cta{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; background:#1C1B2B; background:linear-gradient(135deg,#0B2A45 0%,#11213A 100%); color:#fff; border-radius:16px; padding:32px 22px; margin-top:24px; box-shadow:var(--shadow-lg); }
@media (min-width:900px){ .footer-cta{ grid-template-columns:1.15fr 1fr; gap:40px; padding:34px; } }
@media (min-width:1280px){ .footer-cta{ padding:34px 34px 34px 34px; } }
.footer-cta-copy{ padding:0; }
@media (min-width:900px){ .footer-cta-copy{ padding:8px 0 8px 0; } }
.footer-cta .kicker{ margin-bottom:6px; }
.footer-cta h2{ font-size:clamp(26px,3.4vw,34px); color:#fff; }
.footer-cta .bar{ display:block; width:54px; height:3px; border-radius:2px; background:var(--brand-orange); margin:20px 0 22px; }
.footer-cta-copy p{ font-size:15px; color:rgba(255,255,255,.88); max-width:620px; }
.footer-cta-card{ background:#F4F4F8; color:var(--ink); border-radius:14px; padding:26px 22px; }
@media (min-width:768px){ .footer-cta-card{ padding:30px 34px; } }
.footer-cta-card h3{ font-size:clamp(21px,2.4vw,26px); }
.footer-cta-card p{ font-size:15px; color:var(--ink-2); margin-top:10px; }
.newsletter{ display:flex; flex-direction:column; gap:10px; margin-top:20px; position:relative; }
@media (min-width:480px){ .newsletter{ flex-direction:row; } }
.newsletter .field{ flex:1; min-width:0; border-radius:var(--r-sm); }
.newsletter .btn{ border-radius:var(--r-sm); text-transform:uppercase; letter-spacing:.02em; min-height:50px; padding-inline:24px; }
.footer-cta-card .form-status{ margin-top:8px; font-size:13.5px; }

.footer-main{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px; padding:48px 0 32px; }
@media (min-width:768px){ .footer-main{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1024px){ .footer-main{ grid-template-columns:1.35fr repeat(4,minmax(0,1fr)); gap:32px; padding:56px 0 36px; } }
.footer-brand{ grid-column:1/-1; max-width:420px; }
@media (min-width:1024px){ .footer-brand{ grid-column:auto; max-width:340px; } }
.footer-logo{ height:64px; width:auto; margin-bottom:16px; }
.footer-brand p{ font-size:14px; line-height:1.7; color:#475467; }
.footer-contact{ font-style:normal; margin-top:14px; font-size:14px; line-height:1.9; }
.footer-contact a{ color:var(--ink-2); }
.footer-contact a:hover{ color:var(--brand-blue); }
.footer-col h2{ font-size:17px; color:var(--ink); margin-bottom:16px; }
.footer-col li + li{ margin-top:4px; }
.footer-col a{ display:inline-flex; align-items:center; min-height:32px; font-size:14px; color:#475467; transition:color .15s, transform .15s; }
.footer-col a:hover{ color:var(--brand-orange); transform:translateX(3px); }
.footer-rule-row{ display:grid; grid-template-columns:1fr; }
.footer-rule{ height:1px; border:0; background:#D9DDE5; margin:0; }
@media (min-width:1024px){ .footer-rule-row{ grid-template-columns:1.35fr repeat(4,minmax(0,1fr)); column-gap:32px; } .footer-rule{ grid-column:2 / 5; } }
.footer-bottom{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:22px 0 28px; font-size:13.5px; text-align:center; }
@media (min-width:768px){ .footer-bottom{ flex-direction:row; justify-content:space-between; text-align:left; } }
.legal-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; }
.legal-links a{ color:#344054; }
.legal-links a:hover{ color:var(--brand-orange); }
.legal-links .copy{ color:var(--muted); }
.footer-social{ display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:10px; }
.footer-social .powered{ margin-right:6px; color:#344054; }
.footer-social .powered a{ display:inline-flex; align-items:center; min-height:38px; font-weight:600; }
.footer-social .powered a:hover{ color:var(--brand-orange); }
.social-btn{ width:38px; height:38px; border-radius:50%; background:var(--brand-orange); color:var(--orange-ink); display:inline-flex; align-items:center; justify-content:center; transition:transform .2s var(--ease), background .2s, color .2s; }
.social-btn svg{ width:17px; height:17px; fill:currentColor; }
.social-btn:hover{ transform:translateY(-3px); background:var(--brand); color:#fff; }

/* ---------- 13. Floating buttons ---------- */
.back-to-top{ position:fixed; bottom:20px; right:20px; width:46px; height:46px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; z-index:40; border:0; box-shadow:0 10px 24px -8px rgba(0,0,0,.4); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .25s, transform .25s; }
.back-to-top svg{ width:20px; height:20px; }
.back-to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.wa-float{ position:fixed; bottom:20px; left:20px; width:52px; height:52px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; z-index:40; box-shadow:0 10px 24px -8px rgba(0,0,0,.4); transition:transform .2s; }
.wa-float svg{ width:28px; height:28px; fill:currentColor; }
.wa-float:hover{ transform:scale(1.06); }

/* ---------- 14. Print ---------- */
@media print{
  .noticebar,.site-header,.site-footer,.back-to-top,.wa-float,.share,.toc,.news-toolbar{ display:none!important; }
  body{ background:#fff; } .page-hero{ color:#000; background:none; } .page-hero::after,.page-hero::before{ display:none; }
  .js .reveal{ opacity:1; transform:none; }
}

/* ---------- 15. Small helpers ---------- */
.section-actions{ margin-top:26px; }
.section-actions.center{ text-align:center; }
.newsletter{ flex-wrap:wrap; }
.newsletter .form-status{ flex-basis:100%; margin:0; }
.explore-links .pill-links{ margin-bottom:8px; }
.svc a.more{ display:inline-flex; margin-top:10px; font-size:13.5px; font-weight:700; color:var(--brand-blue); }
.buy-mobile{ margin-left:auto; display:inline-flex; align-items:center; min-height:40px; padding:8px 14px; border-radius:999px; background:var(--brand-orange); color:var(--orange-ink); font-weight:700; font-size:13.5px; white-space:nowrap; }
.headrow .buy-mobile + .hamburger{ margin-left:-8px; }
@media (min-width:1100px){ .buy-mobile{ display:none; } }

/* ==========================================================================
   v2.2 — illustrations, split heroes, buy buttons, ICT effects, reviews, Facebook
   ========================================================================== */

/* ---------- Illustrations (inline SVG) ---------- */
.art{ width:100%; height:auto; overflow:visible; filter:drop-shadow(0 30px 40px rgba(0,0,0,.25)); }
@keyframes aFloat{ 50%{ transform:translateY(-10px); } }
@keyframes aSpin{ to{ transform:rotate(360deg); } }
@keyframes aBlink{ 50%{ opacity:.25; } }
@keyframes aDash{ to{ stroke-dashoffset:-60; } }
@keyframes aPulse{ 50%{ opacity:.35; transform:scale(.9); } }
@keyframes aGrow{ from{ transform:scaleY(.2); } }
@keyframes aBeat{ 15%{ transform:scale(1.18); } 30%{ transform:scale(1); } }
@keyframes aWiggle{ 50%{ transform:rotate(-5deg); } }
@keyframes aLaunch{ 50%{ transform:translateY(-14px); } }
@keyframes aFlame{ 50%{ transform:scaleY(1.25); opacity:.8; } }
.art .a-float{ animation:aFloat 6s ease-in-out infinite; }
.art .a-float-2{ animation:aFloat 7s ease-in-out -2s infinite; }
.art .a-float-3{ animation:aFloat 5.5s ease-in-out -1s infinite; }
.art .a-spin{ transform-box:fill-box; transform-origin:center; animation:aSpin 60s linear infinite; }
.art .a-spin-slow{ animation:aSpin 14s linear infinite; }
.art .a-blink{ animation:aBlink 1.6s steps(2,end) infinite; }
.art .d2{ animation-delay:.4s; } .art .d3{ animation-delay:.8s; } .art .d4{ animation-delay:1.2s; }
.art .a-dash{ stroke-dasharray:8 10; animation:aDash 3s linear infinite; }
.art .a-pulse{ transform-box:fill-box; transform-origin:center; animation:aPulse 2.4s ease-in-out infinite; }
.art .a-grow{ transform-box:fill-box; transform-origin:bottom; animation:aGrow 1.2s var(--ease) both; }
.art .a-beat{ transform-box:fill-box; transform-origin:center; animation:aBeat 2.2s ease-in-out infinite; }
.art .a-wiggle{ animation:aWiggle 3s ease-in-out infinite; }
.art .a-launch{ animation:aLaunch 3.5s ease-in-out infinite; }
.art .a-flame{ transform-box:fill-box; transform-origin:top; animation:aFlame .35s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .art *{ animation:none!important; } }

/* ---------- Split page hero (copy + illustration) ---------- */
.hero-split{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:center; }
.hero-art{ display:none; }
@media (min-width:768px){ .hero-art{ display:block; max-width:360px; margin:8px auto -12px; } }
@media (min-width:1024px){ .hero-split{ grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); gap:40px; } .hero-art{ max-width:440px; margin:-20px 0 -30px auto; } }
.page-hero .hero-copy h1{ max-width:none; }

/* ---------- Prepaid: special buy buttons ---------- */
.dd-buy{ display:flex; align-items:center; gap:12px; margin:4px 4px 10px; padding:12px 14px!important; border-radius:12px!important; background:linear-gradient(120deg,var(--brand-orange),#FF7A45)!important; color:var(--orange-ink)!important; font-weight:700!important; box-shadow:0 10px 22px -10px rgba(246,146,30,.8); white-space:normal!important; }
.dd-buy:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.dd-buy .dd-buy-icon{ width:34px; height:34px; flex-shrink:0; border-radius:10px; background:rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-size:18px; }
.dd-buy small{ display:block; font-weight:500; font-size:12px; opacity:.85; }
@media (min-width:1100px){ .dropdown-wide{ flex-wrap:wrap; } .dropdown-wide .dd-buy{ flex-basis:100%; margin:0 0 6px; } }
.buy-float{ position:fixed; left:50%; bottom:18px; z-index:45; transform:translate(-50%,140%); display:inline-flex; align-items:center; gap:8px; min-height:50px; padding:12px 22px; border-radius:999px; background:linear-gradient(120deg,var(--brand-orange),#FF7A45); color:var(--orange-ink); font-weight:800; font-size:15px; white-space:nowrap; box-shadow:0 16px 30px -12px rgba(246,146,30,.9), 0 0 0 4px rgba(255,255,255,.7); transition:transform .4s var(--ease); }
.buy-float.show{ transform:translate(-50%,0); }
.buy-float .bolt{ display:inline-flex; width:24px; height:24px; border-radius:50%; background:#fff; color:var(--brand-orange); align-items:center; justify-content:center; font-size:14px; animation:aPulse 1.8s ease-in-out infinite; }
.buy-float:hover{ filter:brightness(1.05); }
@media (max-width:359px){ .buy-float{ padding:10px 16px; font-size:14px; } }
.buy-band{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; padding:26px 24px; border-radius:var(--r-xl); color:var(--orange-ink); background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.35),transparent 45%),linear-gradient(120deg,#FDBA59,var(--brand-orange) 50%,#FF7A45); box-shadow:0 24px 40px -20px rgba(246,146,30,.8); }
@media (min-width:900px){ .buy-band{ flex-direction:row; align-items:center; justify-content:space-between; padding:34px 44px; } }
.buy-band h2{ font-size:clamp(22px,3vw,30px); color:#1A1200; }
.buy-band p{ margin-top:6px; color:#3A2600; }
.buy-band .btn{ background:#0B2A45; color:#fff; }
.buy-band .btn:hover{ box-shadow:0 12px 24px -10px rgba(11,42,69,.8); }

/* ---------- ICT effects ---------- */
.fx-spot{ position:relative; overflow:hidden; isolation:isolate; }
.fx-spot::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .3s; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(27,117,187,.16),transparent 60%); }
.fx-spot:hover::before{ opacity:1; }
.fx-border{ border:1px solid transparent!important; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,rgba(27,117,187,.5),rgba(246,146,30,.5),rgba(31,157,107,.5)) border-box!important; }
.fx-icon{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:#fff; background:linear-gradient(135deg,var(--brand-blue),var(--brand)); box-shadow:0 10px 20px -10px rgba(27,117,187,.8); }
.fx-icon svg{ width:24px; height:24px; }
.fx-icon.o{ background:linear-gradient(135deg,#FDBA59,var(--brand-orange)); } .fx-icon.g{ background:linear-gradient(135deg,#34D399,var(--green)); }
.terminal{ border-radius:16px; background:#0B1220; border:1px solid rgba(156,196,255,.25); box-shadow:0 30px 60px -25px rgba(0,0,0,.6); overflow:hidden; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13.5px; color:#C7D7EE; text-align:left; }
.terminal-bar{ display:flex; gap:7px; align-items:center; padding:12px 14px; background:#111A2E; border-bottom:1px solid rgba(156,196,255,.15); }
.terminal-bar i{ width:11px; height:11px; border-radius:50%; background:#FF6B6B; } .terminal-bar i:nth-child(2){ background:#FDBA59; } .terminal-bar i:nth-child(3){ background:#34D399; }
.terminal-bar span{ margin-left:8px; font-size:12px; color:#7C8BA5; }
.terminal pre{ margin:0; padding:16px 18px 20px; min-height:236px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.terminal .p{ color:#34D399; } .terminal .c{ color:#FDBA59; } .terminal .ok{ color:#9CC4FF; }
.terminal .cur{ display:inline-block; width:9px; height:17px; vertical-align:-3px; background:#C7D7EE; animation:aBlink 1s steps(2,end) infinite; }
.dark-sec{ position:relative; isolation:isolate; overflow:hidden; color:#fff; background:radial-gradient(circle at 10% 0%,rgba(27,117,187,.45),transparent 50%),radial-gradient(circle at 100% 100%,rgba(246,146,30,.25),transparent 45%),#06101F; border-radius:var(--r-xl); padding:40px 22px; margin-block:12px; }
@media (min-width:768px){ .dark-sec{ padding:60px 48px; } }
.dark-sec::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.4; background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px); background-size:20px 20px; -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent); }
.dark-sec .section-head p,.dark-sec p{ color:rgba(255,255,255,.8); }
.dark-sec .svc{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#fff; box-shadow:none; }
.dark-sec .svc p{ color:rgba(255,255,255,.75); }
.split-2{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-items:center; }
@media (min-width:960px){ .split-2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; } }
.compare{ width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; background:#fff; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.compare th,.compare td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
.compare tr:last-child td{ border-bottom:0; }
.compare thead th{ background:var(--bg); font-family:var(--font-head); font-size:15px; }
.compare thead th.win{ background:linear-gradient(135deg,var(--brand-blue),var(--brand)); color:#fff; }
.compare td.win{ background:#F2F7FD; font-weight:600; color:var(--ink); }
.compare-wrap{ overflow-x:auto; border-radius:var(--r); }
@media (max-width:600px){ .compare{ font-size:13.5px; } .compare th,.compare td{ padding:11px 12px; } }
.path{ display:grid; grid-template-columns:1fr; gap:14px; counter-reset:path; position:relative; }
@media (min-width:900px){ .path{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.path-step{ position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:22px 18px 20px; box-shadow:var(--shadow-sm); }
.path-step::before{ counter-increment:path; content:counter(path); display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; margin-bottom:12px; font-family:var(--font-head); font-weight:700; color:#fff; background:linear-gradient(135deg,var(--brand-blue),var(--brand)); }
.path-step:nth-child(2)::before{ background:linear-gradient(135deg,#2A8BD8,var(--brand-blue)); }
.path-step:nth-child(3)::before{ background:linear-gradient(135deg,#34D399,var(--green)); }
.path-step:nth-child(4)::before{ background:linear-gradient(135deg,#FDBA59,var(--brand-orange)); }
.path-step:nth-child(5)::before{ background:linear-gradient(135deg,#FF7A45,#E0560F); }
.path-step h3{ font-size:16px; margin-bottom:6px; }
.path-step p{ font-size:14px; color:var(--muted); }
@media (min-width:900px){ .path-step:not(:last-child)::after{ content:""; position:absolute; top:40px; right:-14px; width:14px; height:2px; background:linear-gradient(90deg,var(--brand-orange),transparent); } }
.chips-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tech-chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); font-weight:600; font-size:14px; color:#fff; }
.tech-chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c,#34D399); box-shadow:0 0 10px var(--c,#34D399); }
.check-list{ display:grid; gap:12px; margin-top:18px; }
.check-list li{ position:relative; padding-left:32px; }
.check-list li::before{ content:"✓"; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:#34D399; color:#06301A; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.portfolio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (min-width:768px){ .portfolio{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.portfolio img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s; }
.portfolio img:hover{ transform:translateY(-4px) rotate(-1.5deg); box-shadow:var(--shadow); }
.pkg{ display:flex; flex-direction:column; gap:10px; }
.pkg.hot{ background:linear-gradient(160deg,var(--brand),#12395C); color:#fff; border-color:transparent; }
.pkg.hot p,.pkg.hot li{ color:rgba(255,255,255,.85); }
.pkg .tag{ align-self:flex-start; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--tint); color:var(--brand-blue); }
.pkg.hot .tag{ background:var(--brand-orange); color:var(--orange-ink); }
.pkg ul{ display:grid; gap:6px; font-size:14px; color:var(--ink-2); margin-top:4px; }
.pkg li::before{ content:"→ "; color:var(--brand-orange); font-weight:700; }
.pkg .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- Google reviews ---------- */
.reviews-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:24px; }
@media (min-width:900px){ .reviews-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; } }
.rating-badge{ display:inline-flex; align-items:center; gap:14px; padding:12px 18px; border-radius:16px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.rating-badge .big{ font-family:var(--font-head); font-size:34px; font-weight:700; line-height:1; color:var(--brand); }
.rating-badge small{ display:block; color:var(--muted); font-size:13px; }
.stars{ --r:5; position:relative; display:inline-block; font-size:18px; letter-spacing:2px; line-height:1; color:#E4E7EC; }
.stars::before{ content:"★★★★★"; }
.stars::after{ content:"★★★★★"; position:absolute; left:0; top:0; width:calc(var(--r) / 5 * 100%); overflow:hidden; color:#FBBC04; }
.g-logo{ font-weight:700; letter-spacing:-.02em; }
.g-logo b:nth-child(1),.g-logo b:nth-child(4){ color:#4285F4; } .g-logo b:nth-child(2),.g-logo b:nth-child(6){ color:#EA4335; } .g-logo b:nth-child(3){ color:#FBBC04; } .g-logo b:nth-child(5){ color:#34A853; }
.review-grid{ display:grid; grid-auto-flow:column; grid-auto-columns:min(86%,360px); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; }
@media (min-width:1024px){ .review-grid{ grid-auto-columns:calc((100% - 32px)/3); } }
.review{ scroll-snap-align:start; display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm); }
.review-top{ display:flex; align-items:center; gap:12px; }
.review-top img,.review-top .ph{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.review-top .ph{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--brand-blue),var(--brand-orange)); color:#fff; font-weight:700; }
.review-top b{ display:block; font-size:15px; }
.review-top small{ color:var(--muted); font-size:13px; }
.review p{ font-size:15px; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.review .src{ margin-top:auto; font-size:13px; color:var(--brand-blue); font-weight:600; }
.reviews-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.reviews-empty{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; padding:28px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--border); }
@media (min-width:768px){ .reviews-empty{ flex-direction:row; align-items:center; justify-content:space-between; } }

/* ---------- Facebook latest posts (footer) ---------- */
.fb-strip{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:40px 0 0; }
@media (min-width:900px){ .fb-strip{ grid-template-columns:260px repeat(2,minmax(0,1fr)); align-items:stretch; gap:20px; } }
.fb-intro h2{ font-size:20px; color:var(--ink); }
.fb-intro p{ font-size:14px; margin-top:6px; }
.fb-intro .btn{ margin-top:14px; background:#1877F2; color:#fff; }
.fb-post{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:start; padding:14px; border-radius:16px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s; }
.fb-post:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.fb-post img,.fb-post .ph{ width:96px; height:96px; border-radius:12px; object-fit:cover; background:linear-gradient(135deg,#1877F2,var(--brand)); }
.fb-post time{ font-size:12.5px; color:var(--muted); }
.fb-post p{ font-size:14px; color:var(--ink-2); margin-top:4px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.fb-post .more{ display:inline-block; margin-top:6px; font-size:13px; font-weight:700; color:#1877F2; }
.fb-intro .btn svg{ width:16px; height:16px; fill:currentColor; }
.fb-post .ph svg{ width:40px; height:40px; fill:currentColor; }
.compare{ color:var(--ink); }
.compare tbody th{ font-weight:700; color:var(--ink); }
.compare td{ color:var(--ink-2); }
/* tick list (shared; previously home-only) */
.ticks{ display:grid; gap:10px; }
.ticks li{ position:relative; padding-left:30px; font-size:15px; color:var(--ink-2); }
.ticks li::before{ content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%; background:#E8F1FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231B75BB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
a.svc{ display:block; color:inherit; }
.buy-band .btn{ white-space:nowrap; flex-shrink:0; }

/* ==========================================================================
   Projects portfolio (/projects + home "Recent work")
   ========================================================================== */
.chip[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
.chip-n{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; margin-left:6px; padding:0 6px; border-radius:999px; background:rgba(11,42,69,.08); font-size:12px; }
.chip[aria-pressed="true"] .chip-n{ background:rgba(255,255,255,.2); }

.pf-stats{ display:flex; gap:28px; margin-top:28px; flex-wrap:wrap; }
.pf-stats div{ display:flex; flex-direction:column-reverse; }
.pf-stats dt{ font-size:13.5px; color:rgba(255,255,255,.75); }
.pf-stats dd{ font-family:var(--font-head); font-size:clamp(30px,4vw,42px); font-weight:700; line-height:1; color:#fff; }
.pf-stats div + div{ padding-left:28px; border-left:1px solid rgba(255,255,255,.2); }

/* hero: floating stack of browser windows */
.pf-stack{ position:relative; height:330px; perspective:1200px; }
.pf-mini{ position:absolute; width:62%; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 30px 50px -20px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.4); }
.pf-mini img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.pf-mini.m1{ top:4%; left:2%; transform:rotateY(14deg) rotate(-4deg); animation:aFloat 7s ease-in-out infinite; z-index:1; }
.pf-mini.m2{ top:22%; right:0; transform:rotateY(-12deg) rotate(3deg); animation:aFloat 6s ease-in-out -2s infinite; z-index:2; }
.pf-mini.m3{ bottom:0; left:18%; transform:rotateX(8deg); animation:aFloat 8s ease-in-out -1s infinite; z-index:3; }
@media (min-width:768px) and (max-width:1023px){ .pf-stack{ height:300px; max-width:440px; } }

/* browser frame with scroll-through screenshot */
.pf-frame{ position:relative; display:block; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); isolation:isolate; transform:translateZ(0); }
.pf-bar{ display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#EEF1F5; border-bottom:1px solid var(--border); }
.pf-bar i{ width:10px; height:10px; border-radius:50%; background:#FF6B6B; flex-shrink:0; } .pf-bar i:nth-child(2){ background:#FDBA59; } .pf-bar i:nth-child(3){ background:#34D399; }
.pf-url{ margin-left:8px; flex:1; min-width:0; height:18px; line-height:18px; padding:0 10px; border-radius:999px; background:#fff; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-view{ display:block; aspect-ratio:16/10; overflow:hidden; background:#E8EDF3; }
@supports not (aspect-ratio:1){ .pf-view{ height:0; padding-bottom:62.5%; position:relative; } .pf-view picture{ position:absolute; inset:0; } }
.pf-view img{ display:block; width:100%; height:auto; transition:transform 5s cubic-bezier(.45,.05,.35,1); will-change:transform; }
.pf-zoom{ position:absolute; right:12px; bottom:12px; z-index:2; padding:8px 14px; border-radius:999px; background:rgba(11,42,69,.88); color:#fff; font-size:13px; font-weight:700; opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s; backdrop-filter:blur(4px); }
@media (hover:hover) and (pointer:fine){
  .pf-frame:hover .pf-view img,.pf-frame:focus-visible .pf-view img{ transform:translateY(var(--shift,0)); }
  .pf-frame:hover .pf-zoom,.pf-frame:focus-visible .pf-zoom{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .pf-view img{ transition:none; } .pf-mini{ animation:none!important; } }

/* featured */
.pf-featured{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:center; background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:16px; box-shadow:var(--shadow-lg); }
@media (min-width:1024px){ .pf-featured{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; padding:28px; } }
.pf-featured-body{ padding:4px 8px 8px; }
.pf-featured h2{ font-size:clamp(24px,3vw,34px); margin-top:10px; }
.pf-featured-body > p{ color:var(--ink-2); margin-top:10px; }
.pf-tag-hot{ display:inline-block; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; background:linear-gradient(120deg,var(--brand-orange),#FF7A45); color:var(--orange-ink); }
.pf-meta{ font-size:13.5px; font-weight:600; color:var(--brand-blue); }
.pf-featured-body > p.pf-meta{ color:var(--brand-blue); margin-top:6px; }

/* grid */
.pf-toolbar{ display:flex; flex-direction:column; gap:14px; margin-bottom:24px; }
@media (min-width:900px){ .pf-toolbar{ flex-direction:row; align-items:center; justify-content:space-between; } }
.pf-toolbar h2{ font-size:clamp(22px,3vw,30px); }
.pf-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:26px; }
@media (min-width:640px){ .pf-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .pf-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; } }
.pf-card{ display:flex; flex-direction:column; gap:16px; transition:transform .3s var(--ease); transform-style:preserve-3d; }
.pf-card[hidden]{ display:none!important; }
.pf-card.pf-in{ animation:pfIn .45s var(--ease) both; }
@keyframes pfIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
.pf-card .pf-frame{ transition:box-shadow .3s, transform .3s var(--ease); }
.pf-card:hover .pf-frame{ box-shadow:0 30px 50px -24px rgba(11,42,69,.45); }
.pf-body{ padding:0 4px; }
.pf-chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pf-cat{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:4px 10px; border-radius:999px; background:var(--tint); color:var(--brand-blue); }
.pf-cat.c-ecommerce{ background:#FFF4E5; color:#B45F00; } .pf-cat.c-platform{ background:#E9F9F1; color:#0E7A50; }
.pf-country{ font-size:13px; color:var(--muted); }
.pf-body h3{ font-size:19px; margin-top:10px; }
.pf-body .pf-meta{ margin-top:2px; }
.pf-sum{ font-size:14.5px; color:var(--muted); margin-top:8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pf-actions{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin-top:12px; }
.pf-link{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0; border:0; background:none; font-weight:700; font-size:14px; color:var(--brand-blue); }
.pf-link svg{ width:16px; height:16px; transition:transform .2s; }
.pf-link:hover svg{ transform:translateX(3px); }
.pf-link.ext{ font-weight:600; color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-link.ext:hover{ color:var(--brand-orange); }

/* lightbox */
.pf-lb{ width:min(1100px,calc(100vw - 20px)); max-height:calc(100dvh - 20px); margin:auto; padding:0; border:0; border-radius:22px; background:#fff; color:var(--ink); box-shadow:0 40px 80px -20px rgba(6,16,31,.6); overflow:hidden; }
.pf-lb[open]{ display:flex; flex-direction:column; animation:dlgIn .3s var(--ease); }
.pf-lb::backdrop{ background:rgba(6,16,31,.75); backdrop-filter:blur(4px); }
.pf-lb-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:18px 20px 12px; border-bottom:1px solid var(--border); }
.pf-lb-head h2{ font-size:clamp(19px,2.4vw,24px); }
.pf-lb-body{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; padding:16px 20px; overflow:auto; min-height:0; flex:1; }
@media (min-width:900px){ .pf-lb-body{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:28px; overflow:hidden; } }
.pf-lb-shot{ border-radius:14px; border:1px solid var(--border); overflow:hidden; display:flex; flex-direction:column; background:#E8EDF3; max-height:62vh; }
@media (min-width:900px){ .pf-lb-shot{ max-height:calc(100dvh - 200px); } }
.pf-lb-shot picture{ display:block; overflow:auto; overscroll-behavior:contain; }
.pf-lb-shot img{ display:block; width:100%; height:auto; }
.pf-lb-info p{ color:var(--ink-2); }
.pf-lb-info{ overflow:auto; }
.pf-lb-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 20px 16px; border-top:1px solid var(--border); }
@keyframes dlgIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.onb-close{ width:44px; height:44px; flex-shrink:0; border-radius:50%; border:0; background:var(--bg); font-size:26px; line-height:1; color:var(--ink-2); }
.onb-close:hover{ background:#E4E7EC; }
body.dlg-open{ overflow:hidden; }

/* home: recent work strip */
.recent-head{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
@media (min-width:768px){ .recent-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; } }
.hero-art.pf-stack{ width:100%; max-width:460px; }
@media (min-width:768px) and (max-width:1023px){ .hero-art.pf-stack{ margin:10px auto 0; } }
/* touch screens: each screenshot scrolls through once as it comes into view */
@keyframes pfPeek{ 0%,12%{ transform:none; } 55%,65%{ transform:translateY(var(--shift,0)); } 100%{ transform:none; } }
@media (hover:none),(pointer:coarse){ .pf-frame.peek .pf-view img{ animation:pfPeek 6.5s ease-in-out .3s 1 both; } }
@media (prefers-reduced-motion:reduce){ .pf-frame.peek .pf-view img{ animation:none!important; } }