/* ============================================================
   HOSTING FACTORY — main.css  (tokens + components)
   Extracted from design-system.html v1.0 · Jul 2026
   ============================================================ */
:root{
  --hf-purple-500:#673DE6;
  --hf-purple-600:#5025D1;
  --hf-purple-700:#5025D1;
  --hf-purple-800:#41219C;
  --hf-purple-200:#8C85FF;
  --hf-purple-100:#EBE4FF;
  --hf-purple-050:#F5F2FF;

  --hf-ink-900:#2F1C6A;
  --hf-ink-700:#372D5E;
  --hf-ink-600:#544A85;
  --hf-ink-400:#8B84AC;
  --hf-line:#E4DFF4;

  --hf-white:#FFFFFF;
  --hf-surface:#FFFFFF;
  --hf-surface-alt:#F5F2FF;
  --hf-night-900:#120E26;
  --hf-night-800:#1B1540;
  --hf-night-line:#2C2454;

  --hf-save:#0B7D57;
  --hf-warn:#F5B72E;
  --hf-error:#D64545;
  --hf-error-100:#FBEAEA;

  --hf-font:'Host Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-display:clamp(2.5rem,1.6rem + 4.2vw,4.5rem);
  --fs-h1:clamp(2.1rem,1.5rem + 2.6vw,3.25rem);
  --fs-h2:clamp(1.6rem,1.3rem + 1.6vw,2.25rem);
  --fs-h3:clamp(1.25rem,1.1rem + .8vw,1.5rem);
  --fs-h4:1.125rem;
  --fs-body-lg:1.125rem;
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-micro:.75rem;
  --lh-tight:1.08;
  --lh-heading:1.2;
  --lh-body:1.6;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;  --sp-7:3rem;   --sp-8:4rem;
  --sp-9:6rem;   --section-y:clamp(3.5rem,2.5rem + 4vw,6.5rem);

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  --sh-card:0 1px 2px rgba(12,21,6,.05),0 6px 20px -6px rgba(12,21,6,.10);
  --sh-lift:0 2px 4px rgba(12,21,6,.06),0 18px 40px -12px rgba(12,21,6,.18);
  --sh-glow:0 0 0 4px rgba(103,61,230,.20),0 10px 30px -8px rgba(103,61,230,.45);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:160ms; --t-base:260ms; --t-slow:600ms;

  --container:1200px; --container-narrow:840px;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--hf-font);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--hf-ink-700);background:var(--hf-surface);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--hf-ink-900);line-height:var(--lh-heading);font-weight:700;letter-spacing:-.015em}
