/* ===========================================================================
   AranesTech · Mga Landing Page ng Alok
   ---------------------------------------------------------------------------
   Tatlong pahina ang gumagamit nito: /partners, /connect at /home-internet.
   Magkakapatid sila — iisang nav, iisang paa, iisang form — kaya hiwalay na
   file ito at hindi inline na gaya ng home.html: tatlong beses na 40KB sa
   mobile data ay hindi makatarungan sa taong nagbubukas ng link sa tarp.

   Ang token at scale ay KAPAREHO ng home.html (slate + blue, Tailwind-based)
   para iisang kumpanya ang hitsura ng lahat. Kapag may binago doon, dito rin.
   =========================================================================== */

/* ---- tokens: liwanag ---- */
:root{
  --s50:#f8fafc; --s100:#f1f5f9; --s200:#e2e8f0; --s300:#cbd5e1; --s400:#94a3b8;
  --s500:#64748b; --s600:#475569; --s700:#334155; --s800:#1e293b; --s900:#0f172a;
  --b400:#60a5fa; --b500:#3b82f6; --b600:#2563eb; --b700:#1d4ed8;
  --emerald:#10b981; --violet:#8b5cf6; --amber:#f59e0b; --cyan:#06b6d4; --rose:#e11d48;

  --page:#ffffff;
  --page-alt:var(--s50);
  --ink:var(--s900);
  --ink-soft:var(--s600);
  --ink-faint:var(--s500);
  --edge:var(--s200);
  --surface:#ffffff;
  --surface-2:var(--s50);
  --ring:rgba(37,99,235,.14);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-md:0 4px 12px -2px rgba(15,23,42,.08),0 2px 6px -2px rgba(15,23,42,.05);
  --shadow-lg:0 18px 40px -12px rgba(15,23,42,.18),0 4px 12px -4px rgba(15,23,42,.08);
  --shadow-xl:0 32px 64px -20px rgba(15,23,42,.28);
  --nav-bg:rgba(255,255,255,.82);
}
/* ---- tokens: dilim ---- */
:root[data-theme="dark"]{
  --page:#0b1220;
  --page-alt:#0f172a;
  --ink:#e8eef7;
  --ink-soft:#a8b6cc;
  --ink-faint:#8496b0;
  --edge:#1e293b;
  --surface:#111a2b;
  --surface-2:#0f1727;
  --ring:rgba(96,165,250,.2);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px -2px rgba(0,0,0,.5);
  --shadow-lg:0 18px 40px -12px rgba(0,0,0,.65);
  --shadow-xl:0 32px 64px -20px rgba(0,0,0,.75);
  --nav-bg:rgba(11,18,32,.82);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--page);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--b600);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
@media (max-width:640px){.wrap{padding:0 18px}}
.wrap-sm{max-width:760px}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ---------- pindutan ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15px;border-radius:12px;padding:12px 20px;
  white-space:nowrap;transition:transform .16s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.btn .ic{width:17px;height:17px}
