/* ============================================================
   MKG (Mierakigai) Design System  -  global entry point.
   Consumers link THIS file. Import lines only.
   ============================================================ */

/* ============================================================
   MKG (Mierakigai)  -  FONTS
   Inter (Google Fonts). Weights 400/500/700/800/900.
   NOTE: served from Google Fonts CDN. If you need self-hosted
   binaries, replace this with local @font-face rules.
   ============================================================ */

/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* ============================================================
   MKG (Mierakigai)  -  COLOR TOKENS
   Dark-mode, gradient-heavy, high-energy.
   Base palette + semantic aliases.
   ============================================================ */

:root {
  /* ---- Brand: Purple ramp ---- */
  --mkg-purple-deep: #3D1A8E;   /* Deep Purple  -  backgrounds, depth */
  --mkg-purple: #6B21E8;        /* Vivid Purple  -  primary brand, icon */
  --mkg-purple-bright: #7C3AED; /* Hover / lift */
  --mkg-purple-soft: #A78BFA;   /* Tints, glows */

  /* ---- Brand: Orange / Red ramp ---- */
  --mkg-orange-electric: #E84C0E; /* Electric Orange  -  primary accent */
  --mkg-orange-bright: #F97316;   /* Bright Orange  -  emphasis */
  --mkg-orange-warm: #C2410C;     /* Warm Red-Orange */
  --mkg-maroon: #7F1D1D;          /* Dark Maroon  -  deep accent */

  /* ---- Neutrals ---- */
  --mkg-white: #FFFFFF;
  --mkg-black: #0A0A0A;        /* Near Black  -  canvas */
  --mkg-ink: #141414;          /* Raised dark surface */
  --mkg-ink-2: #1F1B2E;        /* Dark surface w/ purple cast */
  --mkg-gray-300: #D4D4D8;
  --mkg-gray-400: #A1A1AA;
  --mkg-gray-500: #71717A;

  /* ---- Highlight ---- */
  --mkg-yellow: #F5C518;       /* Golden Yellow  -  warnings, highlights */

  /* ---- Gradients ---- */
  --mkg-grad-brand: linear-gradient(135deg, #6B21E8 0%, #E84C0E 100%); /* @kind color */
  --mkg-grad-purple: linear-gradient(135deg, #3D1A8E 0%, #6B21E8 100%); /* @kind color */
  --mkg-grad-sunset: linear-gradient(135deg, #6B21E8 0%, #C2410C 55%, #F97316 100%); /* @kind color */
  --mkg-grad-ember: linear-gradient(135deg, #7F1D1D 0%, #E84C0E 100%); /* @kind color */
  /* Background mesh / aurora glow blobs */
  --mkg-glow-purple: radial-gradient(circle at 25% 20%, rgba(107,33,232,0.55) 0%, rgba(107,33,232,0) 60%); /* @kind color */
  --mkg-glow-orange: radial-gradient(circle at 80% 85%, rgba(232,76,14,0.50) 0%, rgba(232,76,14,0) 60%); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */

  /* Surfaces (dark-first) */
  --surface-canvas: var(--mkg-black);
  --surface-raised: var(--mkg-ink);
  --surface-raised-purple: var(--mkg-ink-2);
  --surface-card: var(--mkg-purple);
  --surface-card-accent: var(--mkg-orange-electric);
  --surface-inverse: var(--mkg-white);

  /* Text */
  --text-primary: var(--mkg-white);
  --text-secondary: rgba(255,255,255,0.72);
  --text-muted: rgba(255,255,255,0.52);
  --text-emphasis: var(--mkg-orange-bright);
  --text-highlight: var(--mkg-yellow);
  --text-on-light: var(--mkg-black);
  --text-on-purple: var(--mkg-white);

  /* Brand */
  --brand-primary: var(--mkg-purple);
  --brand-accent: var(--mkg-orange-electric);
  --brand-accent-bright: var(--mkg-orange-bright);

  /* Interactive */
  --action-fill: var(--mkg-black);
  --action-fill-text: var(--mkg-white);
  --action-gradient: var(--mkg-grad-brand);
  --action-outline: rgba(255,255,255,0.85);

  /* Borders / dividers */
  --border-subtle: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.28);
  --border-on-light: rgba(10,10,10,0.10);

  /* Semantic status */
  --status-warning: var(--mkg-yellow);
  --status-danger: var(--mkg-maroon);
  --status-success: #16A34A;
}

/* ============================================================
   MKG (Mierakigai)  -  TYPOGRAPHY TOKENS
   Inter. Black/ExtraBold for impact, Regular for body.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* ---- Sizes (Instagram 1080×1350 canvas scale) ---- */
  --size-display: 132px;  /* Hero headline  -  ALL CAPS, dominant */
  --size-h1: 96px;        /* Primary headline */
  --size-h2: 64px;        /* Secondary headline */
  --size-h3: 44px;        /* Card / section heads */
  --size-lead: 36px;      /* Sub-headline / hook */
  --size-body: 30px;      /* Body copy */
  --size-body-sm: 26px;   /* Dense body */
  --size-label: 22px;     /* Tags / CTAs / labels (ALL CAPS) */
  --size-counter: 20px;   /* Slide counter */

  /* ---- Line heights ---- */
  --leading-tight: 0.96;   /* Display / headlines */
  --leading-snug: 1.12;
  --leading-normal: 1.4;   /* Body */
  --leading-relaxed: 1.55;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.03em;  /* Big headlines */
  --tracking-normal: 0;
  --tracking-label: 0.12em;   /* ALL-CAPS labels / CTAs */
  --tracking-wide: 0.2em;
}

/* ============================================================
   MKG (Mierakigai)  -  SPACING & LAYOUT TOKENS
   Built around the 1080×1350 Instagram canvas + golden ratio.
   ============================================================ */

:root {
  /* ---- Base spacing scale (8px rhythm) ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 54px;   /* = horizontal safe margin */
  --space-7: 67px;   /* = vertical safe margin */
  --space-8: 80px;
  --space-9: 120px;

  /* ---- Canvas ---- */
  --canvas-w: 1080px;
  --canvas-h: 1350px;

  /* ---- Safe zone (per brand spec) ---- */
  --safe-x: 54px;            /* left / right */
  --safe-y: 67px;            /* top / bottom */
  --safe-w: 972px;           /* 1080 - 2*54 */
  --safe-h: 1216px;          /* 1350 - 2*67 */

  /* ---- Golden-ratio zones (φ = 1.618) ---- */
  --hero-top: 67px;          /* hero zone start */
  --hero-bottom: 818px;      /* hero / support split (61.8%) */
  --support-bottom: 1283px;  /* CTA max bottom */
  --header-strip-h: 116px;   /* logo + counter strip */
  --card-max-bottom: 1220px;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 16px;     /* cards (min) */
  --radius-lg: 20px;     /* cards (max) */
  --radius-xl: 28px;
  --radius-pill: 999px;  /* CTA stadium buttons */

  /* ---- Card internal padding ---- */
  --card-pad: 20px;      /* min internal padding */
  --card-pad-lg: 32px;
}

/* ============================================================
   MKG (Mierakigai)  -  EFFECTS TOKENS
   Shadows, glows, blur. Energetic, glowing dark-mode depth.
   ============================================================ */

:root {
  /* ---- Elevation shadows (on dark canvas) ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.40);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.55);

  /* ---- Brand glows (colored, for floating elements/CTAs) ---- */
  --glow-purple: 0 12px 40px rgba(107,33,232,0.45);
  --glow-orange: 0 12px 40px rgba(232,76,14,0.45);
  --glow-purple-tight: 0 0 0 6px rgba(107,33,232,0.18);

  /* ---- Blur (glass surfaces over gradients) ---- */
  --blur-glass: blur(18px); /* @kind other */
  --glass-fill: rgba(20,16,30,0.55); /* @kind color */
  --glass-border: rgba(255,255,255,0.14); /* @kind color */

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 4px rgba(167,139,250,0.55);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}

*{box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{margin:0;padding:0}
  body{
    font-family:var(--font-sans);
    color:var(--mkg-white);
    background:#050505;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%}
  a{color:inherit}

  /* ===== Mobile-first column shell ===== */
  .phone{
    width:100%;
    max-width:430px;
    margin:0 auto;
    background:var(--mkg-black);
    position:relative;
    overflow:hidden;
    box-shadow:0 0 80px rgba(0,0,0,0.6);
    /* ===== Tweakable feel ===== */
    --tilt:1;
    --topo-op:1;
    --acc1:var(--mkg-yellow);   --acc1-fg:var(--mkg-purple-deep);
    --acc2:var(--mkg-orange-electric); --acc2-fg:#fff;
  }
  .phone[data-mood="purple"]{
    --acc1:#b79bff; --acc1-fg:var(--mkg-purple-deep);
    --acc2:var(--mkg-purple); --acc2-fg:#fff;
  }
  .phone[data-mood="voltage"]{
    --acc1:var(--mkg-yellow); --acc1-fg:#1a0f05;
    --acc2:#ff2d8e; --acc2-fg:#fff;
  }
  @media(min-width:520px){
    body{background:radial-gradient(circle at 50% 0%, #1a1430 0%, #050505 60%)}
    .phone{margin-top:24px;margin-bottom:24px;border-radius:28px}
  }

  .pad{padding:0 22px}
  section{position:relative;overflow:hidden}

  /* topographic / fingerprint texture  -  the reference's signature backdrop */
  .topo::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--topo-op,1);
    background-image:
      repeating-radial-gradient(circle at 24% 22%, rgba(255,255,255,0.045) 0 1.5px, transparent 1.5px 22px),
      repeating-radial-gradient(circle at 84% 74%, rgba(255,255,255,0.04) 0 1.5px, transparent 1.5px 26px);
  }
  .glow-p::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--mkg-glow-purple)}
  .glow-o::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--mkg-glow-orange)}
  .inner{position:relative;z-index:2}

  /* ===== Highlight boxes  -  the signature reference move ===== */
  .hl{display:inline;padding:.06em .26em;border-radius:7px;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-weight:900}
  .hl-yellow{background:var(--acc1);color:var(--acc1-fg)}
  .hl-orange{background:var(--acc2);color:var(--acc2-fg)}
  .hl-white{background:#fff;color:var(--mkg-purple-deep)}
  .hl-purple{background:var(--mkg-purple);color:#fff}
  .rot-n{transform:rotate(calc(-2deg * var(--tilt)))}
  .rot-p{transform:rotate(calc(1.8deg * var(--tilt)))}

  /* stacked highlighted headline */
  .stack{margin:0;font-weight:900;letter-spacing:-0.02em;line-height:1.45;font-size:30px}
  .stack .line{display:block;width:fit-content;margin-bottom:9px}
  .stack .line:last-child{margin-bottom:0}

  /* mini eyebrow copy */
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--acc2)}
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--acc1)}

  /* decals (sparkles/asterisks) */
  .decal{position:absolute;font-weight:900;line-height:1;pointer-events:none;user-select:none;z-index:3}
  .spark{color:var(--acc1)}
  .bolt{color:var(--acc2)}

  /* ===== Buttons ===== */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-sans);font-weight:800;text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-pill);border:none;cursor:pointer;text-decoration:none;transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);line-height:1.1;text-align:center}
  .btn:hover{filter:brightness(1.08)}
  .btn:active{transform:scale(.97)}
  .btn-grad{background:var(--mkg-grad-brand);color:#fff;box-shadow:var(--glow-purple)}
  .btn-orange{background:var(--mkg-orange-electric);color:#fff;box-shadow:var(--glow-orange)}
  .btn-yellow{background:var(--mkg-yellow);color:var(--mkg-purple-deep)}
  .btn-white{background:#fff;color:var(--mkg-purple-deep)}
  .btn-sm{font-size:11px;padding:11px 18px}
  .btn-md{font-size:14px;padding:16px 26px}
  .btn-lg{font-size:16px;padding:19px 28px}
  .btn-block{display:flex;width:100%}
  .btn .arr{font-size:1.15em;line-height:0;transform:translateY(1px)}

  /* ===== NAV ===== */
  header.nav{position:sticky;top:0;z-index:60;background:rgba(10,10,10,0.78);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--border-subtle)}
  .nav .bar{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 18px}
  .nav img{height:26px;width:auto}

  /* ===== HERO ===== */
  .hero{background:var(--mkg-grad-purple);padding:30px 0 40px}
  .hero .stack{text-align:center;font-size:40px}
  .hero .stack .line{margin-left:auto;margin-right:auto}
  .hero .eyebrow{display:flex;justify-content:center}
  .hero .lead{margin:22px auto 0;text-align:center;font-size:15px;font-weight:500;line-height:1.55;color:rgba(255,255,255,0.86);max-width:34ch}
  .hero .lead b{font-weight:800;color:#fff}

  /* hero collage */
  .collage{position:relative;margin:34px auto 0;width:min(300px,82%);aspect-ratio:4/5}
  .collage .frame{position:absolute;inset:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg),var(--glow-orange)}
  .collage image-slot{width:100%;height:100%}
  .sticker{position:absolute;z-index:4;font-weight:800;font-size:12px;line-height:1.2;padding:8px 11px;border-radius:8px;box-shadow:var(--shadow-md);text-transform:uppercase;letter-spacing:.02em}
  .sticker.s1{top:-12px;left:-8px;background:var(--acc1);color:var(--acc1-fg);transform:rotate(calc(-6deg * var(--tilt)))}
  .sticker.s2{bottom:64px;right:-10px;background:var(--acc2);color:var(--acc2-fg);transform:rotate(calc(4deg * var(--tilt)))}
  .chip{position:absolute;z-index:5;left:-12px;bottom:-14px;background:var(--mkg-ink);border:1px solid var(--border-subtle);border-radius:13px;padding:11px 13px;box-shadow:var(--shadow-lg);transform:rotate(calc(-3deg * var(--tilt)));width:140px}
  .chip .ttl{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
  .chip .val{font-size:25px;font-weight:900;color:var(--acc2);margin-top:2px;line-height:1}
  .chip .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.1);margin-top:8px;overflow:hidden}
  .chip .bar i{display:block;height:100%;width:74%;background:var(--mkg-grad-brand)}

  /* ===== Generic section head ===== */
  .sec{padding:64px 0}
  .sec-eyebrow{margin-bottom:16px}
  .quote{margin:22px 0 0;font-size:15px;line-height:1.6;color:var(--text-secondary);border-left:3px solid var(--mkg-orange-electric);padding-left:16px}
  .quote b{color:#fff;font-weight:800}
  .lede{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--text-secondary)}

  /* ===== PAIN cards ===== */
  .pcards{display:grid;gap:16px;margin-top:30px}
  .pcard{position:relative;background:var(--mkg-ink-2);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px 22px;overflow:hidden}
  .pcard:nth-child(odd){transform:rotate(calc(-0.8deg * var(--tilt)))}
  .pcard:nth-child(even){transform:rotate(calc(0.8deg * var(--tilt)))}
  .pcard .num{position:absolute;top:14px;right:18px;font-size:46px;font-weight:900;color:rgba(255,255,255,0.06);line-height:1}
  .pcard .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;margin-bottom:16px}
  .pcard h3{margin:0 0 8px;font-size:18px;font-weight:800;letter-spacing:-0.01em}
  .pcard p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-secondary)}
  .pcard p strong{color:#fff;font-weight:700}
  .ic-y{background:var(--mkg-yellow);color:var(--mkg-purple-deep)}
  .ic-o{background:var(--mkg-orange-electric);color:#fff}
  .ic-p{background:var(--mkg-purple);color:#fff}

  /* ===== REASON TO BELIEVE ===== */
  .reasons{display:grid;gap:14px;margin-top:28px}
  .rcard{display:flex;gap:16px;align-items:flex-start;background:var(--mkg-ink);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:20px 18px}
  .rcard .rn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--mkg-grad-brand);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff}
  .rcard h4{margin:0 0 6px;font-size:15.5px;font-weight:800}
  .rcard p{margin:0;font-size:13px;line-height:1.55;color:var(--text-secondary)}
  .pull{margin:26px 0 0;text-align:center;font-size:19px;font-weight:900;line-height:1.4;letter-spacing:-0.01em}

  /* ===== PORTFOLIO ===== */
  .portfolio{background:var(--mkg-black)}
  .pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
  .vcard{position:relative;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:3/4;background:var(--mkg-ink-2);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md)}
  .vcard image-slot{width:100%;height:100%}
  .vcard .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 40%,rgba(10,10,10,0.72) 100%);pointer-events:none;z-index:2}
  .vcard .play{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}
  .vcard .play::after{content:"";display:block;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--mkg-purple-deep);margin-left:3px}
  .vcard .vmeta{position:absolute;z-index:4;left:12px;right:12px;bottom:11px;display:flex;align-items:center;justify-content:space-between;gap:8px}
  .vcard .vtag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff}
  .vcard .vroas{font-size:11px;font-weight:900;color:var(--mkg-yellow);background:rgba(10,10,10,0.55);padding:3px 7px;border-radius:6px}

  /* ===== SERVICE ===== */
  .service{background:var(--mkg-grad-purple)}
  .svc-list{display:grid;gap:14px;margin-top:28px}
  .svc{position:relative;background:rgba(255,255,255,0.08);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:20px 18px;backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass)}
  .svc .k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mkg-yellow)}
  .svc h4{margin:7px 0 6px;font-size:19px;font-weight:900;letter-spacing:-0.01em}
  .svc p{margin:0;font-size:13px;line-height:1.55;color:rgba(255,255,255,0.78)}

  /* ===== BENEFIT ===== */
  .benefits{display:grid;gap:12px;margin-top:28px}
  .bitem{display:flex;align-items:center;gap:14px;background:var(--mkg-ink);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px 18px}
  .bitem .ck{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--status-success);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:900}
  .bitem .bt{font-size:15px;font-weight:800}
  .bitem .bt .free{color:var(--mkg-yellow)}
  .tnc{margin:16px 0 0;font-size:11px;color:var(--text-muted);letter-spacing:.02em}

  /* ===== STEPS ===== */
  .steps{display:grid;gap:0;margin-top:30px;position:relative}
  .step{display:flex;gap:18px;align-items:flex-start;padding:0 0 26px;position:relative}
  .step:last-child{padding-bottom:0}
  .step .sn{flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:var(--mkg-grad-sunset);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#fff;box-shadow:var(--glow-orange);position:relative;z-index:2}
  .step:not(:last-child)::before{content:"";position:absolute;left:23px;top:46px;bottom:6px;width:2px;background:repeating-linear-gradient(180deg,var(--border-strong) 0 5px,transparent 5px 11px);z-index:1}
  .step .sbody{padding-top:9px}
  .step h4{margin:0 0 4px;font-size:16px;font-weight:800}
  .step p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted)}

  /* ===== CLOSING CTA ===== */
  .closing{background:var(--mkg-grad-sunset);padding:70px 0 76px;text-align:center}
  .closing .stack{margin-left:auto;margin-right:auto}
  .closing .stack .line{margin-left:auto;margin-right:auto}
  .closing p{margin:20px auto 0;max-width:30ch;font-size:16px;font-weight:600;color:#fff}
  .closing .ctas{margin-top:30px;display:grid;gap:12px}
  .closing .micro{margin-top:16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,0.8)}

  /* ===== FOOTER ===== */
  footer{background:var(--mkg-black);border-top:1px solid var(--border-subtle);padding:30px 22px;text-align:center}
  footer img{height:24px;margin:0 auto 12px}
  footer .meta{font-size:11px;color:var(--text-muted);letter-spacing:.02em;line-height:1.7}

  /* CTA helper for inline section CTAs */
  .sec-cta{margin-top:28px}
/* Mobile-only centered shell for standalone upload */
html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  display: block;
  margin: 0;
  overflow-x: hidden;
}

.phone {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.logo-text {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-family: Montserrat, Inter, Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
}

.sec.pad {
  padding-left: 22px;
  padding-right: 22px;
}

@media (max-width: 380px) {
  .sec.pad {
    padding-left: 18px;
    padding-right: 18px;
  }
}