a{color:var(--hf-purple-800);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--hf-purple-500);outline-offset:2px;border-radius:4px}
::selection{background:var(--hf-purple-500);color:#FFFFFF}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--hf-ink-900);color:#fff;padding:10px 16px;border-radius:0 0 var(--r-sm) 0;z-index:200}
.skip-link:focus{left:0}

/* ============ LAYOUT ============ */
.container{max-width:var(--container);margin:0 auto;padding-inline:clamp(1rem,4vw,2rem)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding-inline:clamp(1rem,4vw,2rem)}
section{padding-block:var(--section-y)}
.section-alt{background:var(--hf-surface-alt)}
.section-tight{padding-block:var(--sp-7)}
.eyebrow{font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--hf-purple-700)}
.lead{font-size:var(--fs-body-lg);color:var(--hf-ink-600);max-width:62ch}
.stack>*+*{margin-top:var(--sp-4)}
.section-head{max-width:64ch;margin-bottom:var(--sp-6)}
.section-head h2{font-size:var(--fs-h2)}
.prose h2{font-size:var(--fs-h2);margin:var(--sp-7) 0 var(--sp-3)}
.prose h3{font-size:var(--fs-h3);margin:var(--sp-6) 0 var(--sp-2)}
.prose p{margin-bottom:var(--sp-4);max-width:70ch}
.prose ul,.prose ol{margin:0 0 var(--sp-4) var(--sp-5);max-width:70ch}
.prose li{margin-bottom:var(--sp-2)}
.prose a{color:var(--hf-purple-800);font-weight:600}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) clamp(1rem,4vw,2rem);background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hf-line)}
.logo-ph{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-ph .mark{width:38px;height:38px;border-radius:10px;background:repeating-linear-gradient(45deg,var(--hf-purple-100),var(--hf-purple-100) 6px,var(--hf-purple-050) 6px,var(--hf-purple-050) 12px);border:1.5px dashed var(--hf-purple-700);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--hf-purple-800)}
.logo-ph .word{font-weight:800;letter-spacing:-.02em;color:var(--hf-ink-900);font-size:1.05rem}
.logo-ph .word span{color:var(--hf-purple-700)}
.site-nav{display:flex;gap:var(--sp-2)}
.site-nav a{font-size:var(--fs-small);font-weight:500;color:var(--hf-ink-700);text-decoration:none;padding:8px 14px;border-radius:var(--r-pill);transition:font-weight var(--t-base) var(--ease-out),background var(--t-fast)}
.site-nav a:hover{background:var(--hf-purple-050);font-weight:700;color:var(--hf-ink-900)}
.site-nav a.active{background:var(--hf-purple-100);color:var(--hf-purple-800);font-weight:700}
.header-cta{display:flex;align-items:center;gap:var(--sp-3)}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1.5px solid var(--hf-line);border-radius:var(--r-sm);cursor:pointer;color:var(--hf-ink-900)}
.nav-toggle svg{width:22px;height:22px}
.mobile-sheet{display:none}
@media(max-width:860px){
  .site-nav{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-sheet{display:block;position:fixed;inset:0;z-index:150;visibility:hidden;pointer-events:none}
  .mobile-sheet[data-open="true"]{visibility:visible;pointer-events:auto}
  .mobile-sheet .backdrop{position:absolute;inset:0;background:rgba(18,14,38,.5);opacity:0;transition:opacity var(--t-base)}
  .mobile-sheet[data-open="true"] .backdrop{opacity:1}
  .mobile-sheet .panel{position:absolute;top:0;right:0;height:100%;width:min(320px,82vw);background:var(--hf-white);box-shadow:var(--sh-lift);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);transform:translateX(100%);transition:transform var(--t-base) var(--ease-out);overflow-y:auto}
  .mobile-sheet[data-open="true"] .panel{transform:none}
  .mobile-sheet .panel a{font-size:var(--fs-body);font-weight:600;color:var(--hf-ink-900);text-decoration:none;padding:12px 10px;border-radius:var(--r-sm)}
  .mobile-sheet .panel a:hover{background:var(--hf-purple-050)}
  .mobile-sheet .sheet-close{align-self:flex-end;width:44px;height:44px;background:transparent;border:0;cursor:pointer;color:var(--hf-ink-900);font-size:1.5rem}
}

/* ============ BREADCRUMBS ============ */
.breadcrumbs{padding-block:var(--sp-4)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--fs-small);color:var(--hf-ink-600)}
.breadcrumbs a{color:var(--hf-ink-600);text-decoration:none}
.breadcrumbs a:hover{color:var(--hf-purple-800);text-decoration:underline}
.breadcrumbs li::after{content:"/";margin-left:6px;color:var(--hf-ink-400)}
.breadcrumbs li:last-child::after{content:""}
.breadcrumbs li[aria-current]{color:var(--hf-ink-900);font-weight:600}

/* ============ ANSWER BOX ============ */
.answer-box{background:var(--hf-purple-050);border:1px solid var(--hf-line);border-left:4px solid var(--hf-purple-500);border-radius:var(--r-md);padding:var(--sp-5);max-width:72ch}
.answer-box p{font-size:var(--fs-body-lg);color:var(--hf-ink-700);margin:0}
.answer-box .verified-stamp{display:inline-block;margin-top:var(--sp-3);font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--hf-purple-700)}

