/* ===== Tomodachi Landing Overrides ===== */

/* HERO */
.hero{
  color:#fff;
  padding:120px 0 80px;
  position:relative;
  overflow:hidden;
  isolation:isolate;              /* keeps the ::after light-sweep inside this hero */
  /* Dark neon look. The design is a near-black CORE with saturated colour pushed
     out to the edges -- blue hugging the left edge top-to-bottom, violet/magenta
     hugging the right, and a broad light band along the bottom. The blooms are
     sized in % (not px) so they track the hero height instead of drifting when
     the copy reflows. Listed top-most layer first. */
  background:
    /* right edge: violet -> magenta, tall enough to reach the vertical middle */
    radial-gradient(58% 78% at 100% 50%, rgba(217,70,239,.72), transparent 66%),
    radial-gradient(46% 52% at 92% 84%,  rgba(236,72,153,.60), transparent 64%),
    radial-gradient(40% 44% at 96% 8%,   rgba(147,51,234,.42), transparent 66%),
    /* left edge: blue from the top corner all the way down */
    radial-gradient(52% 84% at 0% 34%,   rgba(37,99,235,.70),  transparent 66%),
    radial-gradient(42% 48% at 2% 88%,   rgba(56,189,248,.36), transparent 64%),
    /* bottom: the wide glow band running edge to edge under the phone */
    radial-gradient(120% 34% at 50% 104%, rgba(139,92,246,.55), transparent 70%),
    linear-gradient(180deg,#080c24 0%, #06060f 46%, #0a0718 100%);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
/* The glowing arc that sweeps across the bottom of the hero. It is a very wide
   ellipse hanging off the bottom edge; the radial-gradient only paints its rim,
   so what shows above the fold is a single curved band of light.
   z-index:-1 => paints over the hero background but under the hero copy. */
.hero::after{
  content:"";
  position:absolute; z-index:-1; pointer-events:none;
  left:-18%; right:-18%; bottom:-38%; height:78%;
  border-radius:50%;
  /* the stops are packed into the last ~16% on purpose -- spread any wider and
     the rim stops reading as a light streak and turns into a flat haze */
  background:radial-gradient(closest-side,
    transparent 84%,
    rgba(125,211,252,.55) 90%,
    rgba(192,132,252,.62) 95%,
    rgba(244,114,182,.50) 98.5%,
    transparent 100%);
  filter:blur(7px);
}
.hero .brand-lockup{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hero .brand-lockup img{height:24px;width:auto}

/* "Social Community App" chip above the headline */
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 0 24px;padding:9px 17px;border-radius:999px;
  font-size:11px;font-weight:800;line-height:1;
  letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(125,180,255,.32);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 0 24px rgba(59,130,246,.18);
}
.hero-eyebrow i{font-size:13px;color:#38bdf8}

.hero h1{
  font-weight:900; letter-spacing:-.5px; line-height:1.02;
  font-size:clamp(38px,6.4vw,72px); margin:0 0 22px;
  text-shadow:0 6px 34px rgba(0,0,0,.45);
}
/* third line ("Experience.") — cyan -> blue gradient fill.
   text-shadow must be off here or it bleeds through the transparent glyphs. */
.hero h1 .hero-accent{
  background:linear-gradient(96deg,#22d3ee 0%,#3b82f6 52%,#60a5fa 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}

.hero .lead{
  position:relative;
  font-size:clamp(15px,1.6vw,17px);line-height:1.65;
  max-width:560px;margin:0;padding-left:20px;
  color:rgba(255,255,255,.78);opacity:1;
}
/* the gradient rule running down the left edge of the paragraph */
.hero .lead::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#22d3ee,#3b82f6 55%,#a855f7);
}

.hero .badges{display:flex;gap:16px;align-items:center;margin-top:30px;flex-wrap:wrap}
.hero .badges img{height:46px;width:auto}
.hero .pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:999px;font-weight:700;font-size:14px;line-height:1;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(190,150,255,.35);
  color:#fff;backdrop-filter:blur(8px);
  box-shadow:0 8px 26px rgba(124,58,237,.22);
}
.hero .pill i{font-size:14px;color:#c084fc}

/* App showcase (single poster image) */
.hero-showcase{
  position:relative;display:flex;justify-content:flex-end;align-items:center;
  /* Bleed past the container's right gutter at every desktop width, not just on
     >=1400px screens. A col-lg-6 is only ~430px wide on a 1100px monitor, and the
     design wants the poster roughly the full height of the hero beside it. */
  margin-right:calc(-1 * clamp(24px, 8vw, 130px));
}
/* screendisplay.png has a real alpha channel (knocked out from the original JPG), so
   it sits straight on the hero gradient -- no blend mode, full original colours. */
/* max-width is the only size knob now. The forced aspect-ratio:700/700 that used
   to squash the poster into a square is gone -- the phone/badge composite is
   pre-rendered at 1333/1180 and has to keep that ratio to match the design. */
.hero-showcase img{
  display:block;width:100%;
  /* fluid instead of a hard 700px: on a wide monitor the column grows but the
     poster used to stop dead, leaving a band of empty gradient beside it. */
  max-width:clamp(460px, 52vw, 900px);
  height:auto;
  /* deeper shadow than before -- the hero is dark now, a light drop-shadow read
     as nothing at all against it. */
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.55));
}

/* Navbar readable over hero */
#mainNav{background:transparent;border-bottom:0}
#mainNav .nav-link{color:rgba(255,255,255,.95)}
#mainNav .nav-link:hover{color:#fff}
.navbar-light .navbar-toggler{border-color:rgba(255,255,255,.35)}
.navbar-light .navbar-toggler-icon{filter:invert(1)}

/* FEATURES */
.features{padding:72px 0;background:#fff}
.features h2{font-weight:900;margin-bottom:22px}
.feature-card{
  background:#fff;border:1px solid #eef0f3;border-radius:20px;padding:24px;height:100%;
  box-shadow:0 8px 24px rgba(0,0,0,.06)
}
.feature-card .icon{
  width:56px;height:56px;display:inline-grid;place-items:center;border-radius:14px;margin-bottom:12px;font-size:22px
}
.icon-blue{background:#eef5ff;color:#2563eb}
.icon-teal{background:#e9fbf6;color:#059669}
.icon-amber{background:#fff7e6;color:#f59e0b}
.icon-pink{background:#ffeaf3;color:#ec4899}
.feature-card h3{font-size:18px;font-weight:800;margin:0 0 6px}
.feature-card p{color:#6b7280;margin:0}

/* LIVE & PARTNER TILES */
.split-tiles{padding:56px 0 90px;background:#fff}
.split-tiles .tile{
  border-radius:24px;padding:28px;height:100%;
  background:linear-gradient(180deg,#eff6ff,#ffffff)
}
.split-tiles .tile.pink{background:linear-gradient(180deg,#ffeaf7,#ffffff)}
.split-tiles .tile h3{font-weight:900;margin-bottom:8px}
.split-tiles .tile p{color:#6b7280;margin-bottom:14px}

/* CONTACT cards tweak on dark background */
/* .contact-section .card{border:0;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.12)} */
/* Compact contact cards (Address / Email / Phone) */
.contact-section .card { 
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.contact-section.bg-black{background:#0b0d12 !important}

/* ===== Contact Us tiles (section: .contact-cards) — make compact ===== */
.contact-cards h2{
  font-size: clamp(20px, 3vw, 28px);
  margin-bottom: 1rem;
}

.contact-cards .card{
  border: 0;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Tighten vertical space */
.contact-cards .card.py-2{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.contact-cards .card .card-body{
  padding: 12px !important;   /* was larger */
}

/* Smaller icon */
.contact-cards .card i{
  font-size: 18px;
  margin-bottom: .25rem !important;
}

/* Smaller “ADDRESS / EMAIL / PHONE” headings */
.contact-cards .card-body > h4.text-uppercase.m-0{
  font-size: .85rem !important;
  line-height: 1.1;
  letter-spacing: .06em;
  margin-bottom: .35rem !important;
}

/* Thinner, shorter divider */
.contact-cards .card hr{
  width: 56%;
  margin: .5rem auto !important;
  opacity: .25;
}

/* Smaller body text */
.contact-cards .card .small{
  font-size: .90rem;
  line-height: 1.35;
}

/* Even tighter on mobile */
@media (max-width: 576px){
  .contact-cards .card-body > h4.text-uppercase.m-0{ font-size: .80rem !important; }
  .contact-cards .card i{ font-size: 16px; }
  .contact-cards .card .small{ font-size: .86rem; }
}

/* space below the 3 cards (before the social icons) */
.contact-cards .row.gx-4.gx-lg-5{
  margin-bottom: 28px;
}

/* more space under the blue icons inside each card */
.contact-cards .card i{
  margin-bottom: .6rem !important;   /* was .25rem */
}

/* spacing for the social buttons row */
.contact-cards .social{
  margin-top: 65px !important;       /* override inline 10px */
  margin-bottom: 40px;               /* space below the icons */
  gap: 12px;                          /* optional spacing between buttons */
}

/* a little breathing room under the whole Contact section */
.contact-cards{
  padding-bottom: 32px;
}



/* even smaller on mobile */
@media (max-width: 576px){
  .contact-section .card-body > h4.text-uppercase.m-0 {
    font-size: 0.75rem !important;
  }
}

/* === Make TOP row (contact-section) same compact size as bottom (contact-cards) === */

/* tighten padding like the bottom row */
.contact-section .card.py-2 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.contact-section .card .card-body {
  padding: 14px 14px !important;
}

/* smaller icons */
.contact-section .card i {
  font-size: 18px;
  margin-bottom: .2rem !important;
}

/* smaller "ADDRESS / EMAIL / PHONE" headings */
.contact-section .card-body > h4.text-uppercase.m-0 {
  font-size: .85rem !important;
  line-height: 1.1;
  letter-spacing: .06em;
  margin-bottom: .25rem !important;
}

/* thinner divider */
.contact-section .card hr {
  width: 60%;
  margin: .4rem auto !important;
  opacity: .25;
}

/* body text size */
.contact-section .card .small {
  font-size: .9rem;
  line-height: 1.35;
}

/* match the card look (optional, same as bottom row) */
.contact-section .card {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* mobile tweaks to stay compact */
@media (max-width: 576px){
  .contact-section .card-body > h4.text-uppercase.m-0 { font-size: .8rem !important; }
  .contact-section .card i { font-size: 16px; }
  .contact-section .card .small { font-size: .86rem; }
}



/* Responsive */
/* Big monitors: Bootstrap's .container stops at 1320px, so on a 1920 screen the
   hero row sat in the middle with ~300px of dead gradient down each side. The
   hero (and the navbar above it, so the brand still lines up with the copy) gets
   a wider cap -- deliberately still capped, not full-bleed, so the layout keeps a
   healthy margin at the edges. The sections below keep the standard width. */
@media (min-width:1400px){
  .hero .container,
  #mainNav .container{max-width:min(1500px, 94vw)}
  /* copy grows a little with the wider column so the left half isn't sparse.
     NOTE: no font-size override here any more -- it used to re-declare
     clamp(48px,3.9vw,72px), which lands on ~56px at 1440 and so *shrank* the
     headline below the 72px the base rule already gives at this width. */
  .hero .lead{max-width:620px}
}
@media (max-width:991.98px){
  /* columns stack full-width here, so the bleed would just hang off-screen */
  .hero-showcase{margin-right:0;justify-content:center}
  .hero-showcase img{max-width:540px}
}
@media (max-width:767.98px){
  .hero{padding-top:100px}
  .hero-showcase{margin-top:28px}
  .hero-showcase img{max-width:420px}
  .hero .lead,.hero h1{text-align:center}
  .hero .badges{justify-content:center}
  /* stacked + centred here, so the left accent rule has nothing to sit against */
  .hero .lead{padding-left:0;margin-inline:auto}
  .hero .lead::before{display:none}
  .hero-eyebrow{display:inline-flex}
  .hero .col-lg-6:first-child{text-align:center}
}

/* Make App Store & Google Play badges uniform */
.store-badge {
  height: 46px;        /* Same height as your App Store badge */
  width: auto;         /* Keep aspect ratio */
  display: inline-block;
}

.badges {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
/* footer {
  background: radial-gradient(1200px 600px at 85% 35%, rgba(255, 255, 255, .13), transparent 60%),
              linear-gradient(135deg, #1e63ff 0%, #6a5cff 55%, #ff4db3 100%) !important;
  color: #fff;
  padding: 20px;
} */

/* Slideshow (stays inside the column) */
.slideshow{
  max-width: 600px;
  border-radius: 16px;
  overflow: hidden;
  background: #eef6ff;
}

/* Only child of .ratio fills the frame */
.slideshow .slides-viewport{
  position: absolute; inset: 0;
}

/* Track + slides */
.slideshow .slides-track{
  height: 100%;
  display: flex;
  transition: transform .5s ease;
}
.slideshow .slide{ flex: 0 0 100%; height: 100%; }
.slideshow img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Arrows */
.slide-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.35); color:#fff; font-size: 26px; line-height: 1;
  display: grid; place-items: center; cursor: pointer; z-index: 2;
}
.slide-nav:hover{ background: rgba(0,0,0,.6); }
.slide-nav.prev{ left: 10px; }
.slide-nav.next{ right: 10px; }




/* Arrow base */
.slide-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.35); color:#fff; font-size: 26px;
  display: grid; place-items: center; cursor: pointer; z-index: 3;
}

/* Make sure each side is explicit and not inherited */
.slide-prev{ left: 10px;  right: auto; }
.slide-next{ right: 10px; left:  auto; }

.slide-arrow:hover{ background: rgba(0,0,0,.6); }

/* (optional) smaller on mobile */
@media (max-width: 576px){
  .slide-arrow{ width: 36px; height: 36px; font-size: 22px; }
}

/* make sure viewport is a stacking context below arrows */
.slideshow .slides-viewport { position:absolute; inset:0; z-index:0; }
/* keep arrows on top & clickable */
.slide-nav { z-index:5; pointer-events:auto; }


/* footer bg */
/* Reuse the hero gradient on the contact section -- kept in step with the dark
   hero above, otherwise the footer stayed on the old bright blue/pink ramp. */
.contact-section.bg-black{
  background:
    radial-gradient(900px 520px at 92% 30%, rgba(192,38,211,.42), transparent 62%),
    radial-gradient(820px 520px at 4% 70%,  rgba(29,78,216,.48),  transparent 62%),
    linear-gradient(118deg,#08123c 0%, #060a1e 42%, #1a0733 68%, #3a0c46 100%) !important; /* override .bg-black */
  color:#fff;
}


/* function for fitting the photo in the modal */
#imageModal .modal-body img{
  width: 100%;
  max-height: 72vh;   /* leave space for caption */
  object-fit: contain; /* no cropping */
}
#imageModal .modal-content{ background:#1a1d20; }
#imageModal .modal-body img { max-height:72vh; object-fit:contain; }



/* Modal menu styles */
#modalMenu { color:#111; }
#modalMenu h5 { margin: 0 0 8px; font-weight: 800; }
#modalMenu .menu-list { display: grid; gap: 10px; }
#modalMenu .menu-item {
  background: #ffffff; border-radius: 12px; padding: 12px;
  border: 1px solid rgba(0,0,0,.08);
}
#modalMenu .menu-line {
  display:flex; justify-content:space-between; align-items:center; gap: 12px;
}
#modalMenu .menu-title { font-weight: 700; }
#modalMenu .menu-price { font-weight: 800; white-space:nowrap; }
#modalMenu .menu-desc { color:#555; margin-top: 4px; font-size: .95rem; }
#modalMenu .menu-thumb {
  width: 100%; max-height: 180px; object-fit: cover; margin-top: 8px; border-radius: 10px;
}




/* style for menu in mobile view so that the menu dropdown doesnt go to the left */
/* Keep collapsed nav on the right in mobile */
@media (max-width: 991.98px){
  #mainNav .navbar-collapse{
    position: absolute;
    top: 100%;
    right: 1rem;
    left: auto;
    flex-basis: auto;   /* stop full-width growth */
    background: rgba(11,13,18,.92);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    padding: .5rem 1rem;
    backdrop-filter: blur(6px);
  }
  #mainNav .navbar-nav{
    align-items: flex-end;   /* right align the vertical stack */
    text-align: right;
  }
  #mainNav .navbar-nav .nav-link{
    padding-left: 0;         /* tidy spacing */
  }
  /* make sure the dropdown opens to the right edge */
  #mainNav .dropdown-menu{ right: 0; left: auto; }
}

/* Smooth hide/show for the fixed navbar */
#mainNav{
  transition: transform .28s ease-in-out, background-color .2s ease;
  will-change: transform;
}
#mainNav.nav-hide{
  transform: translateY(-110%);
}

/* (optional) make the navbar slightly solid once you start scrolling */
#mainNav.nav-solid{
  background: rgba(11,13,18,.68);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.navbar-light .navbar-toggler { border-color: rgba(255,255,255,.35); }
.navbar-light .navbar-toggler-icon { filter: invert(1); } /* only if using the default icon */






/* (the oversized tomonewlogo that used to sit under the store badges is gone --
   the design has no logo in the hero, and at 320-750px tall it was what pushed
   the phone poster down and stretched the hero to ~850px) */