/* ===== Align.tech — Mobile-first responsive styles ===== */

/* Brand tokens */
:root{
  --white:#ffffff;
  --near-black:#020202;
  --slate-navy:#1E293B;
  --deep-blue:#022863;
  --bright-cyan:#06B6D4;
  --teal:#43B6AC;

  --container: 1120px;

  /* Type scale using clamp(min, vw, max) */
  --h1: clamp(28px, 5vw, 44px);
  --h2: clamp(20px, 3.2vw, 32px);
  --body: clamp(16px, 2.4vw, 18px);
  --small: 14px;

  --radius: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}

/* Base */
body{
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',sans-serif;
  color:#0f172a;
  background:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Layout helpers */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 16px; /* tighter on mobile */
}
@media (min-width:768px){
  .container{ padding:0 24px; }
}

/* Top bar */
.topbar{
  border-bottom:1px solid #f1f5f9;
  background:var(--white);
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 12px;   /* slimmer header */
}
@media (min-width:768px){
  .topbar .container{ padding:8px 16px; }
}

.logo-top{
  height:14px;
  width:auto;
}
@media (min-width:768px){ .logo-top{ height:24px; } }
@media (min-width:1024px){ .logo-top{ height:28px; } }

.contact{
  font-weight:600;
  color:var(--deep-blue);   /* branded blue instead of gray */
  text-decoration:none;
  padding:6px 8px;
  transition:color 0.2s ease;
}
.contact:hover{
  color:var(--bright-cyan); /* cyan hover for interactive feel */
}

/* Hero */
.hero{
  color:#fff;
  background:var(--slate-navy);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:-20% -10% 0 -10%;
  background:
    radial-gradient(1000px 400px at 10% 10%, rgba(6,182,212,.3), transparent 60%),
    radial-gradient(800px 300px at 90% 20%, rgba(67,182,172,.25), transparent 60%);
  pointer-events:none;
}
.hero .container{
  position:relative;
  padding:56px 16px 64px;   /* more breathing room on mobile */
}
@media (min-width:768px){
  .hero .container{ padding:80px 24px 92px; }  /* balanced on laptop/desktop */
}

/* Hero logo — left-aligned with text, adjusted spacing */
.logo-hero{
  display:block;
  height:100px;
  width:auto;
  margin:8px 0 24px 0;    /* less top, more bottom */
  object-fit:contain;
  object-position:left;
}
@media (min-width:480px){  
  .logo-hero{ height:140px; margin:10px 0 28px 0; } 
}
@media (min-width:768px){  
  .logo-hero{ height:180px; margin:12px 0 34px 0; } 
}
@media (min-width:1200px){ 
  .logo-hero{ height:220px; margin:14px 0 40px 0; } 
}

.hero h1{
  font-size:var(--h1);
  line-height:1.15;
  margin:0 0 10px;
  font-weight:600;
}
.hero p{
  font-size:var(--body);
  line-height:1.65;
  max-width:780px;
  margin:8px 0 0;
  color:#e2e8f0;
}

/* CTAs */
.cta{
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  min-height:44px; /* touch target */
}
.btn.primary{ background:var(--bright-cyan); color:var(--deep-blue); }
.btn.ghost{ border:1px solid rgba(255,255,255,.35); color:#fff; }

/* Cards */
.cards{ padding:40px 0; background:var(--white); }
@media (min-width:768px){ .cards{ padding:64px 0; } }

.grid{
  display:grid;
  grid-template-columns:1fr; /* mobile-first */
  gap:16px;
}
@media (min-width:768px){ .grid{ grid-template-columns:repeat(3,1fr); gap:20px; } }

.card{
  border:1px solid #e2e8f0;
  border-radius:var(--radius);
  padding:18px;
  background:#fff;
  box-shadow:var(--shadow);
}
.card h2{
  color:var(--deep-blue);
  font-size:clamp(18px, 2.6vw, 20px);
  margin:0 0 8px;
  font-weight:600;
}
.card p{ color:#475569; margin:0; font-size:var(--body); }

/* Footer */
.footer{
  border-top:1px solid #f1f5f9;
  background:#fff;
}
.footer .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  gap:12px;
  flex-wrap:wrap; /* prevents overflow on small screens */
}
@media (min-width:768px){ .footer .container{ padding:20px 24px; } }

.footer .brand{
  display:flex; align-items:center; gap:8px; color:#64748b;
}
.footer .icon{ height:28px; width:28px; }

/* Utilities */
.hide-mobile{ display:none; }
@media (min-width:768px){ .hide-mobile{ display:initial; } }

/* ===== Buttons: hover/focus/active states ===== */
.btn{
  transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  will-change: transform;
}
.btn:focus-visible{
  outline: 2px solid var(--bright-cyan);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(6,182,212,.25);
}

/* Primary (cyan) */
.btn.primary:hover{ 
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(6,182,212,.25);
  filter: brightness(1.05);
}
.btn.primary:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(6,182,212,.18);
  filter: brightness(0.98);
}

/* Ghost (white outline on navy) */
.btn.ghost{
  border:1px solid rgba(255,255,255,.35);
  background: transparent;
}
.btn.ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  background: rgba(255,255,255,.06);
}
.btn.ghost:active{
  transform: translateY(0);
  background: rgba(255,255,255,.09);
}

/* Header contact link polish */
.contact{
  transition: color .18s ease, text-decoration-color .18s ease;
  text-underline-offset: 2px;
  text-decoration-thickness: .08em;
  text-decoration-color: transparent;
}
.contact:hover{
  color: var(--bright-cyan);
  text-decoration: underline;
  text-decoration-color: var(--bright-cyan);
}
.contact:focus-visible{ outline: 2px solid var(--bright-cyan); outline-offset: 2px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
  .btn:hover, .btn:active{ transform: none; }
}