.btn-primary{background:linear-gradient(135deg,var(--b500),var(--b700));
  color:#fff;box-shadow:0 6px 18px -4px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -6px rgba(37,99,235,.6)}
.btn-primary:active{transform:translateY(0)}
.btn-primary[disabled]{opacity:.6;transform:none;cursor:progress}
.btn-outline{border:1.5px solid var(--edge);color:var(--ink);background:var(--surface)}
.btn-outline:hover{border-color:var(--b500);color:var(--b600);transform:translateY(-2px)}
:root[data-theme="dark"] .btn-outline:hover{color:var(--b400)}
.btn-ghost{color:var(--ink-soft);padding:10px 14px}
.btn-ghost:hover{color:var(--b600)}
.btn-lg{font-size:16.5px;padding:15px 28px;border-radius:14px}
.btn-block{width:100%}

/* ---------- navbar ---------- */
.nav{position:sticky;top:0;z-index:80;background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease}
.nav.stuck{border-bottom-color:var(--edge);box-shadow:var(--shadow-sm)}
.nav-in{display:flex;align-items:center;gap:14px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17.5px;letter-spacing:-.02em}
.brand-mark{width:36px;height:36px;border-radius:11px;flex-shrink:0;overflow:hidden;
  background:#042C53;display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(34,211,238,.4),0 0 18px -4px rgba(34,211,238,.6)}
.brand-mark svg{width:100%;height:100%;display:block}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand-txt{display:flex;flex-direction:column;gap:0;line-height:1.12}
.brand-txt b{font-weight:800;font-size:17px;letter-spacing:-.02em}
.brand-txt small{font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#0e8ba8}
:root[data-theme="dark"] .brand-txt small{color:#22d3ee}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:22px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-soft);padding:8px 13px;border-radius:9px;transition:color .18s,background .18s}
.nav-links a:hover{color:var(--ink);background:var(--surface-2)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  color:var(--ink-soft);transition:background .18s,color .18s}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn .ic{width:18px;height:18px}
.burger{display:none}
.nav-drawer{display:none}
@media (max-width:900px){
  .nav-links,.nav-right .btn-ghost{display:none}
  .burger{display:grid}
  .nav-drawer{display:block;max-height:0;overflow:hidden;
    transition:max-height .28s cubic-bezier(.4,0,.2,1);border-top:1px solid transparent}
  .nav-drawer.open{max-height:440px;border-top-color:var(--edge)}
  .nav-drawer-in{padding:14px 24px 20px;display:flex;flex-direction:column;gap:3px}
  .nav-drawer a{padding:12px 12px;border-radius:10px;font-weight:500;color:var(--ink-soft)}
  .nav-drawer a:hover{background:var(--surface-2);color:var(--ink)}
  .nav-drawer .btn{margin-top:9px}
}
.lbl-short{display:none}
/* Masikip ang pagitan ng 900 at 1150: anim na link, dalawang pindutan at ang
   logo. Ang pangalawang pindutan at ang mahabang label ang unang lumulubag —
   HINDI ang mga link, dahil doon nabubuksan ang pahina. (Natuklasan nang
   dumagdag ang link na "Tracker": lumalabas sa gilid ang nav sa 1009px.) */
@media (max-width:1150px){
  .nav-right .btn-ghost{display:none}
  .lbl-full{display:none}
  .lbl-short{display:inline}
}
@media (max-width:480px){
  .nav-right .btn-primary{padding:11px 14px;font-size:14px}
  .lbl-full{display:none}
  .lbl-short{display:inline}
  #themeBtn{display:none}
  .brand{font-size:16px}
}
@media (max-width:380px){
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
  .btn-lg{padding:14px 18px;font-size:15.5px}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:68px 0 72px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-260px;left:50%;transform:translateX(-50%);
  width:1100px;height:760px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(59,130,246,.16),rgba(59,130,246,0) 65%)}
:root[data-theme="dark"] .hero::before{background:radial-gradient(ellipse at center,rgba(59,130,246,.22),rgba(59,130,246,0) 65%)}
.hero-in{position:relative;z-index:1;text-align:center}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  padding:7px 15px 7px 12px;border-radius:999px;color:var(--b700);
  background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.24)}
:root[data-theme="dark"] .badge{color:var(--b400);background:rgba(59,130,246,.14)}
.badge .ic{width:15px;height:15px}
h1{font-size:clamp(31px,5vw,54px);line-height:1.09;font-weight:800;
  letter-spacing:-.033em;margin:22px auto 0;max-width:20ch}
.grad{background:linear-gradient(120deg,var(--b500),var(--violet) 60%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(16px,2vw,19px);color:var(--ink-soft);max-width:60ch;margin:20px auto 0}
.cta-row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.checks{display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;margin-top:24px;
  font-size:13.8px;color:var(--ink-faint);font-weight:500}
.check{display:inline-flex;align-items:center;gap:7px}
.check .ic{width:16px;height:16px;color:var(--emerald);stroke-width:2.6}

/* ---------- seksyon ---------- */
section{position:relative}
.sec{padding:72px 0}
.sec-alt{background:var(--page-alt)}
.sec-head{text-align:center;max-width:62ch;margin:0 auto 44px}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--b600)}
:root[data-theme="dark"] .eyebrow{color:var(--b400)}
h2{font-size:clamp(26px,3.6vw,38px);line-height:1.16;font-weight:800;letter-spacing:-.028em;margin-top:12px}
.sec-head p{color:var(--ink-soft);margin-top:16px;font-size:17px}