/* ============ DISCLOSURE ============ */
.disclosure{font-size:var(--fs-small);color:var(--hf-ink-600);background:var(--hf-surface-alt);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);max-width:72ch}
.disclosure a{color:var(--hf-purple-800);font-weight:600}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--hf-font);font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em;
  min-height:48px;padding:0 var(--sp-6);border-radius:var(--r-pill);border:2px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-base) var(--ease-out),background var(--t-fast),font-weight var(--t-base) var(--ease-out);
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--hf-purple-500);color:#FFFFFF}
.btn-primary:hover{background:var(--hf-purple-600);box-shadow:var(--sh-glow);transform:translateY(-2px);font-weight:700}
.btn-dark{background:var(--hf-ink-900);color:var(--hf-white)}
.btn-dark:hover{background:var(--hf-night-800);transform:translateY(-2px);box-shadow:var(--sh-lift)}
.btn-outline{background:transparent;border-color:var(--hf-ink-900);color:var(--hf-ink-900)}
.btn-outline:hover{background:var(--hf-purple-100);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--hf-purple-800)}
.btn-ghost:hover{background:var(--hf-purple-050)}
.btn-lg{min-height:56px;padding:0 var(--sp-7);font-size:var(--fs-body-lg)}
.btn-sm{min-height:40px;padding:0 var(--sp-4);font-size:var(--fs-small)}
.btn[disabled]{background:var(--hf-line);color:var(--hf-ink-400);cursor:not-allowed;box-shadow:none;transform:none}
.btn .arr{transition:transform var(--t-base) var(--ease-spring)}
.btn:hover .arr{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.btn-outline-light{background:transparent;border-color:#fff;color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}

/* ============ BADGES & COUPON TICKET ============ */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-pill);padding:5px 12px}
.badge-deal{background:var(--hf-purple-500);color:#FFFFFF}
.badge-soft{background:var(--hf-purple-100);color:var(--hf-purple-800)}
.badge-dark{background:var(--hf-night-900);color:var(--hf-purple-200)}
.badge-warn{background:#FDF3DC;color:#8A6512}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:hf-pulse 1.6s ease-in-out infinite}

.ticket{
  --notch:12px;
  position:relative;display:inline-flex;align-items:stretch;
  background:var(--hf-night-900);color:var(--hf-white);border-radius:var(--r-md);
  box-shadow:var(--sh-lift);isolation:isolate;max-width:100%;
}
.ticket .t-left{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:var(--sp-4) var(--sp-5)}
.ticket .t-left .off{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--hf-purple-200);line-height:1}
.ticket .t-left .sub{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.12em;color:#C9C2FF;font-weight:600}
.ticket .t-perf{width:0;border-left:2px dashed rgba(140,133,255,.45);margin:var(--sp-3) 0;position:relative}
.ticket::before,.ticket::after{
  content:"";position:absolute;width:calc(var(--notch)*2);height:calc(var(--notch)*2);
  background:var(--hf-white);border-radius:50%;left:var(--t-perf-x,58%);transform:translateX(-50%);z-index:1;
}
.ticket::before{top:calc(var(--notch)*-1)}
.ticket::after{bottom:calc(var(--notch)*-1)}
.ticket .t-right{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5)}
.ticket .code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:1.05rem;font-weight:700;letter-spacing:.14em;
  background:var(--hf-night-800);border:1px dashed var(--hf-purple-200);border-radius:var(--r-sm);
  padding:8px 14px;color:var(--hf-purple-200);user-select:all;
}
.ticket .copy{min-height:40px;padding:0 var(--sp-4);font-size:var(--fs-small)}
.ticket.on-light{background:var(--hf-white);color:var(--hf-ink-900);border:1.5px solid var(--hf-line)}
.ticket.on-light::before,.ticket.on-light::after{background:var(--hf-surface-alt);border:1.5px solid var(--hf-line)}
.ticket.on-light .t-left .off{color:var(--hf-purple-800)}
.ticket.on-light .t-left .sub{color:var(--hf-ink-600)}
.ticket.on-light .code{background:var(--hf-purple-050);color:var(--hf-purple-800);border-color:var(--hf-purple-700)}
@media(max-width:560px){
  .ticket{flex-direction:column}
  .ticket .t-perf{width:auto;height:0;border-left:0;border-top:2px dashed rgba(140,133,255,.45);margin:0 var(--sp-4)}
  .ticket::before,.ticket::after{left:auto;top:var(--t-perf-y,52%);transform:translateY(-50%)}
  .ticket::before{left:calc(var(--notch)*-1)}
  .ticket::after{left:auto;right:calc(var(--notch)*-1)}
}

