/* Mobile first throughout: every base rule below is the phone layout.
   Media queries only ever ADD desktop behaviour on top. */
:root{
  --ink:#fff; --muted:#9fb3c8; --accent:#1893fa; --line:#16324a; --panel:#04121e;
  --display:Michroma,ui-sans-serif,system-ui,sans-serif;
  --pad:6vw;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#000;color:var(--ink);
     font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
     -webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
a{color:var(--accent)}

.skip{position:absolute;left:-9999px;top:0;z-index:5;background:#000;color:#fff;padding:12px 16px}
.skip:focus{left:0}

/* every content section shares one rhythm; generous on a phone, not cramped */
section{position:relative;z-index:1;padding:12vh var(--pad);max-width:1100px;margin:0 auto}
section h2{font:400 clamp(1.5rem,6vw,2.6rem)/1.25 var(--display);
           letter-spacing:.05em;margin:0 0 .7em}

/* --- site background ------------------------------------------------------
   #bg is fixed behind everything; page content rides above it on z-index 1.
   The poster image sits under the video so there is never a black flash while
   it buffers, and it is all that shows for reduced-motion visitors.
   The clip is a ping-pong render (forward then backward) so it loops without
   a jump - do not swap in a one-way video, it will visibly snap. */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;
    background:#000 url("assets/matrix-bg.jpg") center/cover no-repeat}
#bg video{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){#bg video{display:none}}

/* every page section sits above the background */
#hero,section,main,.topbar,.site-foot{position:relative;z-index:1}

/* the hero keeps its own black: the sequence letterboxes on phones and the
   background must not show through those bars */
#hero{background:#000;min-height:100vh;min-height:100svh;overflow:hidden;padding:0;max-width:none}
#seq{position:absolute;inset:0;width:100%;height:100%;display:block}

.overlay{position:relative;padding:12vh 6vw}
.beat{max-width:38ch;margin:0 auto 14vh;text-align:center}
.beat h1,.beat h2{
  font:400 clamp(1.5rem,5vw,3rem)/1.25 Michroma,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.06em;margin:0;
}

/* Animated state only: hero is pinned, beats are placed against the frame and
   GSAP cross-fades them. Without .js-anim (no GSAP, no frames, reduced motion)
   the page above stays a plain readable stack of text. */
/* svh, not vh: a pinned hero must not resize when a mobile URL bar hides */
body.js-anim #hero{height:100vh;height:100svh;min-height:0}
body.js-anim .overlay{position:absolute;inset:0;padding:0;pointer-events:none}

/* --fx/--fy/--fw/--fh are the letterboxed frame's rect in CSS px, published by
   draw() every paint. Beats sit on the artwork, not the viewport, so they stay
   put when the letterbox changes shape. Fallbacks cover the first paint. */
body.js-anim .beat{
  position:absolute;opacity:0;margin:0;max-width:none;
  left:var(--fx,0px);width:var(--fw,100%);
}
body.js-anim .beat h1,body.js-anim .beat h2{
  text-shadow:0 2px 20px #000,0 0 40px #000;
}

/* the empty band below the logo lockup — never over the mark itself */
body.js-anim .beat[data-pos="bottom"]{top:calc(var(--fy,0px) + var(--fh,100%) * .805)}
body.js-anim .beat[data-pos="bottom"] h1,body.js-anim .beat[data-pos="bottom"] h2{
  font-size:calc(var(--fw,100vw) * .062);
  padding:0 6%;
}

/* inside the phone display in the closing shot: dark type on the bright screen */
body.js-anim .beat[data-pos="screen"]{
  left:calc(var(--fx,0px) + var(--fw,100%) * .33);
  width:calc(var(--fw,100%) * .34);
  top:calc(var(--fy,0px) + var(--fh,100%) * .40);
}
body.js-anim .beat[data-pos="screen"] h2{
  font-size:calc(var(--fw,100vw) * .036);
  color:#00121f;text-shadow:none;
}

/* shared page shell for template pages */
.page{max-width:1100px;margin:0 auto;padding:calc(14vh + 60px) 6vw 14vh}
.page h1{font:400 clamp(1.75rem,7vw,3rem)/1.2 Michroma,ui-sans-serif,system-ui,sans-serif;
         letter-spacing:.06em;margin:0 0 .6em}

/* --- packages ------------------------------------------------------------ */
#packages{padding:14vh 6vw;max-width:1100px;margin:0 auto}

.packages-head{text-align:center;margin:0 auto 8vh;max-width:46ch}
.packages-head h2{
  font:400 clamp(1.75rem,7vw,3rem)/1.2 Michroma,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.06em;margin:0 0 .6em;
}
.packages-head p{margin:0;color:#9fb3c8}

/* mobile first: one column, widening only when there is room for it */
.pack-grid{display:grid;gap:20px}
@media (min-width:800px){.pack-grid{grid-template-columns:repeat(3,1fr);gap:24px}}

.pack{
  border:1px solid #16324a;border-radius:14px;padding:28px 24px;
  background:linear-gradient(180deg,#04121e,#000);
  display:flex;flex-direction:column;
}
.pack h3{
  font:400 1.6rem/1.2 Michroma,ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;
  margin:0 0 .5em;color:#1893fa;
}
.pack-line{margin:0 0 1.2em;color:#9fb3c8}
.pack ul{margin:0 0 1.5em;padding:0;list-style:none;flex:1}
.pack li{padding:.5em 0 .5em 1.4em;position:relative;border-top:1px solid #0d2233}
.pack li:first-child{border-top:0}
.pack li::before{content:"";position:absolute;left:0;top:1.05em;width:6px;height:6px;background:#1893fa}
.price{margin:0;font:400 1.1rem/1 Michroma,ui-sans-serif,system-ui,sans-serif;letter-spacing:.06em}


/* --- top bar -------------------------------------------------------------
   Sticky and deliberately tiny. Three links plus a Contact button is not
   enough to justify a hamburger, so on a phone the links stay visible and
   only shrink. */
/* fixed, not sticky: sticky reserves 59px of layout above the hero, which
   pushed a 100svh hero off the bottom of the screen. Over the hero is where
   this belongs anyway. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;gap:10px;
        padding:10px var(--pad);background:rgba(0,0,0,.72);
        backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
        border-bottom:1px solid rgba(255,255,255,.07)}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{display:block;width:120px;height:auto}
@media (min-width:768px){.brand img{width:150px}}
.topbar nav{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:.85rem}
.topbar nav a{color:#cfe0f0;text-decoration:none;white-space:nowrap}
.topbar nav a:hover,.topbar nav a[aria-current]{color:#fff}
.nav-cta{background:var(--accent);color:#001018 !important;border-radius:999px;
         padding:8px 14px;font-weight:600}
.lang{color:#7f96ad;text-decoration:none;font-size:.8rem;white-space:nowrap}

/* very narrow phones: drop the two anchor links, keep brand + Contact + lang */
@media (max-width:379px){
  .topbar nav a:not(.nav-cta){display:none}
}

/* --- chat: the primary action, first thing after the sequence ----------- */
#chat{text-align:center;padding-top:10vh}
#chat p{color:var(--muted);max-width:40ch;margin:0 auto 2em}
/* one button: full width on a phone, capped so it does not stretch across a
   desktop. A second channel goes back to two columns here. */
.chat-buttons{display:grid;gap:12px;max-width:420px;margin:0 auto}
.btn{display:block;padding:18px 20px;border-radius:12px;text-align:center;
     text-decoration:none;font-weight:600;font-size:1.05rem;color:#fff;
     min-height:56px}                     /* thumb-sized target */
.btn-messenger{background:linear-gradient(135deg,#0084ff,#a033ff)}

/* --- claim / bisaya band / problem -------------------------------------- */
#claim h2{max-width:22ch}
#claim p{color:var(--muted);max-width:46ch;font-size:1.1rem}

#bisaya{max-width:none;background:linear-gradient(180deg,#02101d,#000 70%);
        border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#bisaya h2,#bisaya p{max-width:1100px;margin-left:auto;margin-right:auto}
#bisaya h2{color:var(--accent);max-width:24ch}
#bisaya p{color:#cfe0f0;font-size:1.1rem}

.problem-list{list-style:none;margin:0;padding:0}
.problem-list li{padding:1.1em 0;border-top:1px solid var(--line);font-size:1.05rem}
.problem-list li:first-child{border-top:0}

/* --- proof --------------------------------------------------------------- */
.proof-grid{display:grid;gap:20px}
@media (min-width:800px){.proof-grid{grid-template-columns:repeat(3,1fr)}}
.proof-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;
            background:linear-gradient(180deg,var(--panel),#000);
            display:flex;flex-direction:column}
.shot{display:grid;place-items:center;aspect-ratio:16/10;background:#020b14;
      border-bottom:1px solid var(--line);text-decoration:none}
.shot img{width:100%;height:100%;object-fit:cover}
.shot-empty{color:#6b839b;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.proof-card h3{font:400 1.25rem/1.2 var(--display);letter-spacing:.05em;
               margin:20px 20px .4em;color:#fff}
.proof-line{margin:0 20px 1em;color:var(--muted)}
.proof-link{margin:0 20px 1.2em;display:inline-block;font-weight:600}

/* Testimonial slots. An empty one is visibly, unmistakably empty - it must
   never read as a real quote. Swap the div for the blockquote when a real
   line arrives; that is the whole change. */
.quote{margin:auto 20px 20px;padding:16px;border-left:3px solid var(--accent);
       background:rgba(24,147,250,.07)}
.quote p{margin:0 0 .5em;font-style:italic}
.quote cite{color:var(--muted);font-style:normal;font-size:.9rem}
/* Cards without a quote: the link is the last thing, so it carries the
   bottom spacing that the blockquote would otherwise provide. */
.proof-card .proof-link:last-child{margin-bottom:24px}

/* --- packages: price block ---------------------------------------------- */
.price{margin:0 0 1em;font:400 1.1rem/1.35 var(--display);letter-spacing:.04em;
       display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.price .amount{font-size:1.9rem;color:#fff}
.price .amount-monthly{font-size:1.5rem;color:var(--accent)}
.price-note{color:var(--muted);font-family:system-ui,sans-serif;font-size:.85rem;
            letter-spacing:0}
/* the monthly is the point of Corporate, so it gets its own line, never a
   trailing detail on the build fee */
.price .then{flex-basis:100%;color:var(--muted);font-family:system-ui,sans-serif;
             font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.35em}
.pack-corporate{border-color:#255d8a}
.pack-foot{margin:2.5em auto 0;max-width:52ch;text-align:center;color:var(--muted);
           font-size:.95rem}

/* --- contact form -------------------------------------------------------- */
#contact p{max-width:52ch}
#contact form{margin-top:2em;max-width:520px}
#contact label{display:block;margin-bottom:.4em;font-size:.9rem;color:#cfe0f0}
#contact input,#contact textarea{
  width:100%;padding:14px;font:inherit;color:#fff;background:#020b14;
  border:1px solid var(--line);border-radius:10px;min-height:52px}
#contact textarea{min-height:auto;resize:vertical}
#contact input:focus,#contact textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
#contact .opt{color:#6b839b}
#contact button{width:100%;padding:18px;border:0;border-radius:12px;
                background:var(--accent);color:#001018;font:600 1.05rem system-ui,sans-serif;
                min-height:56px}
.hp{position:absolute;left:-9999px}

/* --- faq page ------------------------------------------------------------ */
.lede{color:var(--muted);font-size:1.1rem;max-width:46ch}
.qa{padding:2em 0;border-top:1px solid var(--line);max-width:62ch;margin:0}
.qa h2{font:600 1.15rem/1.4 system-ui,sans-serif;letter-spacing:0;margin:0 0 .6em;color:#fff}
.qa p{margin:0 0 1em}
.faq-cta{margin-top:3em;padding-top:2em;border-top:1px solid var(--line);
         color:var(--muted);max-width:52ch}

/* --- footer -------------------------------------------------------------- */
.site-foot{padding:8vh var(--pad);text-align:center;border-top:1px solid var(--line)}
.site-foot p{margin:.5em 0}
.site-foot .small{color:#6b839b;font-size:.85rem}