/* =====================================================================
   HMV Courier — Landing Page
   Implemented 1:1 from Figma "Landing Page" node 50:10429 (1728×8945)
   via the official Figma MCP (get_design_context per section).
   Standalone stylesheet: index.html loads ONLY this file.
   Canela Trial (design serif) is substituted with Fraunces (closest
   free equivalent); all other values are taken verbatim from Figma.
   ===================================================================== */

/* ---------------- Canela Trial (design serif) ----------------
   The Figma file's display serif. `local()` picks it up instantly on
   machines that have it installed; otherwise the self-hosted files in
   website/fonts/ are used. Get the free trial fonts from
   commercialtype.com (Canela → Trial fonts) and drop them in:
     fonts/CanelaTrial-Black.woff2 / .otf
     fonts/CanelaTrial-Bold.woff2  / .otf
     fonts/CanelaTrial-BlackItalic.woff2 / .otf
   Fraunces remains the visual fallback until then. */
@font-face{
    font-family:'Canela Trial';
    font-weight:900; font-style:normal; font-display:swap;
    src:local('Canela Trial Black'), local('CanelaTrial-Black'), local('Canela Black'),
        url('../fonts/CanelaTrial-Black.woff2') format('woff2'),
        url('../fonts/CanelaTrial-Black.otf') format('opentype');
}
@font-face{
    font-family:'Canela Trial';
    font-weight:700; font-style:normal; font-display:swap;
    src:local('Canela Trial Bold'), local('CanelaTrial-Bold'), local('Canela Bold'),
        url('../fonts/CanelaTrial-Bold.woff2') format('woff2'),
        url('../fonts/CanelaTrial-Bold.otf') format('opentype');
}
@font-face{
    font-family:'Canela Trial';
    font-weight:900; font-style:italic; font-display:swap;
    src:local('Canela Trial Black Italic'), local('CanelaTrial-BlackItalic'),
        url('../fonts/CanelaTrial-BlackItalic.woff2') format('woff2'),
        url('../fonts/CanelaTrial-BlackItalic.otf') format('opentype');
}

/* ---------------- Tokens (Figma variables) ---------------- */
:root{
    --primary:      #002EAF;  /* Primary */
    --primary-600:  #003DE9;
    --primary-500:  #1452FF;
    --primary-300:  #6A91FF;
    --primary-200:  #95B1FF;
    --primary-50:   #EBF0FF;
    --secondary:    #8EACFF;
    --secondary-100:#C0D1FF;
    --dark:         #001349;  /* gradient end */
    --amber-50:#FFFBEB; --amber-200:#FEE685; --amber-300:#FFD230;
    --amber-600:#E17100; --amber-700:#BB4D00;
    --red-50:#FEF2F2; --red-200:#FFC9C9; --red-500:#FB2C36; --red-600:#E7000B;
    --emerald-50:#ECFDF5; --emerald-200:#A4F4CF; --emerald-600:#009966;
    --neutral-200:#E5E5E5;
    --card-bg:#F8FAFF;

    --sans:'Clash Display', sans-serif;
    --serif:'Canela Trial', 'Fraunces', Georgia, serif;  /* real Canela first, Fraunces fallback */

    /* type scale: exact @1728, fluid below */
    --fs-hero:        clamp(46px, 4.99vw,  86.2px);  /* Canela Black 86.2 */
    --fs-section-80:  clamp(40px, 4.63vw,  80px);    /* Clash Semibold 80 */
    --fs-heading-56:  clamp(32px, 3.24vw,  56px);    /* 56px headings     */
    --fs-cta:         clamp(44px, 5.56vw,  96px);    /* CTA 96            */
    --fs-title-72:    clamp(34px, 4.17vw,  72px);    /* feature titles    */
    --fs-title-48:    clamp(28px, 2.78vw,  48px);    /* service titles    */
    --fs-stat-64:     clamp(34px, 3.70vw,  64px);
    --fs-body-24:     clamp(17px, 1.39vw,  24px);
    --fs-body-20:     clamp(15px, 1.16vw,  20px);
    --fs-nav:         clamp(15px, 1.09vw,  18.87px);
}

/* ---------------- Reset ---------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
    font-family:var(--sans);
    background:#fff;
    color:#000;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; border:0; background:none; cursor:pointer; }

/* 1568px content column (1728 − 2×80) */
.lp-wrap{ width:min(1568px, 100% - 48px); margin-inline:auto; }