/* ---------- strip ---------- */
.strip{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  background:var(--page-alt);padding:30px 0}
.strip-t{text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint)}
.strip-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  padding:9px 16px;border-radius:11px;background:var(--surface);
  border:1px solid var(--edge);color:var(--ink-soft);box-shadow:var(--shadow-sm)}
.chip .ic{width:16px;height:16px;color:var(--b600)}
:root[data-theme="dark"] .chip .ic{color:var(--b400)}

/* ---------- mga card ---------- */
.fx{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px}
.fxg{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--edge);
  border-radius:14px;padding:20px 18px;box-shadow:var(--shadow-sm)}
.fxg::before{content:"";position:absolute;top:0;left:18px;right:18px;height:2px;
  background:linear-gradient(90deg,var(--tone,var(--b600)),transparent);opacity:.9}
.fxh{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.fxh .ic{width:18px;height:18px;color:var(--tone,var(--b600));stroke-width:2.2;flex:none}
.fxh h3{font-size:15.6px;font-weight:800;letter-spacing:-.012em;margin:0;flex:1;min-width:0}
.fxl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fxl li{display:flex;gap:9px;font-size:14px;line-height:1.46;color:var(--ink-soft)}
.fxl li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--tone,var(--b600));margin-top:7px;opacity:.72}

/* ---------- hakbang ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.steps>*{min-width:0}
.step{background:var(--surface);border:1px solid var(--edge);border-radius:16px;
  padding:26px;text-align:center;box-shadow:var(--shadow-sm)}
.step-n{width:48px;height:48px;margin:0 auto;border-radius:14px;display:grid;place-items:center;
  font-size:19px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,var(--b500),var(--b700));
  box-shadow:0 10px 22px -6px rgba(37,99,235,.55)}
.step h3{font-size:18px;font-weight:800;margin-top:17px}
.step p{color:var(--ink-soft);margin-top:9px;font-size:14.8px}

/* ---------- uri ng partner (Share / Owner) ---------- */
.tipo{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
/* Tatlong plano. Sa tablet ay nagiging isang hanay agad — ang tatlong
   makikitid na card ay mas mahirap basahin kaysa sa tatlong magkapatong. */
.tipo.tatlo{grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.tipo.tatlo{grid-template-columns:1fr}}
@media (max-width:860px){.tipo{grid-template-columns:1fr}}
.tipo>*{min-width:0}
.tcard{position:relative;background:var(--surface);border:1.5px solid var(--edge);
  border-radius:18px;padding:28px;box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tcard.pili{border-color:var(--b500);box-shadow:var(--shadow-lg)}
.tcard .tag{position:absolute;top:-13px;left:28px;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 13px;border-radius:999px;
  background:linear-gradient(135deg,var(--b500),var(--b700));color:#fff;
  box-shadow:0 6px 16px -5px rgba(37,99,235,.6)}
.tcard .tag.mura{background:linear-gradient(135deg,var(--emerald),#047857);
  box-shadow:0 6px 16px -5px rgba(16,185,129,.55)}
.tcard h3{font-size:23px;font-weight:800;letter-spacing:-.02em}
.tcard .sub{color:var(--ink-faint);font-size:14px;margin-top:4px}
.halaga{display:flex;align-items:baseline;gap:7px;margin:18px 0 4px}
.halaga b{font-size:40px;font-weight:900;letter-spacing:-.04em;line-height:1}
.halaga span{font-size:14.5px;color:var(--ink-faint);font-weight:600}
.tcard .paliwanag{color:var(--ink-soft);font-size:14.6px;margin-top:10px}
.tlist{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.tlist li{display:flex;gap:10px;font-size:14.6px;color:var(--ink-soft)}
.tlist .ic{width:17px;height:17px;color:var(--emerald);stroke-width:2.6;margin-top:4px;flex:none}
.tlist li.wala{color:var(--ink-faint)}
.tlist li.wala .ic{color:var(--s400)}
.tcard .btn{margin-top:22px}

/* ---------- produkto ---------- */
.prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
/* Ang tatlong modelo ay dapat magkakasama sa isang hanay. Sa auto-fit, ang
   anim na card ay nagiging 4+2 sa laptop — nahahati ang tatlong makina at
   nawawala ang pagkakapares nila. */
.prod.tatlo{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.prod.tatlo{grid-template-columns:1fr}}
.prod-label{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin:34px 0 14px}
.pcard{background:var(--surface);border:1px solid var(--edge);border-radius:16px;
  padding:22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.pcard .pic{height:92px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(59,130,246,.12),rgba(139,92,246,.1));
  color:var(--b600);margin-bottom:16px}
:root[data-theme="dark"] .pcard .pic{color:var(--b400)}
.pcard .pic .ic{width:36px;height:36px;stroke-width:1.7}
.pcard h3{font-size:17px;font-weight:800;letter-spacing:-.015em}
.pcard p{color:var(--ink-soft);font-size:14.2px;margin-top:8px;flex:1}
.pcard .pres{margin-top:14px;font-size:15px;font-weight:800;color:var(--ink)}
.pcard .pres small{display:block;font-size:12px;font-weight:600;color:var(--ink-faint);margin-top:2px}
/* Ang modelo ng makina. Dito tumitingin ang gustong bumili, kaya ang numero
   ang pinakamalaki sa card — hindi ang pamagat. */
.pcard.makina{border-color:var(--ring)}
.pcard .pres .malaki{display:block;font-size:27px;font-weight:900;letter-spacing:-.03em;line-height:1.15}

/* ---------- SIMULATOR NG PORTAL ----------
   Ang kaliwa ay mga kontrol, ang kanan ay isang telepono. Ang telepono ay
   hindi larawan: ito ang mismong portal na makikita ng customer, kaya ang
   pagpapalit ng SSID at pangalan ng vendo ay nakikita agad. */
.sim{display:grid;grid-template-columns:1fr 400px;gap:28px;align-items:start}
@media (max-width:900px){.sim{grid-template-columns:1fr;gap:24px}}
.sim>*{min-width:0}
.sim-kontrol{background:var(--surface);border:1px solid var(--edge);border-radius:16px;
  padding:22px;box-shadow:var(--shadow-sm)}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.fld input,.fld select,.fld textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--page);
  border:1.5px solid var(--edge);border-radius:11px;padding:11px 13px;
  transition:border-color .18s,box-shadow .18s}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--b500);box-shadow:0 0 0 3px var(--ring)}