/* ============ CARDS & PRICING ============ */
.card{background:var(--hf-white);border:1px solid var(--hf-line);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--sp-6);transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-base)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lift);border-color:var(--hf-purple-500)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-5)}
.plan-card{position:relative;display:flex;flex-direction:column;gap:var(--sp-3)}
.plan-card .icon{width:48px;height:48px;border-radius:var(--r-md);background:var(--hf-purple-100);display:grid;place-items:center;color:var(--hf-purple-800)}
.plan-card h3{font-size:var(--fs-h3)}
.plan-card .strike{color:var(--hf-ink-400);text-decoration:line-through;font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.plan-card .now{display:flex;align-items:baseline;gap:var(--sp-2)}
.plan-card .now .amt{font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--hf-ink-900);font-variant-numeric:tabular-nums}
.plan-card .now .per{font-size:var(--fs-small);color:var(--hf-ink-600)}
.plan-card ul{list-style:none;display:grid;gap:var(--sp-2);font-size:var(--fs-small);color:var(--hf-ink-600)}
.plan-card ul li{display:flex;gap:8px;align-items:flex-start}
.plan-card ul li::before{content:"";flex:0 0 16px;height:16px;margin-top:3px;border-radius:50%;background:var(--hf-purple-100) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%235025D1" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/10px no-repeat}
.plan-card.featured{border:2px solid var(--hf-purple-500);box-shadow:var(--sh-glow)}
.plan-card.featured .flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%)}
.plan-card .save-line{font-size:var(--fs-small);color:var(--hf-save);font-weight:700}
.plan-card .renew{font-size:var(--fs-micro);color:var(--hf-ink-400)}

.price-table-wrap{overflow-x:auto;border:1px solid var(--hf-line);border-radius:var(--r-lg);background:var(--hf-white)}
table.price-table{width:100%;border-collapse:collapse;min-width:640px;font-variant-numeric:tabular-nums}
.price-table caption{text-align:left;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-small);color:var(--hf-ink-600)}
.price-table th{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--hf-ink-600);text-align:left;padding:var(--sp-3) var(--sp-4);background:var(--hf-surface-alt);border-bottom:1px solid var(--hf-line)}
.price-table td{padding:var(--sp-4);border-bottom:1px solid var(--hf-line);font-size:var(--fs-small);color:var(--hf-ink-700)}
.price-table tr:last-child td{border-bottom:0}
.price-table tr:hover td{background:var(--hf-purple-050)}
.price-table .plan b{color:var(--hf-ink-900);font-size:var(--fs-body)}
.price-table .strike{color:var(--hf-ink-400);text-decoration:line-through}
.price-table .final{font-weight:800;color:var(--hf-ink-900);font-size:var(--fs-body)}
.price-table .save{color:var(--hf-save);font-weight:700}
.price-table .renew{color:var(--hf-ink-600)}
.price-table .verified{font-size:var(--fs-micro);color:var(--hf-ink-400)}

/* generic comparison table reuse */
.data-table-wrap{overflow-x:auto;border:1px solid var(--hf-line);border-radius:var(--r-lg);background:var(--hf-white)}
table.data-table{width:100%;border-collapse:collapse;min-width:560px}
.data-table th{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--hf-ink-600);text-align:left;padding:var(--sp-3) var(--sp-4);background:var(--hf-surface-alt);border-bottom:1px solid var(--hf-line)}
.data-table td{padding:var(--sp-4);border-bottom:1px solid var(--hf-line);font-size:var(--fs-small);color:var(--hf-ink-700);vertical-align:top}
.data-table tr:last-child td{border-bottom:0}
.data-table td b,.data-table th b{color:var(--hf-ink-900)}