/* ---------------- Buttons (Figma BUTTON L / XL) ---------------- */
.lp-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:4px;
    padding:16.8px 25.2px; border-radius:4px;
    font-family:var(--sans); font-weight:500; font-size:18.87px;
    line-height:0.8; letter-spacing:-0.03em; white-space:nowrap;
    transition:filter .15s ease, background .15s ease;
}
.lp-btn:hover{ filter:brightness(1.08); }
.lp-btn-primary{ background:var(--primary); color:#fff; }
.lp-btn-white  { background:#fff; color:var(--primary); }
.lp-btn-xl     { padding:20px 32px; font-size:20px; letter-spacing:-0.03em; }
.lp-btn .lp-btn-ico{ width:18px; height:18px; }

/* =====================================================================
   HEADER  (Figma 27:36 — transparent + blur(8), py24 px80)
   ===================================================================== */
.navbar{
    position:sticky; top:0; z-index:60;
    padding:24px 0;
    background:rgba(0,0,0,0);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition:background .25s ease, box-shadow .25s ease, padding .25s ease;
}
.navbar .lp-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lp-brand{ display:flex; gap:6.3px; align-items:center; }
.lp-brand img{ width:68.95px; height:50.32px; }
.lp-brand .lp-brand-word{
    font-family:var(--serif); font-weight:900; font-size:18.87px; line-height:0.9;
    color:#fff; text-transform:uppercase; transition:color .25s ease;
}
.lp-nav{ display:flex; gap:25.16px; align-items:center; }
.lp-nav a{
    font-weight:400; font-size:var(--fs-nav); line-height:0.9; color:#fff;
    display:inline-flex; align-items:center; gap:4.2px;
    transition:color .15s ease, opacity .15s ease;
}
.lp-nav a:hover{ opacity:.75; }
.lp-nav .lp-caret{ width:16.8px; height:16.8px; }
/* transparent glass over LIGHT content (Figma 92:3598 — bg rgba(0,0,0,0)
   + blur(8), dark links, blue wordmark, no shadow). Content scrolls
   behind it; landing.js still adds .scrolled for a solid bar later. */
.navbar.navbar-glass-dark .lp-nav a{ color:#000; }
.navbar.navbar-glass-dark .lp-brand .lp-brand-word{ color:var(--primary); }
.navbar.navbar-glass-dark .lp-caret{ filter:invert(1); }
/* active page link (Figma: Clash Medium #1452FF) */
.lp-nav a.active{ color:var(--primary-500) !important; font-weight:500; }

/* Resources dropdown — opens on hover/focus, white card per design system */
.lp-dropdown{ position:relative; }
.lp-dropdown-menu{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    padding-top:14px; display:none; z-index:70;
}
.lp-dropdown:hover .lp-dropdown-menu,
.lp-dropdown:focus-within .lp-dropdown-menu{ display:block; }
.lp-dropdown-menu > div{
    min-width:200px; background:#fff; border:1px solid var(--neutral-200);
    border-radius:8px; box-shadow:0 12px 32px rgba(0,19,73,.12);
    padding:8px; display:flex; flex-direction:column; gap:2px;
}
.lp-dropdown-menu a{
    display:block; padding:12px 16px; border-radius:6px;
    font-weight:400; font-size:16px; line-height:1; letter-spacing:-0.02em;
    color:#000 !important; white-space:nowrap;
    transition:background .15s ease, color .15s ease;
}
.lp-dropdown-menu a:hover{ background:var(--primary-50); color:var(--primary) !important; opacity:1; }

/* solid state once scrolled past the hero (landing.js toggles) —
   .navbar-solid applies the same look permanently (light-hero pages) */
.navbar.scrolled, .navbar.navbar-solid{ background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.navbar.scrolled .lp-nav a, .navbar.navbar-solid .lp-nav a{ color:#111; }
.navbar.scrolled .lp-brand .lp-brand-word,
.navbar.navbar-solid .lp-brand .lp-brand-word{ color:var(--primary); }
.navbar.scrolled .lp-caret, .navbar.navbar-solid .lp-caret{ filter:invert(1); }
@media (max-width: 1120px){ .lp-nav{ display:none; } }

/* =====================================================================
   HERO  (Figma 27:28 — 1728×1117)
   ===================================================================== */
.hero-section{
    position:relative;
    height:clamp(640px, 64.64vw, 1117px);
    margin-top:calc(-1 * (98px + 0px));           /* pull under the sticky glass header */
    color:#fff;
    overflow:hidden;
}
.lp-hero-media, .lp-hero-media video, .lp-hero-media img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* exact Figma overlay */
.lp-hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,46,175,.4) 0%, rgba(0,19,73,.4) 69.23%);
}
.lp-hero-inner{ position:relative; height:100%; }
.lp-hero-copy{
    position:absolute; left:0; bottom:8.9%;
    display:flex; flex-direction:column; gap:1.6em;
}
.lp-hero-copy h1{
    font-family:var(--serif); font-weight:900;
    font-size:var(--fs-hero); line-height:0.9; letter-spacing:0;
    text-transform:uppercase; white-space:nowrap;
}
.lp-hero-copy p{
    font-weight:300; font-size:var(--fs-body-24); line-height:0.9;
    max-width:639px;
}
/* frosted metrics band — flush to the right viewport edge */
.lp-hero-metrics{
    position:absolute; right:calc(-1 * max(24px, (100vw - 1568px)/2)); bottom:28.4%;
    display:flex; gap:clamp(16px, 2.08vw, 36px); align-items:center;
    padding:16px max(24px,(100vw - 1568px)/2) 16px 24px;
    background:rgba(255,255,255,.1);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}
.lp-metric{ display:flex; flex-direction:column; align-items:center; }
.lp-metric b{
    font-family:var(--serif); font-weight:900;
    font-size:var(--fs-stat-64); line-height:0.9; white-space:nowrap;
}
.lp-metric span{ font-weight:400; font-size:var(--fs-body-24); line-height:0.9; white-space:nowrap; }
.lp-hero-ctas{
    position:absolute; right:0; bottom:10.5%;
    display:flex; gap:16px;
}
@media (max-width: 900px){
    .hero-section{ height:auto; min-height:100svh; }
    .lp-hero-inner{ display:flex; flex-direction:column; justify-content:flex-end;
                    padding:140px 0 48px; height:auto; min-height:100svh; }
    .lp-hero-copy, .lp-hero-metrics, .lp-hero-ctas{ position:static; }
    .lp-hero-copy h1{ white-space:normal; }
    .lp-hero-metrics{ margin:32px 0 24px; padding:16px 24px; flex-wrap:wrap; }
    .lp-hero-ctas{ justify-content:flex-start; }
}

/* =====================================================================
   PARTNERS MARQUEE  (Figma 27:87 — logos h56, gap 56, py40)
   ===================================================================== */
.lp-partners{ background:#fff; padding:40px 0; overflow:hidden; margin-top:40px; }
.lp-marquee{ display:flex; overflow:hidden; }
.lp-marquee-track{
    display:flex; gap:56px; align-items:center; flex-shrink:0;
    padding-right:56px;
    animation:lp-marquee 28s linear infinite;
}
/* logos pre-trimmed to their glyphs (images/figma/logo-*.png) — h56 as in Figma */
.lp-marquee-track img{ height:clamp(36px, 3.24vw, 56px); width:auto; }
@keyframes lp-marquee{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }

/* =====================================================================
   SERVICES  (Figma 29:39 — heading + 6-card grid, 24px gutters)
   ===================================================================== */
.lp-services{ padding-top:40px; }
.lp-services-heading{
    display:flex; gap:8px; align-items:center; justify-content:center;
    font-family:var(--serif); font-weight:900;
    font-size:var(--fs-heading-56); line-height:0.9; color:var(--primary);
    text-align:center; flex-wrap:wrap;
}
/* animated flip word (Figma "Motion" 29:179) */
.lp-flip{
    display:inline-block; position:relative; overflow:hidden;
    height:1.05em; min-width:3.7em; text-align:left;
}
.lp-flip span{
    position:absolute; left:0; top:0; opacity:0;
    animation:lp-flip 7.5s infinite;
}
.lp-flip span:nth-child(2){ animation-delay:2.5s; }
.lp-flip span:nth-child(3){ animation-delay:5s; }
@keyframes lp-flip{
    0%   { opacity:0; transform:translateY(90%); }
    4%   { opacity:1; transform:translateY(0); }
    30%  { opacity:1; transform:translateY(0); }
    34%  { opacity:0; transform:translateY(-90%); }
    100% { opacity:0; transform:translateY(-90%); }
}
.lp-services-sub{
    margin:24px auto 0; max-width:1188px;
    font-weight:300; font-size:var(--fs-body-24); line-height:0.9;
    text-align:center; color:#000;
}

/* --- bento grid: cols [507 | 506 | 507], rows [300 | 376 | 300] --- */
.lp-grid{
    margin-top:60px;
    display:grid; gap:24px;
    grid-template-columns:repeat(6, 1fr);
    grid-template-rows:clamp(220px,17.36vw,300px) clamp(260px,21.76vw,376px) clamp(220px,17.36vw,300px);
}
.lp-card{
    position:relative; border:1px solid var(--primary-200); border-radius:16px;
    overflow:hidden; background:#fff; padding:39px 40px;
}
.lp-card h3{
    font-weight:500; font-size:var(--fs-title-48); line-height:0.8;
    letter-spacing:-0.02em; color:#000;
}
.lp-card .lp-card-body{
    margin-top:14px; font-weight:300; font-size:var(--fs-body-20);
    line-height:0.95; max-width:290px; color:#000;
}
/* Courier Delivery — tall, photo + gradient, white text */
.lp-card-courier{ grid-column:1 / 3; grid-row:1 / 3; color:#fff; padding:39px 40px; }
.lp-card-courier .lp-card-img{ position:absolute; inset:0; }
.lp-card-courier .lp-card-img img{ width:100%; height:100%; object-fit:cover; }
.lp-card-courier .lp-card-img::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,46,175,0) 55.4%, rgba(0,19,73,.8) 77%);
}
.lp-card-courier h3, .lp-card-courier .lp-card-body{ position:relative; color:#fff; }
.lp-card-courier .lp-card-body{ max-width:385px; }
.lp-card-courier .lp-btn{ position:absolute; left:39px; bottom:41px; }
/* Business Shipping — wide tinted */
.lp-card-business{ grid-column:3 / 7; grid-row:1; background:var(--primary-50); }
/* Warehousing */
.lp-card-warehousing{ grid-column:3 / 5; grid-row:2; }
/* Fleet Management — solid secondary/100 */
.lp-card-fleet{ grid-column:5 / 7; grid-row:2; background:var(--secondary-100); }
/* Shipment Tracking */
.lp-card-tracking{ grid-column:1 / 4; grid-row:3; }
/* HMV API — browser graphic bleeding out right */
.lp-card-api{ grid-column:4 / 7; grid-row:3; }
.lp-card-api .lp-api-img{
    position:absolute; right:-12%; top:-40%; width:101%; pointer-events:none;
}
.lp-card-api .lp-api-typing{
    position:absolute; left:39px; top:61%; max-width:42%;
    overflow:hidden; white-space:nowrap;
    font-weight:400; font-size:clamp(16px,1.39vw,24px); line-height:0.9; color:var(--red-500);
}
.lp-card-api .lp-api-typing::after{ content:"|"; animation:lp-caret 1s steps(1) infinite; }
@keyframes lp-caret{ 50%{ opacity:0; } }

@media (max-width: 980px){
    .lp-grid{ grid-template-columns:1fr; grid-template-rows:none; }
    .lp-grid > *{ grid-column:auto !important; grid-row:auto !important; min-height:260px; }
    .lp-card-courier{ min-height:420px; }
}

/* =====================================================================
   HUB NETWORK  (Figma 43:6063 — 1728×1035)
   ===================================================================== */
.lp-network{ position:relative; padding:80px 0 0; overflow:hidden; }
.lp-network h2{
    font-weight:600; font-size:var(--fs-section-80); line-height:0.9;
    color:var(--primary); text-align:center;
}
.lp-network-map{ position:relative; margin-top:20px; }
.lp-network-map > img{
    width:122.3%; max-width:none; margin-left:-11.17%;   /* Figma bleed */
}
.lp-pin{
    position:absolute; background:#fff; padding:4px;
    border-radius:100px 100px 100px 0;
    filter:drop-shadow(2px 4px 2px rgba(0,0,0,.15));
}
.lp-pin i{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; padding:8px;
    border-radius:100px 100px 100px 0;
}
.lp-pin img{ width:20px; height:20px; }
.lp-pin-amber i{ background:var(--amber-600); }
.lp-pin-blue  i{ background:var(--primary-600); }
.lp-pin-red   i{ background:var(--red-600); }
.lp-pin-green i{ background:var(--emerald-600); }
/* Figma positions (% of 1728×1035 canvas) */
.lp-pin-amber{ left:48.5%; top:43%;   }
.lp-pin-blue { left:54.3%; top:54.8%; }
.lp-pin-red  { left:63.3%; top:39.2%; }
.lp-pin-green{ left:59.7%; top:63.3%; }

/* =====================================================================
   FEATURES BENTO  (Figma 43:6100 — "Built for Modern Logistics")
   ===================================================================== */
.lp-features{ padding-top:80px; }
.lp-features-heading{
    font-weight:600; font-size:var(--fs-section-80); line-height:0.9;
    color:var(--primary); text-align:center;
}
.lp-features-sub{
    margin:24px auto 0; max-width:1188px;
    font-weight:300; font-size:var(--fs-body-24); line-height:0.9;
    text-align:center;
}
.lp-grid-features{
    margin-top:60px;
    display:grid; gap:24px;
    grid-template-columns:repeat(6,1fr);
    grid-template-rows:clamp(220px,17.36vw,300px) clamp(260px,21.76vw,376px) clamp(220px,17.36vw,300px);
}
.lp-fcard{
    position:relative; border-radius:16px; border:1px solid var(--primary-200);
    overflow:hidden; padding:23px 24px;
}
.lp-fcard h3{
    font-weight:500; font-size:var(--fs-title-72); line-height:0.8;
    letter-spacing:-0.05em; color:#000;
}
.lp-fcard .lp-fcard-body{
    margin-top:16px; font-weight:300; font-size:var(--fs-body-20); line-height:0.95;
}
/* pills */
.lp-pills{ display:flex; flex-direction:column; gap:8px; opacity:.8; }
.lp-pill{
    display:flex; align-items:center; justify-content:center;
    padding:12px 16px; border-radius:4px;
    font-weight:400; font-size:clamp(14px,1.04vw,18px); line-height:0.9; white-space:nowrap;
    background:var(--primary-50); border:1px solid var(--primary-300);
}
/* serif stats */
.lp-stat b{ display:block; font-family:var(--serif); font-weight:900; line-height:0.9; white-space:nowrap; }
.lp-stat span{ display:block; font-weight:400; line-height:0.9; }

/* Technology — wide, L→R tint */
.lp-fcard-tech{
    grid-column:1 / 5; grid-row:1;
    background:linear-gradient(90deg, var(--primary-50) 18%, #fff 23.3%);
}
.lp-fcard-tech .lp-fcard-body{ max-width:502px; }
.lp-fcard-tech .lp-tech-pills{
    position:absolute; left:23px; bottom:23px;
    display:grid; grid-template-columns:257px 257px; gap:8px; opacity:.8;
}
.lp-fcard-tech .lp-stat{ color:var(--primary); position:absolute; }
.lp-fcard-tech .lp-stat-main{ left:60.5%; top:15%; }
.lp-fcard-tech .lp-stat-main span{ font-size:clamp(18px,1.6vw,27.6px); margin-bottom:14px; }
.lp-fcard-tech .lp-stat-main b{ font-size:clamp(44px,4.78vw,82.7px); }
.lp-fcard-tech .lp-stat-a{ left:60.5%; top:60.3%; }
.lp-fcard-tech .lp-stat-b{ left:81.4%; top:60.3%; }
.lp-fcard-tech .lp-stat-a span, .lp-fcard-tech .lp-stat-b span{ font-size:clamp(13px,1.02vw,17.7px); margin-bottom:9px; }
.lp-fcard-tech .lp-stat-a b, .lp-fcard-tech .lp-stat-b b{ font-size:clamp(30px,3.07vw,53px); }

/* Fast Delivery — tall amber */
.lp-fcard-fast{
    grid-column:5 / 7; grid-row:1 / 3;
    background:linear-gradient(180deg, var(--amber-50) 0%, #fff 50%);
    border-color:var(--amber-300);
    padding:39px 24px;
}
.lp-fcard-fast .lp-fcard-body{ margin-top:40px; max-width:459px; font-size:var(--fs-body-24); }
.lp-fcard-fast .lp-pill{ background:var(--amber-50); border-color:var(--amber-200); }
.lp-fcard-fast .lp-pills{ margin-top:32px; }
.lp-fcard-fast .lp-pills-row{ display:flex; gap:8px; margin-top:8px; opacity:.8; }
.lp-fcard-fast .lp-pills-row .lp-pill{ flex:1; }
.lp-fcard-fast .lp-stats{ position:absolute; left:23px; right:24px; bottom:24px; display:grid;
    grid-template-columns:1fr auto; column-gap:24px; color:var(--amber-700); }
.lp-fcard-fast .lp-stat-big span{ font-size:clamp(20px,1.89vw,32.6px); max-width:240px; margin-bottom:16px; }
.lp-fcard-fast .lp-stat-big b{ font-size:clamp(48px,5.67vw,97.9px); }
.lp-fcard-fast .lp-stats-side{ display:flex; flex-direction:column; gap:18px; }
.lp-fcard-fast .lp-stats-side span{ font-size:clamp(13px,1.02vw,17.7px); margin-bottom:9px; }
.lp-fcard-fast .lp-stats-side b{ font-size:clamp(30px,3.07vw,53px); }

/* Visibility — vertical tint, title mid-card */
.lp-fcard-visibility{
    grid-column:1 / 3; grid-row:2;
    background:linear-gradient(180deg, var(--primary-50) 17.4%, #fff 23.7%);
    display:flex; flex-direction:column; justify-content:center;
}
.lp-fcard-visibility .lp-fcard-body{ max-width:406px; margin-top:24px; }
/* Enterprise Ready — red tint */
.lp-fcard-enterprise{
    grid-column:3 / 5; grid-row:2;
    background:linear-gradient(180deg, var(--red-50) 10.8%, #fff 33.5%);
    border-color:var(--red-200);
    display:flex; flex-direction:column; justify-content:center;
}
.lp-fcard-enterprise .lp-fcard-body{ max-width:411px; margin-top:24px; }
/* Nationwide Coverage — dotted Nigeria map bleeding right */
.lp-fcard-nationwide{ grid-column:1 / 4; grid-row:3; padding:40px 24px; }
.lp-fcard-nationwide .lp-fcard-body{ max-width:275px; margin-top:24px; }
.lp-fcard-nationwide .lp-map{
    position:absolute; left:13.6%; top:-15px; width:113%; max-width:none; pointer-events:none;
}
/* Secure Handling — emerald tint + boxes photo */
.lp-fcard-secure{
    grid-column:4 / 7; grid-row:3;
    background:linear-gradient(180deg, var(--emerald-50) 20.5%, #fff 39.8%);
    padding:56px 24px;
}
.lp-fcard-secure .lp-fcard-body{ max-width:365px; margin-top:36px; }
.lp-fcard-secure .lp-boxes{
    position:absolute; left:54.7%; top:50%; transform:translateY(-50%);
    height:214%; width:auto; max-width:none; pointer-events:none;
}
@media (max-width: 980px){
    .lp-grid-features{ grid-template-columns:1fr; grid-template-rows:none; }
    .lp-grid-features > *{ grid-column:auto !important; grid-row:auto !important; min-height:280px; }
    .lp-fcard-tech .lp-stat, .lp-fcard-fast .lp-stats{ position:static; margin-top:24px; }
    .lp-fcard-tech .lp-tech-pills{ position:static; grid-template-columns:1fr 1fr; margin-top:24px; }
    .lp-fcard-nationwide .lp-map{ opacity:.35; }
}

/* =====================================================================
   AUDIENCE TOGGLE  (Figma 44:10005/44:10006)
   ===================================================================== */
.lp-toggle{ padding-top:80px; }
.lp-toggle-tabs{ display:flex; gap:16px; justify-content:center; }
.lp-tab{
    padding:16px 24px; border-radius:8px;
    font-weight:400; font-size:20px; line-height:0.9; letter-spacing:-0.05em;
    background:#fff; border:1px solid var(--neutral-200); color:#000;
    transition:all .2s ease;
}
.lp-tab.active{
    background:var(--primary-50); border-color:var(--primary-200); color:var(--primary);
}
.lp-toggle-row{ margin-top:50px; display:flex; align-items:flex-end; gap:24px; }
.lp-toggle-panel{
    width:min(796px,100%); min-height:clamp(280px,23.15vw,400px);
    border:1px solid var(--primary-200); border-radius:16px;
    background:linear-gradient(180deg, var(--primary-50) 17.4%, #fff 23.7%);
    padding:40px; display:none;
}
.lp-toggle-panel.active{ display:block; }
.lp-toggle-panel h3{
    font-weight:500; font-size:clamp(24px,1.85vw,32px); line-height:0.9;
    letter-spacing:-0.03em; color:#000; max-width:24ch;
}
.lp-toggle-panel p{
    margin-top:20px; font-weight:300; font-size:var(--fs-body-20); line-height:1.15;
    max-width:52ch; color:#000;
}
.lp-toggle-panel ul{ margin-top:24px; display:grid; gap:10px; }
.lp-toggle-panel li{
    font-weight:400; font-size:var(--fs-body-20); line-height:0.9;
    padding-left:18px; position:relative;
}
.lp-toggle-panel li::before{
    content:""; position:absolute; left:0; top:.32em; width:7px; height:7px;
    border-radius:50%; background:var(--primary);
}
.lp-toggle-cta{ margin-left:auto; }
@media (max-width: 900px){
    .lp-toggle-row{ flex-direction:column; align-items:stretch; }
    .lp-toggle-cta{ margin-left:0; align-self:flex-start; }
}

/* =====================================================================
   PRICING  (Figma 44:10011 + 46:10125/26/27 — notched 507×707 cards)
   ===================================================================== */
.lp-pricing{ position:relative; padding-top:120px; }
/* soft #1452FF star glow behind the left cards (Figma 50:10426) */
.lp-pricing::before{
    content:""; position:absolute; left:-375px; top:40%; width:938px; height:938px;
    background:radial-gradient(circle, rgba(20,82,255,.28) 0%, rgba(20,82,255,0) 62%);
    pointer-events:none;
}
.lp-pricing h2{
    font-weight:600; font-size:var(--fs-heading-56); line-height:0.9;
    color:var(--primary); text-align:center;
}
.lp-pricing h2 em{
    font-family:var(--serif); font-weight:700; font-style:normal;
}
.lp-pricing-sub{
    margin:22px auto 0; max-width:1046px;
    font-weight:300; font-size:var(--fs-body-24); line-height:0.9; text-align:center;
}
.lp-pricing-grid{
    position:relative; margin-top:66px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.lp-price-card{
    position:relative; aspect-ratio:507 / 707;
    background:url("../images/figma/pricing-card-shape.svg") center / 100% 100% no-repeat;
    padding:5.3% 5.3% 5.3%;
}
.lp-price-badge{
    position:absolute; top:2.7%; right:4%;
    font-weight:400; font-size:clamp(13px,1.16vw,20px); letter-spacing:-0.05em;
    color:var(--primary); text-transform:uppercase;
}
.lp-price-desc{
    margin-top:11%;
    font-weight:300; font-size:var(--fs-body-24); line-height:0.9;
    letter-spacing:-0.03em; max-width:374px;
}
.lp-price-features-label{
    margin-top:8%;
    display:flex; align-items:center; gap:16px;
    font-weight:300; font-size:var(--fs-body-20); letter-spacing:-0.03em;
}
.lp-price-features-label::before,
.lp-price-features-label::after{
    content:""; flex:1; height:2px;
    background:linear-gradient(90deg, transparent, var(--primary-500));
}
.lp-price-features-label::after{
    background:linear-gradient(90deg, var(--primary-500), transparent);
}
.lp-price-card ul{
    margin-top:7%; list-style:disc; padding-left:30px;
    font-weight:400; font-size:var(--fs-body-20); line-height:0.9; letter-spacing:-0.03em;
}
.lp-price-card li{ margin-bottom:16px; }
.lp-price-card .lp-btn{
    position:absolute; left:5.3%; right:5.3%; bottom:3.9%; width:auto;
}
@media (max-width: 980px){
    .lp-pricing-grid{ grid-template-columns:1fr; max-width:507px; margin-inline:auto; }
}

/* =====================================================================
   TESTIMONIALS  (Figma 46:10129 + 46:10145 — 905×400 cards, carousel)
   ===================================================================== */
.lp-testimonials{ padding-top:120px; }
.lp-testimonials h2{
    font-weight:600; font-size:var(--fs-heading-56); line-height:0.9;
    letter-spacing:-0.03em; color:var(--primary); text-align:center;
}
.lp-testi-track{
    margin-top:66px;
    display:flex; gap:24px;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.lp-testi-track::-webkit-scrollbar{ display:none; }
.lp-testi-card{
    position:relative; flex:0 0 min(905px, 92%);
    height:clamp(300px,23.15vw,400px);
    background:var(--card-bg); border-radius:24px; overflow:hidden;
    scroll-snap-align:start;
}
.lp-testi-card .lp-testi-quote{
    position:absolute; left:40px; top:44px; width:min(345px,55%);
    font-weight:300; font-size:var(--fs-body-24); line-height:0.9; letter-spacing:-0.03em;
}
.lp-testi-card .lp-testi-name{
    position:absolute; left:40px; bottom:15%;
    font-weight:300; font-size:var(--fs-body-24); letter-spacing:-0.03em;
}
.lp-testi-card .lp-testi-role{
    position:absolute; left:40px; bottom:8%;
    font-weight:500; font-size:16px; letter-spacing:-0.03em;
}
.lp-testi-card .lp-testi-art{
    position:absolute; right:0; top:0; height:100%; width:auto; max-width:none;
}
.lp-testi-nav{ margin-top:32px; display:flex; gap:12px; justify-content:center; }
.lp-testi-nav button{
    width:88px; height:34px; border-radius:100px; background:#C4C4C4;
    transition:background .2s ease;
}
.lp-testi-nav button:hover{ background:var(--primary-200); }

/* =====================================================================
   CTA  (Figma 46:10152 — 1568×500, blurred stars)
   ===================================================================== */
.lp-cta{ margin-top:120px; }
.lp-cta-card{
    position:relative; border-radius:24px; overflow:hidden;
    background:linear-gradient(90deg, var(--primary) 0%, var(--dark) 100%);
    min-height:clamp(340px,28.94vw,500px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; color:#fff;
    padding:48px 24px;
}
.lp-cta-card h2{
    font-weight:600; font-size:var(--fs-cta); line-height:0.9; letter-spacing:-0.03em;
    max-width:899px; position:relative; z-index:1;
}
.lp-cta-card p{
    margin-top:26px; font-weight:300; font-size:clamp(20px,2.08vw,36px);
    line-height:0.9; letter-spacing:-0.03em; position:relative; z-index:1;
}
.lp-cta-card .lp-btn{ margin-top:36px; position:relative; z-index:1; }
.lp-cta-star{ position:absolute; top:50%; width:692px; height:692px; pointer-events:none; }
.lp-cta-star img{ position:absolute; inset:-80.91%; width:261.8%; height:261.8%; max-width:none; }
.lp-cta-star-l{ left:-346px; transform:translateY(-50%); }
.lp-cta-star-r{ left:calc(100% - 346px); transform:translateY(-50%); }

/* =====================================================================
   FOOTER  (Figma 46:10342 — p80, r24, vertical gradient)
   ===================================================================== */
.lp-footer{ padding:120px 0 60px; }
.lp-footer-card{
    background:linear-gradient(180deg, var(--primary) 0%, var(--dark) 100%);
    border-radius:24px; color:#fff;
    padding:clamp(40px, 4.63vw, 80px);
}
.lp-footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1.23fr;
    column-gap:clamp(24px,2.7vw,47px);
    min-height:clamp(360px,29.9vw,516px);
}
.lp-footer-brand{ align-self:center; }
.lp-footer-brand .lp-footer-word{
    font-family:var(--serif); font-weight:900;
    font-size:clamp(44px,4.63vw,80px); line-height:1;
}
.lp-footer-brand p{
    margin-top:16px; font-weight:400; font-size:clamp(17px,1.39vw,24px); line-height:1;
}
.lp-footer-links{ display:flex; flex-direction:column; gap:24px; }
.lp-footer-links a{
    font-weight:400; font-size:clamp(18px,1.62vw,28px); line-height:0.7;
    transition:opacity .15s ease;
}
.lp-footer-links a:hover{ opacity:.7; }
.lp-footer-contact p{ font-weight:400; font-size:clamp(18px,1.62vw,28px); }
.lp-footer-contact .lp-contact-head{ font-weight:700; line-height:1; margin-bottom:16px; }
.lp-footer-contact .lp-contact-line{ line-height:0.7; margin-bottom:16px; }
.lp-footer-contact .lp-contact-flow{ line-height:1.29; margin-bottom:16px; }
.lp-footer-contact a:hover{ opacity:.7; }
.lp-follow{ margin-top:64px; }
.lp-follow p{ font-weight:500; font-size:20px; line-height:24px; }
.lp-socials{ margin-top:16px; display:flex; gap:10px; }
.lp-socials a{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:100px;
    background:rgba(255,255,255,.1);
    transition:background .2s ease;
}
.lp-socials a:hover{ background:rgba(255,255,255,.22); }
.lp-socials img{ width:20px; height:20px; }
.lp-socials a.lp-social-full{ background:none; }
.lp-socials a.lp-social-full img{ width:44px; height:44px; }
.lp-footer-copy{ margin-top:24px; font-weight:400; font-size:20px; line-height:24px; }
.lp-footer-copy em{ font-family:var(--serif); font-weight:900; font-style:italic; }
@media (max-width: 980px){
    .lp-footer-grid{ grid-template-columns:1fr; row-gap:48px; min-height:0; }
    .lp-footer-brand{ align-self:start; }
    .lp-follow{ margin-top:32px; }
}