@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/effects.css";

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-display);color:var(--ink-700);background:#fff;-webkit-font-smoothing:antialiased}
a{color:var(--brand-cyan);text-decoration:none} a:hover{color:var(--brand-cyan-600)}
.wrap{max-width:1200px;margin:0 auto;padding:0 48px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-cyan)}
h1,h2,h3{color:var(--ink-900);margin:0;letter-spacing:-1px;text-wrap:balance}
.btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 26px;border-radius:999px;border:none;font-family:var(--font-display);font-weight:600;font-size:17px;cursor:pointer;text-decoration:none;transition:transform .1s ease,opacity .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--brand-cyan);color:#fff;box-shadow:0 8px 20px rgba(0,189,210,.32)}
.btn-ghost{background:var(--cyan-100);color:var(--brand-cyan)}
.btn-dark{background:var(--ink-900);color:#fff}
@media (max-width:820px){
  html,body{overflow-x:hidden}
  .wrap{padding:0 20px!important}
  .desk-nav{display:none!important}
  .hero-grid{grid-template-columns:1fr!important;padding:32px 20px 48px!important;gap:10px!important}
  .rh1{font-size:40px!important;line-height:1.06!important}
  .rh2{font-size:30px!important}
  .hero-btns,.cta-btns{flex-wrap:wrap!important}
  .stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:24px 12px!important;padding:28px 20px!important}
  .grid-3{grid-template-columns:1fr!important}
  .chat-grid{grid-template-columns:1fr!important;gap:36px!important}
  .gallery-grid{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:150px!important}
  .about-grid{grid-template-columns:1fr!important;gap:36px!important}
  .about-cards{grid-template-columns:1fr 1fr!important}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:28px 20px!important}
  .sec{padding:56px 0!important}
  .footer-bottom{padding-top:36px!important}
  .phone-wrap{transform:scale(.92);transform-origin:center top}
  .legal-head{padding:40px 20px 44px!important}
}
@media (max-width:480px){
  .rh1{font-size:32px!important}
  .footer-grid{grid-template-columns:1fr!important}
}