.fld textarea{resize:vertical;min-height:84px}
/* Hindi naka-sakop sa .fld: ginagamit din ito sa ilalim ng form at sa ilalim
   ng mga card, hindi lang sa tabi ng isang input. */
.tulong{font-size:12.6px;color:var(--ink-faint);margin-top:6px;line-height:1.5}
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.fld-2{grid-template-columns:1fr}}

/* Ang patibong — hindi ito dapat makita o matapik ng tao, pero nandoon pa
   rin ito sa DOM kung saan ito hinahanap ng bot. Ang display:none ay
   nilalaktawan ng ilang bot; ito ay hindi. */
.patibong{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pisin{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.pisin button{border:1.5px solid var(--edge);background:var(--page);border-radius:11px;
  padding:9px 14px;font-weight:800;font-size:14.5px;color:var(--ink);
  transition:border-color .16s,transform .12s,background .16s}
.pisin button:hover{border-color:var(--b500);color:var(--b600)}
.pisin button:active{transform:scale(.95)}

/* Pagpili ng portal mula sa Portal Collection */
.portal-pili{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.portal-pili button{display:block;width:100%;text-align:left;border:1.5px solid var(--edge);
  border-radius:12px;padding:0;overflow:hidden;background:var(--page);
  transition:border-color .16s,box-shadow .16s}
.portal-pili button:hover{border-color:var(--b500)}
.portal-pili button.pili{border-color:var(--b500);box-shadow:0 0 0 3px var(--ring)}
.portal-pili .larawan{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;
  background:linear-gradient(140deg,rgba(59,130,246,.14),rgba(139,92,246,.1));
  color:var(--b600)}
.portal-pili .walang-larawan{display:grid;place-items:center}
.portal-pili .walang-larawan .ic{width:26px;height:26px}
.portal-pili .pangalan{display:block;padding:7px 8px 8px;font-size:11.5px;font-weight:700;
  line-height:1.3;color:var(--ink)}
.portal-pili .pangalan small{display:block;font-weight:600;color:var(--ink-faint);font-size:10.5px;margin-top:2px}

/* ---------- ANG TELEPONO ----------
   Ang katawan ay may tunay na bezel: slit ng speaker at butas ng camera sa
   itaas, mga pindutan sa gilid, at guhit ng home sa ibaba. Nasa LABAS lahat
   ng ito ng screen — walang laman ng portal na natatakpan. */
.pone{width:min(386px,100%);margin:0 auto;border-radius:42px;
  padding:26px 13px 22px;background:#0b1220;border:1px solid #223049;
  box-shadow:var(--shadow-xl),inset 0 0 0 2px #0e1829;position:relative}
/* Slit ng speaker + butas ng camera, sa bezel sa itaas. */
.pone::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:52px;height:5px;border-radius:99px;background:#1a2740;
  box-shadow:38px 0 0 -1px #16223a}
/* Pindutan sa gilid: power sa kanan, dalawang volume sa kaliwa. Iisang
   elemento lang — kopya ang ginagawa ng box-shadow, kaya walang dagdag na
   markup para sa purong palamuti. */
.pone::after{content:"";position:absolute;right:-2px;top:132px;width:2.5px;height:58px;
  border-radius:0 3px 3px 0;background:#1c2942;
  box-shadow:-328px -62px 0 0 #1c2942, -328px -24px 0 0 #1c2942}
/* Sa telepono, ang makapal na bezel ay kinakain ang lapad na kailangan mismo
   ng portal — telepono na nga ang tinitingnan, hindi na kailangang mukhang
   telepono pa nang husto. Pinapanipis ito para mapalapit sa tunay na lapad
   ang laman. */
@media (max-width:480px){
  .pone{padding:18px 6px 14px;border-radius:32px}
  .pone-screen{border-radius:26px}
  .pone::before{top:8px}
  .pone .home-guhit{bottom:5px;width:88px}
  .pone::after{display:none}
}

.pone-screen{position:relative;border-radius:30px;overflow:hidden;background:#0f1a2d;
  width:100%;aspect-ratio:360/780;display:flex;flex-direction:column;color:#e6eefb}
/* Guhit ng home sa ibabang bezel — hindi sa ibabaw ng screen. */
.pone .home-guhit{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);
  width:104px;height:4px;border-radius:99px;background:#1c2942}

.pone-loob{display:flex;flex-direction:column;flex:1;min-height:0}
.pone-loob[hidden]{display:none}

/* Ang tunay na portal.

   WALANG transform dito, at sinasadya iyon. Ang portal ay ginawa para sa
   teleponong mga 360-390px ang lapad; sa makitid na kahon ay nagmumukha
   itong naka-zoom — malalaki ang titik at putol ang hanay. Ang ayos ay
   hindi pagpapaliit kundi pagbibigay ng TUNAY na lapad: 360px ang screen
   dito, at ang iframe ay eksaktong kasinlaki nito.

   Mahalaga ang pagkakaiba. Ang iframe na may `transform: scale()` ay
   tumatanggap pa rin ng pindot sa totoong browser, pero hindi ito maabot ng
   anumang automation — at ang hindi masubukan ay hindi masasabing gumagana.
   Dito, ang pindot ay dumadaan sa karaniwang daan. */
.pone-screen iframe{position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;background:#0f1a2d}
.pone-screen iframe[hidden]{display:none}
.sim-abala{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:rgba(11,18,32,.92);color:#8aa0c2;font-size:12.5px;font-weight:600;text-align:center;padding:20px}
.sim-abala[hidden]{display:none}
.sim-estado{margin-top:12px;text-align:center;font-size:12.5px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;min-height:1.4em}
.pone-bar{display:flex;align-items:center;gap:6px;padding:16px 14px 9px;font-size:10.5px;
  color:#7d92b4;font-weight:700}
.pone-bar .ic{width:12px;height:12px}
.pone-bar .orasan{margin-left:auto;font-variant-numeric:tabular-nums}
.sim-ssid{display:flex;align-items:center;gap:7px;padding:0 14px 10px;font-size:11.5px;
  color:#93c5fd;font-weight:700;border-bottom:1px solid #1b2740}
.sim-ssid .ic{width:14px;height:14px}
/* Itinatago ang scrollbar sa loob ng telepono — walang teleponong may
   kulay-abong guhit sa gilid ng screen, at ito ang sinusubukang ipakita. */
.pone-body{flex:1;overflow-y:auto;padding:16px 14px 18px;display:flex;flex-direction:column;gap:13px;
  scrollbar-width:none;-ms-overflow-style:none}
.pone-body::-webkit-scrollbar{width:0;height:0}
.sim-logo{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.sim-logo .bola{width:52px;height:52px;border-radius:16px;background:#042C53;
  display:grid;place-items:center;box-shadow:0 0 0 1px rgba(34,211,238,.45),0 0 20px -5px rgba(34,211,238,.6)}
.sim-logo .bola svg{width:100%;height:100%}
.sim-vendo{font-size:15.5px;font-weight:800;letter-spacing:-.01em;word-break:break-word}
.sim-tag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#61779b;font-weight:700}
.sim-kahon{background:#111d31;border:1px solid #1e2c45;border-radius:14px;padding:13px}
.sim-kahon .t{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#61779b;font-weight:700}
.sim-barya{display:flex;align-items:baseline;gap:6px;margin-top:5px}
.sim-barya b{font-size:30px;font-weight:900;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.sim-barya span{font-size:12px;color:#8aa0c2;font-weight:600}
.sim-oras{margin-top:9px;font-size:12.5px;color:#34d399;font-weight:700;font-variant-numeric:tabular-nums}
.sim-rates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sim-rate{background:#111d31;border:1px solid #1e2c45;border-radius:11px;padding:9px 10px;text-align:center}
.sim-rate b{display:block;font-size:14.5px;font-weight:800;color:#e6eefb}
.sim-rate span{display:block;font-size:11px;color:#8aa0c2;margin-top:2px}
.sim-btn{width:100%;border-radius:12px;padding:12px;font-weight:800;font-size:14.5px;
  background:linear-gradient(135deg,var(--b500),var(--b700));color:#fff;
  box-shadow:0 8px 20px -6px rgba(37,99,235,.6)}
.sim-btn.patay{background:#1b2740;color:#61779b;box-shadow:none;cursor:not-allowed}
.sim-btn.konek{background:linear-gradient(135deg,var(--emerald),#047857);
  box-shadow:0 8px 20px -6px rgba(16,185,129,.55)}
.sim-note{font-size:11px;color:#61779b;text-align:center;line-height:1.5}
.sim-ok{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);
  border-radius:12px;padding:12px;text-align:center}
.sim-ok b{display:block;font-size:15px;color:#34d399}
.sim-ok span{font-size:11.5px;color:#8aa0c2}

/* ---------- form ng aplikasyon ---------- */
.form-card{background:var(--surface);border:1px solid var(--edge);border-radius:18px;
  padding:30px;box-shadow:var(--shadow-lg);max-width:720px;margin:0 auto}
@media (max-width:560px){.form-card{padding:22px 18px}}
.form-card h2{font-size:25px;margin-top:0}
.form-card .lead{color:var(--ink-soft);font-size:15px;margin:10px 0 24px}
.pili-uri{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
@media (max-width:560px){.pili-uri{grid-template-columns:1fr}}
.pili-uri label{position:relative;display:block;cursor:pointer}
.pili-uri input{position:absolute;opacity:0;width:1px;height:1px}
/* display:block ang mahalaga rito. Ang .kahon ay <span> — inline — pero may
   <b> at <span> na block sa loob. Ang block na nasa loob ng inline ay
   hinahati ang inline box sa mga piraso, kaya ang border at background ay
   nagiging manipis na guhit sa gilid sa halip na kahon sa paligid ng teksto. */
.pili-uri .kahon{display:block;border:1.5px solid var(--edge);border-radius:13px;padding:14px 16px;
  background:var(--page);transition:border-color .18s,box-shadow .18s,background .18s}
.pili-uri input:checked+.kahon{border-color:var(--b500);background:rgba(59,130,246,.06);
  box-shadow:0 0 0 3px var(--ring)}
.pili-uri input:focus-visible+.kahon{outline:2px solid var(--b600);outline-offset:2px}
.pili-uri .kahon b{display:block;font-size:15.5px;font-weight:800}
.pili-uri .kahon span{display:block;font-size:13px;color:var(--ink-faint);margin-top:3px}
.form-msg{margin-top:14px;font-size:14.5px;min-height:1.4em}
.form-msg.mali{color:var(--rose)}
.form-msg.ayos{color:var(--emerald)}

/* Ang resibo pagkatapos ng pagpapadala. */
.resibo{text-align:center;padding:12px 0}
.resibo .tsek{width:62px;height:62px;margin:0 auto 18px;border-radius:50%;display:grid;
  place-items:center;background:rgba(16,185,129,.14);color:var(--emerald)}
.resibo .tsek .ic{width:32px;height:32px;stroke-width:2.6}
.resibo h3{font-size:23px;font-weight:800}
.resibo p{color:var(--ink-soft);margin-top:10px;font-size:15.2px}
.sangguni{display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:25px;font-weight:800;
  letter-spacing:.14em;padding:13px 22px;border-radius:14px;
  background:var(--surface-2);border:1.5px dashed var(--edge);color:var(--ink)}

/* ---------- KALKULADOR NG BAYAD ----------
   Ang presyo kada router ay madaling isulat, pero mahirap isip-isipin kapag
   may bundle. Mas mabuting ipakita kaysa ipaliwanag: ilagay ang bilang, at
   nandiyan na ang eksaktong halagang sisingilin. */
.kalkula{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:stretch;
  background:var(--surface);border:1px solid var(--edge);border-radius:18px;
  padding:24px;box-shadow:var(--shadow-sm)}
@media (max-width:760px){.kalkula{grid-template-columns:1fr}}
.kalkula>*{min-width:0}
.kalkula-kontrol label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.kalkula-kontrol input[type="number"]{width:100%;font:inherit;font-size:30px;font-weight:900;
  letter-spacing:-.02em;text-align:center;color:var(--ink);background:var(--page);
  border:1.5px solid var(--edge);border-radius:13px;padding:12px}
.kalkula-kontrol input[type="number"]:focus{outline:none;border-color:var(--b500);box-shadow:0 0 0 3px var(--ring)}
.kalkula-kontrol input[type="range"]{width:100%;margin:16px 0 4px;accent-color:var(--b600)}
.kalkula-labas{border-radius:15px;padding:22px;display:flex;flex-direction:column;
  justify-content:center;text-align:center;color:#e6eefb;
  background:linear-gradient(160deg,#0f1e35,#0b1424)}
.kalkula-labas .t{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:#7d92b4;font-weight:700}
.kalkula-labas b{font-size:46px;font-weight:900;letter-spacing:-.04em;line-height:1.1;
  margin-top:6px;font-variant-numeric:tabular-nums}
.kalkula-labas .k{font-size:13px;color:#9fb2ce;margin-top:6px}
.kalkula-labas .alok{font-size:12.8px;color:#34d399;font-weight:700;margin-top:14px;
  padding-top:12px;border-top:1px solid #1e2c45}
.kalkula-labas .alok[hidden]{display:none}

/* ---------- pindutan ng Google ---------- */
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:360px;font-weight:700;font-size:15.5px;
  border:1.5px solid var(--edge);border-radius:12px;padding:13px 18px;
  background:var(--page);color:var(--ink);
  transition:border-color .18s,box-shadow .18s,transform .16s}
.g-btn:hover{border-color:var(--b500);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.g-btn svg{flex:none}

/* ---------- TRACKER ----------
   Patayo ang linya, hindi pahalang. Ang limang hakbang ay may mahabang
   pangalan at may petsa — sa pahalang na hanay, ang lahat ng iyon ay
   nagiging dalawang letra kada hakbang sa telepono. Dito, buo ang nababasa
   sa kahit anong lapad, at may puwang pa para sa paliwanag ng kinaroroonan. */
.tr-hanap{display:flex;gap:10px;flex-wrap:wrap}
.tr-hanap input{flex:1;min-width:180px;font:inherit;font-size:19px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;text-align:center;
  color:var(--ink);background:var(--page);border:1.5px solid var(--edge);
  border-radius:12px;padding:12px 14px;font-family:ui-monospace,Menlo,Consolas,monospace}
.tr-hanap input:focus{outline:none;border-color:var(--b500);box-shadow:0 0 0 3px var(--ring)}
.tr-hanap input::placeholder{letter-spacing:.14em;font-weight:600;opacity:.45}

.tr-ulo{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  padding-bottom:14px;border-bottom:1px solid var(--edge);margin-bottom:4px}
.tr-ulo b{font-size:17px;font-weight:800}
.tr-ulo .kodigo{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;
  letter-spacing:.12em;color:var(--b600)}
:root[data-theme="dark"] .tr-ulo .kodigo{color:var(--b400)}
.tr-ulo .uri{font-size:13px;color:var(--ink-faint);margin-left:auto}

.tl{list-style:none;margin:20px 0 0;padding:0}
.tl li{position:relative;padding:0 0 24px 40px}
.tl li:last-child{padding-bottom:0}
/* Ang guhit na nag-uugnay — berde kapag nadaanan na. */
.tl li::before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:2px;background:var(--edge)}
.tl li:last-child::before{display:none}
.tl li.tapos::before{background:var(--emerald)}
.tl .bilog{position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--edge);background:var(--surface);display:grid;place-items:center}
.tl .bilog .ic{width:13px;height:13px;stroke-width:3}
.tl li.tapos .bilog{background:var(--emerald);border-color:var(--emerald);color:#fff}
.tl li.ngayon .bilog{border-color:var(--b500);box-shadow:0 0 0 4px var(--ring)}
/* Ang tibok ang nagsasabing buhay ito — dito sila nakatayo ngayon. */
.tl li.ngayon .bilog::after{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--b500);animation:tlpulso 1.7s ease-in-out infinite}
@keyframes tlpulso{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.72)}}
.tl b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.tl li.hinaharap b{color:var(--ink-faint)}
.tl span{display:block;font-size:13.6px;color:var(--ink-soft);margin-top:4px}
.tl time{display:block;font-size:12px;color:var(--ink-faint);margin-top:5px;
  font-variant-numeric:tabular-nums}

.tr-tanggi{display:flex;gap:12px;padding:16px;border-radius:13px;margin-top:18px;
  background:rgba(225,29,72,.08);border:1px solid rgba(225,29,72,.26)}
.tr-tanggi .ic{width:20px;height:20px;color:var(--rose);flex:none;margin-top:2px}
.tr-tanggi b{display:block;font-size:15px}
.tr-tanggi span{display:block;font-size:13.6px;color:var(--ink-soft);margin-top:4px}
.tr-paa{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:14px;
  border-top:1px solid var(--edge);font-size:12.5px;color:var(--ink-faint)}
.tr-buhay{width:7px;height:7px;border-radius:50%;background:var(--emerald);flex:none;
  animation:tlpulso 1.7s ease-in-out infinite}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--edge);border-radius:13px;
  padding:16px 18px;box-shadow:var(--shadow-sm)}
.faq summary{font-weight:700;font-size:15.6px;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
  transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{color:var(--ink-soft);font-size:14.8px;margin-top:11px}

/* ---------- paa ---------- */
footer{border-top:1px solid var(--edge);background:var(--page-alt);padding:40px 0 34px}
.foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--ink-soft)}
.foot-links a:hover{color:var(--b600)}
.foot-note{width:100%;font-size:12.8px;color:var(--ink-faint);margin-top:8px}

/* Pinipigilan ang animasyon para sa taong humihingi niyan sa sistema niya. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}