/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ============================================================
   LANDING PAGE CONTAINER
   ============================================================ */
.landing-page {
    position: relative;
    width: 100vw;
    height: 100vh;    /* fallback */
    height: 100dvh;  /* dynamic: shrinks when browser chrome is visible */
    overflow: hidden;
}

/* ============================================================
   LAYER 1 — BACKGROUND
   background.png is 1000×1000 (square); cover fills the frame
   ============================================================ */
.background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 1;
}

/* ============================================================
   LAYER 2 — BORDER
   object-fit: fill stretches the transparent-interior border
   image so its golden lines land at the correct inset positions
   ============================================================ */
.border-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102.5%;
    height: 102.5%;
    object-fit: fill;
    z-index: 2;
}

/* Desktop / tablet: show borderWeb; hide borderPhone */
.border-desktop { display: block; }
.border-mobile  { display: none; }

/* ============================================================
   LAYER 3 — CONTENT (logo + text)
   ============================================================ */
.content {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* ============================================================
   LOGO IMAGE
   Desktop reference frame: 1920 × 1080
   Measured from sample.png:
     center-x = 960  (50% of 1920)
     img top  = 178px (16.48% of 1080)
     img-width = 626px (32.6% of 1920)
   logo.png is 3000×3000 — height is auto (maintains square ratio)
   ============================================================ */
.logo-image {
    position: absolute;
    /* min() stops the square logo growing too tall on ultrawide screens.
       57vh caps it at ~615px on a 1080px-tall display (2560×1080 safe). */
    width: min(30%, 57vh);
    left: 50%;
    transform: translateX(-50%);
    top: 16.48%;
}

/* ============================================================
   TEXT IMAGE
   Desktop reference frame: 1920 × 1080
   Measured from sample.png:
     center-x = 960  (50% of 1920)
     img top  = 867px (80.28% of 1080)
     img-width = 594px (30.94% of 1920)
   text.png is 3000×450 — height is auto (maintains 6.67:1 ratio)
   ============================================================ */
.text-image {
    position: absolute;
    /* min() stops text from overlapping logo on ultrawide screens */
    width: min(28%, 50vh);
    left: 50%;
    transform: translateX(-50%);
    top: 80.28%;
}

/* ============================================================
   TABLET — iPad Pro 11" (1194×834) & 12.9" (1366×1024) landscape
   top: 7% → character appears at ~15.6% matching desktop rhythm.
   Logo content ends at ~63% → text at 80% gives a safe gap.
   Range extended to 1400px to cover iPad Pro 12.9" landscape.

   max-aspect-ratio: 29/20 (1.45) keeps this rule scoped to actual
   tablet screens (iPad 11"/12.9" ≈ 1.33–1.44, Surface-style 3:2 ≈ 1.5).
   Common 16:9 / 16:10 laptops (1366×768, 1280×720, 1440×900 …) share
   these exact widths but are much shorter, so without this ceiling
   they matched this rule too and the fixed-width square logo grew
   tall enough to collide with the text below it. Excluded screens
   fall through to the default rule, which is safe at any aspect
   ratio because its width is vh-capped.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1400px) and (orientation: landscape) and (max-aspect-ratio: 29/20) {
    .logo-image {
        width: 46%;
        left: 50%;
        transform: translateX(-50%);
        top: 7%;
    }

    .text-image {
        width: 44%;
        left: 50%;
        transform: translateX(-50%);
        top: 80%;
    }
}

/* ============================================================
   TABLET — portrait orientation (e.g. 768 × 1024)
   Logo content ends at ~51% → text at 72% gives atmospheric gap
   ============================================================ */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
    .logo-image {
        width: 68%;
        left: 50%;
        transform: translateX(-50%);
        top: 6%;
    }

    .text-image {
        width: 63%;
        left: 50%;
        transform: translateX(-50%);
        top: 72%;
    }
}

/* ============================================================
   MOBILE — iPhone 16 / 17 Pro Max portrait  (430 × 932)
   top: 16.48% mirrors the desktop vertical rhythm so the
   visible character starts at ~21% — not pinned to the top.
   Logo content ends at ~48% → text at 74% gives a healthy gap,
   and text now ends comfortably above the bottom border.

   orientation: portrait scopes this to tall narrow phones. Without
   it, a phone rotated to landscape (e.g. 667×375) still matches
   max-width: 767px, but these percentages assume a tall viewport —
   applied to a short landscape one, the logo and text overflowed
   past the bottom edge and into each other. Landscape phones now
   fall through to the default (vh-capped) rule and the desktop
   border, both of which stay safe at wide/short aspect ratios.
   ============================================================ */
@media (max-width: 767px) and (orientation: portrait) {
    /* Switch to phone border, hide web border */
    .border-desktop { display: none; }
    .border-mobile  { display: block; }

    .logo-image {
        width: 83%;
        left: 50%;
        transform: translateX(-50%);
        top: 16.48%;
    }

    .text-image {
        width: 78%;
        left: 50%;
        transform: translateX(-50%);
        top: 74%;  /* pulled up from 79% to clear bottom border on real devices */
    }
}