/* ============ FAQ ============ */
.faq{border:1px solid var(--hf-line);border-radius:var(--r-lg);overflow:hidden;background:var(--hf-white)}
.faq details{border-bottom:1px solid var(--hf-line)}
.faq details:last-child{border-bottom:0}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);cursor:pointer;list-style:none;padding:var(--sp-4) var(--sp-5);font-weight:600;color:var(--hf-ink-900);transition:background var(--t-fast)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--hf-purple-050)}
.faq summary .plus{flex:0 0 28px;height:28px;border-radius:50%;background:var(--hf-purple-100);display:grid;place-items:center;color:var(--hf-purple-800);font-weight:700;transition:transform var(--t-base) var(--ease-spring),background var(--t-fast)}
.faq details[open] summary .plus{transform:rotate(45deg);background:var(--hf-purple-500);color:#FFFFFF}
.faq .a{padding:0 var(--sp-5) var(--sp-5);color:var(--hf-ink-600);max-width:72ch}
.faq .a p{margin-bottom:var(--sp-3)}
.faq .a p:last-child{margin-bottom:0}

/* ============ HERO / PARALLAX ============ */
.hero{position:relative;overflow:hidden;background:var(--hf-night-900);color:var(--hf-white);padding:var(--sp-9) clamp(1rem,4vw,2rem);text-align:center;display:grid;place-items:center}
.hero .px-layer{position:absolute;inset:-12%;pointer-events:none;will-change:transform}
.hero .px-grid{background-image:linear-gradient(rgba(140,133,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(140,133,255,.10) 1px,transparent 1px);background-size:56px 56px}
.hero .px-glow{background:radial-gradient(600px 320px at 50% 8%,rgba(103,61,230,.35),transparent 70%)}
.hero .orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;background:radial-gradient(circle at 30% 30%,#C9C2FF,var(--hf-purple-500));animation:hf-float 7s ease-in-out infinite}
.hero .orb.o1{width:90px;height:90px;top:14%;left:8%}
.hero .orb.o2{width:52px;height:52px;bottom:18%;right:10%;animation-delay:-3s}
.hero .inner{position:relative;max-width:820px;display:grid;gap:var(--sp-5);justify-items:center}
.hero h1{color:var(--hf-white);font-size:var(--fs-display);font-weight:800;letter-spacing:-.03em;line-height:var(--lh-tight)}
.hero h1 .hl{color:var(--hf-purple-200)}
.hero p{color:#C5BEE6;font-size:var(--fs-body-lg);max-width:56ch}

/* page hero (non-home, lighter) */
.page-hero{padding-block:var(--sp-7) var(--sp-6)}
.page-hero h1{font-size:var(--fs-h1)}
.page-hero .lead{margin-top:var(--sp-3)}

/* ============ CTA BAND ============ */
.cta-band{position:relative;overflow:hidden;background:var(--hf-night-900);color:var(--hf-white);border-radius:var(--r-xl);padding:clamp(2rem,4vw,3.5rem);display:grid;gap:var(--sp-5);justify-items:center;text-align:center}
.cta-band h2{color:var(--hf-white);font-size:var(--fs-h2)}
.cta-band p{color:#C5BEE6;max-width:56ch}
.cta-band .px-glow{position:absolute;inset:0;background:radial-gradient(500px 260px at 50% 0%,rgba(103,61,230,.35),transparent 70%);pointer-events:none}
.cta-band>*{position:relative}

/* ============ FOOTER ============ */
.site-footer{background:var(--hf-night-900);color:#C5BEE6;padding-block:var(--sp-8) var(--sp-6);margin-top:var(--section-y)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6)}
.site-footer h4{color:var(--hf-white);font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--sp-3)}
.site-footer ul{list-style:none;display:grid;gap:var(--sp-2)}
.site-footer a{color:#C5BEE6;text-decoration:none;font-size:var(--fs-small)}
.site-footer a:hover{color:var(--hf-purple-200);text-decoration:underline}
.footer-brand .logo-ph .word{color:#fff}
.footer-brand .logo-ph .word span{color:var(--hf-purple-200)}
.footer-brand p{font-size:var(--fs-small);margin-top:var(--sp-3);max-width:36ch}
.footer-bottom{border-top:1px solid var(--hf-night-line);margin-top:var(--sp-6);padding-top:var(--sp-5);display:grid;gap:var(--sp-3);font-size:var(--fs-small)}
.footer-bottom .disclose{color:#9990C4;max-width:80ch}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ============ MOTION ============ */
@keyframes hf-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes hf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes hf-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes hf-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.marquee{overflow:hidden;background:var(--hf-night-900);color:var(--hf-purple-200);padding:var(--sp-3) 0}
.marquee .track{display:flex;gap:var(--sp-7);width:max-content;animation:hf-marquee 22s linear infinite;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-small)}
.marquee:hover .track{animation-play-state:paused}
.counter-box{display:flex;gap:var(--sp-7);flex-wrap:wrap}
.counter-box .stat b{display:block;font-size:2.25rem;font-weight:800;letter-spacing:-.03em;color:var(--hf-ink-900);font-variant-numeric:tabular-nums}
.counter-box .stat span{font-size:var(--fs-small);color:var(--hf-ink-600)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ============ FORMS ============ */
.field{display:grid;gap:6px;max-width:420px}
.field label{font-size:var(--fs-small);font-weight:600;color:var(--hf-ink-900)}
.field input,.field textarea{font-family:var(--hf-font);font-size:var(--fs-body);min-height:48px;padding:12px var(--sp-4);border:1.5px solid var(--hf-line);border-radius:var(--r-md);color:var(--hf-ink-900);background:var(--hf-white);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--hf-ink-400)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--hf-purple-500);box-shadow:0 0 0 4px rgba(103,61,230,.18)}
.field.error input{border-color:var(--hf-error);background:var(--hf-error-100)}
.field .msg{font-size:var(--fs-micro);color:var(--hf-ink-600)}
.field.error .msg{color:var(--hf-error);font-weight:600}

/* ============ MISC HELPERS ============ */
.steps{list-style:none;counter-reset:step;display:grid;gap:var(--sp-4)}
.steps li{position:relative;padding-left:56px;min-height:40px}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--hf-purple-100);color:var(--hf-purple-800);font-weight:800;display:grid;place-items:center}
.steps li h3{font-size:var(--fs-h4);margin-bottom:4px}
.steps li p{font-size:var(--fs-small);color:var(--hf-ink-600);max-width:64ch}
.img-slot{background:var(--hf-surface-alt);border:1px dashed var(--hf-line);border-radius:var(--r-md);display:grid;place-items:center;color:var(--hf-ink-400);font-size:var(--fs-small);width:100%;aspect-ratio:16/9}
.pill-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pill-list li{background:var(--hf-purple-050);border:1px solid var(--hf-line);border-radius:var(--r-pill);padding:6px 14px;font-size:var(--fs-small);color:var(--hf-ink-700)}
.callout{background:var(--hf-purple-050);border-left:3px solid var(--hf-purple-500);border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--sp-4) var(--sp-5);max-width:72ch}
.callout.warn{background:#FDF3DC;border-left-color:var(--hf-warn)}
.callout h3{font-size:var(--fs-h4);margin-bottom:var(--sp-2)}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-5)}
.center{text-align:center}
.mt-6{margin-top:var(--sp-6)}
.mt-5{margin-top:var(--sp-5)}
.mt-4{margin-top:var(--sp-4)}
.deal-alert{background:var(--hf-surface-alt);border:1px solid var(--hf-line);border-radius:var(--r-lg);padding:var(--sp-6)}
.blog-list{list-style:none;display:grid;gap:var(--sp-5)}
.blog-card{display:block;text-decoration:none;color:inherit}
.blog-card .meta{font-size:var(--fs-micro);color:var(--hf-ink-400);text-transform:uppercase;letter-spacing:.08em}
.blog-card h3{margin:var(--sp-2) 0}
.blog-card p{font-size:var(--fs-small);color:var(--hf-ink-600)}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--sp-3);font-size:var(--fs-small);color:var(--hf-ink-600);margin-bottom:var(--sp-5)}