/* Bella Mobile — brand landing page */
:root{
  --cerulean:#0E9BD6; --cerulean-deep:#068CC6; --navy:#000E19;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:"Host Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--navy);color:#fff;-webkit-font-smoothing:antialiased;line-height:1.6;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

.landing{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;}
.landing .glow{position:absolute;top:-220px;right:-160px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle, rgba(14,155,214,.42) 0%, rgba(14,155,214,.12) 42%, transparent 70%);pointer-events:none;z-index:0;}
.landing .dots{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);background-size:30px 30px;
  -webkit-mask-image:linear-gradient(to bottom right,#000,transparent 75%);mask-image:linear-gradient(to bottom right,#000,transparent 75%);}
.landing .ghost{position:absolute;right:-80px;bottom:-140px;height:120%;width:auto;z-index:0;opacity:.05;pointer-events:none;}
.landing .rule{position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--cerulean),var(--cerulean-deep));z-index:2;}

.inner{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:clamp(56px,9vw,96px) 32px;width:100%;}
.inner .logo{width:230px;max-width:60vw;margin-bottom:34px;}
.kicker{display:inline-flex;align-items:center;gap:11px;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cerulean);font-weight:600;}
.kicker::before{content:"";width:30px;height:1.5px;background:var(--cerulean);}
h1{font-size:clamp(3rem,9vw,6rem);font-weight:700;letter-spacing:-.04em;margin:.2em 0 0;}
.tag{color:rgba(255,255,255,.6);font-size:clamp(1.05rem,1.9vw,1.3rem);margin:.4em 0 0;max-width:42ch;}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:48px 0 44px;}
@media(max-width:640px){.cards{grid-template-columns:1fr;}}
.card{position:relative;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:28px;
  display:flex;flex-direction:column;transition:border-color .18s, transform .18s, background .18s;background:rgba(255,255,255,.015);}
.card:hover{border-color:var(--cerulean);transform:translateY(-3px);background:rgba(14,155,214,.06);}
.card .num{font-size:.72rem;font-weight:600;letter-spacing:.18em;color:var(--cerulean);}
.card .t{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;margin:14px 0 8px;}
.card .d{color:rgba(255,255,255,.55);font-size:.92rem;line-height:1.55;}
.card .go{margin-top:22px;font-size:.86rem;font-weight:500;color:var(--cerulean);}

.meta{display:flex;gap:0;flex-wrap:wrap;color:rgba(255,255,255,.4);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;align-items:center;}
.meta span{padding:0 18px;border-left:1px solid rgba(255,255,255,.14);}
.meta span:first-child{padding-left:0;border-left:none;}