/* =========================================================
   Tropical Technologies — stylesheet
   Palette: signal-navy blue + strong red accent + white, matched
   to the company logo (blue / red / white)
   Type: Space Grotesk (display) / Inter (body)
   ========================================================= */

:root{
  --navy-950:#051129;
  --navy-900:#0a1e42;
  --navy-800:#0f2c5c;
  --navy-700:#164a91;
  --paper:#f7f9fc;
  --paper-dim:#eef2f8;
  --ink:#0d1a24;
  --ink-soft:#4a5c68;
  --red:#e4262b;
  --red-dark:#bf1c21;
  --sky:#ffffff;
  --sky-tint:#eaf2ff;
  --line:#e2e8f0;
  --radius:14px;
  --shadow-lg:0 24px 48px -20px rgba(8,20,32,0.35);
  --shadow-sm:0 6px 16px -8px rgba(8,20,32,0.18);
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--navy-950); letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--red); color:#fff;
  padding:10px 18px; z-index:999; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }

/* ---------- Topbar ---------- */
.topbar{ background:var(--navy-950); color:#cfe0e6; font-size:0.82rem; }
.topbar-content{
  display:flex; align-items:center; gap:24px; padding:8px 24px; flex-wrap:wrap;
}
.topbar-content span{ display:flex; align-items:center; gap:6px; }
.socials{ margin-left:auto; display:flex; gap:10px; }
.socials a{
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center; font-size:0.75rem;
  transition:background .2s, border-color .2s;
}
.socials a:hover{ background:var(--red); border-color:var(--red); }

/* ---------- Ticker (running text) ---------- */
.ticker{
  background:var(--red); color:#fff; overflow:hidden; white-space:nowrap;
  border-top:1px solid rgba(255,255,255,0.15); border-bottom:1px solid rgba(255,255,255,0.15);
}
.ticker-track{
  display:inline-flex; align-items:center; gap:0; white-space:nowrap;
  animation:ticker-scroll 22s linear infinite;
  will-change:transform;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track span{
  display:inline-block; padding:9px 32px; font-size:0.82rem; font-weight:700;
  letter-spacing:0.06em; white-space:nowrap;
}
.ticker-track span::after{ content:'•'; margin-left:32px; opacity:0.7; }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Header / Nav ---------- */
.header{ background:var(--navy-950); position:relative; z-index:20; }
.nav{ display:flex; align-items:center; gap:32px; padding:16px 24px; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo img{ height:44px; width:auto; }
.logo-text{ font-family:var(--font-display); font-weight:700; font-size:0.92rem; color:#fff; letter-spacing:-0.01em; line-height:1.25; }
.logo-text em{ color:var(--red); font-style:normal; }
.menu-toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,0.3); color:#fff;
  font-size:1.2rem; padding:6px 10px; border-radius:8px;
}
nav{ display:flex; gap:28px; margin-left:12px; }
nav a{ color:#cfe0e6; font-size:0.95rem; font-weight:500; padding:6px 0; border-bottom:2px solid transparent; }
nav a:hover, nav a.active{ color:#fff; border-color:var(--red); }
.quote-nav{ margin-left:auto; white-space:nowrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px;
  font-weight:600; font-size:0.95rem; border:1px solid transparent; transition:transform .15s, box-shadow .15s, background .15s;
}
.btn b{ font-weight:600; }
.btn-red{ background:var(--red); color:#fff; box-shadow:var(--shadow-sm); }
.btn-red:hover{ background:var(--red-dark); transform:translateY(-2px); }
.btn-outline{ border-color:rgba(255,255,255,0.4); color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,0.08); }
.btn-blue{ background:var(--navy-800); color:#fff; }
.btn-blue:hover{ background:var(--navy-700); }

/* ---------- Hero ---------- */
.hero{ position:relative; background:radial-gradient(circle at 15% 20%, var(--navy-800), var(--navy-950) 60%); overflow:hidden; padding-bottom:40px; }
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at 30% 20%, black 0%, transparent 70%);
}
.hero-content{ position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; padding:64px 24px 24px; }
.eyebrow{ display:inline-block; font-family:var(--font-display); font-size:0.78rem; letter-spacing:0.12em; font-weight:600; color:var(--sky); margin-bottom:14px; }
.eyebrow.red{ color:var(--red-dark); }
.hero-copy h1{ color:#fff; font-size:clamp(2rem, 4vw, 3rem); line-height:1.12; margin-bottom:18px; }
.hero-copy h1 span{ color:var(--red); }
.lead{ color:#c7d6dc; font-size:1.05rem; max-width:520px; margin-bottom:26px; }
.hero-features{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }
.hero-features span{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#e8f0f2;
  font-size:0.82rem; padding:10px 14px; border-radius:10px; line-height:1.3;
}
.actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* Hero visual: dashboard + phone mockup */
.hero-visual{ position:relative; height:420px; }
.laptop{ position:absolute; right:6%; top:8%; width:78%; }
.screen{
  background:var(--navy-800); border-radius:12px 12px 0 0; padding:14px; display:grid;
  grid-template-columns:110px 1fr; gap:14px; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,0.08);
}
.keyboard{ height:14px; background:#0a1622; border-radius:0 0 10px 10px; margin:0 -3%; box-shadow:var(--shadow-sm); }
.dashboard-sidebar{ display:flex; flex-direction:column; gap:10px; font-size:0.72rem; color:#9db3bd; }
.dashboard-sidebar b{ color:var(--sky); font-family:var(--font-display); font-size:0.9rem; margin-bottom:4px; }
.dashboard-main{ background:#0f2233; border-radius:8px; padding:14px; }
.dash-title{ color:#fff; font-weight:600; font-size:0.85rem; margin-bottom:10px; }
.metric-row{ display:flex; gap:10px; margin-bottom:12px; }
.metric-row i{ font-style:normal; background:rgba(255,255,255,0.05); border-radius:8px; padding:8px 10px; font-size:0.68rem; color:#9db3bd; flex:1; }
.metric-row i b{ display:block; color:#fff; font-family:var(--font-display); font-size:0.95rem; margin-top:2px; }
.chart{ display:flex; align-items:flex-end; gap:6px; height:48px; margin-bottom:8px; }
.chart span{ flex:1; background:linear-gradient(180deg, var(--sky), rgba(255,255,255,0.15)); border-radius:3px; }
.chart span:nth-child(1){ height:60%; } .chart span:nth-child(2){ height:90%; } .chart span:nth-child(3){ height:40%; }
.chart span:nth-child(4){ height:75%; } .chart span:nth-child(5){ height:55%; }
.bottom-chart span{ background:linear-gradient(180deg, var(--red), rgba(228,38,43,0.2)); }
.bottom-chart span:nth-child(1){ height:35%; } .bottom-chart span:nth-child(2){ height:65%; }
.bottom-chart span:nth-child(3){ height:50%; } .bottom-chart span:nth-child(4){ height:80%; }

.phone{ position:absolute; left:0; bottom:0; width:130px; height:260px; background:var(--navy-950); border-radius:22px; border:4px solid #1c3446; box-shadow:var(--shadow-lg); }
.phone-screen{ position:absolute; inset:10px; border-radius:14px; background:linear-gradient(160deg, var(--navy-800), var(--navy-950)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; overflow:hidden; }
.mini-logo{ font-family:var(--font-display); color:var(--sky); font-weight:700; font-size:1.1rem; }
.phone-screen strong{ color:#fff; font-size:0.72rem; letter-spacing:0.08em; }
.phone-screen small{ color:#8ea6b0; font-size:0.55rem; letter-spacing:0.12em; }
.network{ position:absolute; inset:0; opacity:0.5; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 55%); }
.globe{ position:absolute; right:2%; bottom:2%; font-size:2.2rem; filter:drop-shadow(0 6px 14px rgba(0,0,0,0.4)); animation:spin 12s linear infinite; }
@keyframes spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

/* ---------- Strapline ---------- */
.strapline{ background:var(--sky); color:var(--navy-950); text-align:center; padding:16px 24px; font-family:var(--font-display); font-size:1.02rem; }
.strapline u{ text-decoration-color:var(--navy-950); text-underline-offset:3px; }

/* ---------- Sections generic ---------- */
.section{ padding:80px 0; }
.section.light{ background:var(--paper-dim); }
.section-heading{ max-width:640px; margin:0 auto 48px; text-align:center; }
.section-heading h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); margin-bottom:12px; }
.section-heading p{ color:var(--ink-soft); }

/* ---------- Services ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.service{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  transition:transform .18s, box-shadow .18s;
}
.service:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.icon{
  width:46px; height:46px; border-radius:12px; background:var(--sky-tint); color:var(--navy-700);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:16px;
}
.icon.red-icon{ background:rgba(228,38,43,0.12); color:var(--red-dark); }
.service h3{ font-size:1.08rem; margin-bottom:8px; }
.service p{ color:var(--ink-soft); font-size:0.92rem; margin-bottom:14px; }
.service a{ font-weight:600; font-size:0.88rem; color:var(--navy-800); }
.service a:hover{ color:var(--red-dark); }

/* ---------- About ---------- */
.two-column{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; }
.about h2{ margin:10px 0 16px; font-size:clamp(1.6rem, 3vw, 2.1rem); }
.about p{ color:var(--ink-soft); margin-bottom:22px; }
.about-card{
  background:var(--navy-950); color:#fff; border-radius:var(--radius); padding:32px;
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.about-symbol{ font-family:var(--font-display); font-size:1.6rem; color:var(--sky); border:1px solid rgba(255,255,255,0.2); width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.about-card h3{ color:#fff; margin-bottom:10px; }
.about-card p{ color:#c7d6dc; margin-bottom:20px; }
.mini-stats{ display:flex; gap:28px; }
.mini-stats span{ font-size:0.82rem; color:#9db3bd; display:flex; flex-direction:column; gap:2px; }
.mini-stats b{ font-family:var(--font-display); color:#fff; font-size:1.2rem; }

/* ---------- Stats band ---------- */
.stats{ background:var(--navy-950); color:#fff; }
.stats-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; padding:56px 24px; text-align:center; }
.stats-grid b{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--sky); margin-bottom:6px; }
.stats-grid span{ color:#9db3bd; font-size:0.88rem; }

/* ---------- Projects ---------- */
.project-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.project-grid article{
  border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:#fff;
  border-top:3px solid var(--red);
}
.project-grid span{ font-size:0.72rem; letter-spacing:0.08em; color:var(--red-dark); font-weight:700; }
.project-grid h3{ margin:12px 0 8px; font-size:1.1rem; }
.project-grid p{ color:var(--ink-soft); font-size:0.92rem; }

.project-grid.is-empty-state{ grid-template-columns:1fr; }
.empty-state-panel{
  background:#fff; border:1px dashed var(--navy-700); border-radius:var(--radius); padding:48px 32px;
  text-align:center; max-width:520px; margin:0 auto;
}
.empty-state-badge{
  display:inline-block; background:var(--sky-tint); color:var(--navy-700); font-size:0.72rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:16px;
}
.empty-state-panel h3{ font-size:1.2rem; color:var(--navy-950); margin-bottom:10px; }
.empty-state-panel p{ color:var(--ink-soft); font-size:0.94rem; margin-bottom:22px; }

/* ---------- Branding Portfolio ---------- */
.branding-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:32px; }
.branding-filter{
  background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-size:0.85rem; font-weight:600;
  padding:8px 18px; border-radius:999px; cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.branding-filter:hover{ border-color:var(--navy-700); color:var(--navy-700); }
.branding-filter.active{ background:var(--navy-950); border-color:var(--navy-950); color:#fff; }
.branding-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.branding-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .18s, box-shadow .18s;
}
.branding-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.branding-card.is-hidden{ display:none; }
.branding-media{ aspect-ratio:4/3; width:100%; overflow:hidden; background:var(--sky-tint); position:relative; }
.branding-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.branding-placeholder{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--navy-700); background:repeating-linear-gradient(135deg, var(--sky-tint), var(--sky-tint) 10px, #fff 10px, #fff 20px);
  border:1px dashed var(--navy-700);
}
.branding-placeholder .placeholder-icon{ font-size:1.8rem; }
.branding-placeholder span{ font-size:0.78rem; font-weight:600; color:var(--ink-soft); }
.branding-body{ padding:18px 20px; }
.branding-category{ font-size:0.72rem; font-weight:700; letter-spacing:0.06em; color:var(--red-dark); text-transform:uppercase; }
.branding-title{ font-size:1rem; font-weight:600; color:var(--navy-950); margin-top:6px; }
.branding-description{ font-size:0.86rem; color:var(--ink-soft); margin-top:6px; }

/* ---------- Process ("How We Work") ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.process-step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px;
  position:relative; transition:transform .18s, box-shadow .18s;
}
.process-step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.process-number{
  font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--navy-700);
  margin-bottom:14px; opacity:0.35;
}
.process-step h3{ font-size:1.05rem; margin-bottom:8px; }
.process-step p{ color:var(--ink-soft); font-size:0.9rem; }

/* ---------- Testimonials ---------- */
.testimonials-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.testimonial-card{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy-700); border-radius:var(--radius);
  padding:28px; display:flex; flex-direction:column; gap:18px;
}
.testimonial-quote{ color:var(--ink); font-size:0.96rem; line-height:1.6; font-style:italic; flex:1; }
.testimonial-attribution{ display:flex; align-items:center; gap:12px; }
.testimonial-avatar{
  width:42px; height:42px; border-radius:50%; background:var(--navy-950); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:0.85rem;
}
.testimonial-name{ font-weight:600; font-size:0.9rem; color:var(--navy-950); }
.testimonial-role{ font-size:0.8rem; color:var(--ink-soft); }

/* ---------- Contact ---------- */
.contact h2{ margin:10px 0 16px; font-size:clamp(1.6rem, 3vw, 2.1rem); }
.contact > .container > div:first-child > p:last-of-type{ color:var(--ink-soft); margin-bottom:26px; }
.contact-details p{ margin-bottom:10px; color:var(--ink-soft); font-size:0.95rem; }

#quoteForm{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:14px; }
.field-label{ font-size:0.82rem; font-weight:600; color:var(--navy-800); margin-bottom:4px; display:block; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
input, select, textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px; font-family:inherit;
  font-size:0.95rem; background:var(--paper); color:var(--ink);
}
input:focus, select:focus, textarea:focus{ border-color:var(--navy-700); background:#fff; }
textarea{ min-height:110px; resize:vertical; }
.form-message{ font-size:0.88rem; min-height:1.2em; }
.form-message.success{ color:var(--navy-700); font-weight:600; }
.form-message.error{ color:var(--red-dark); font-weight:600; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Footer ---------- */
footer{ background:var(--navy-950); color:#c7d6dc; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding:56px 24px 32px; }
.footer-logo img{ height:38px; width:auto; }
.footer-logo .logo-text{ font-size:1.02rem; }
.footer-grid > div:first-child > .footer-logo{ margin-bottom:14px; }
.footer-grid p{ font-size:0.88rem; color:#9db3bd; }
.footer-grid h4{ color:#fff; font-size:0.92rem; margin-bottom:14px; }
.footer-grid > div{ display:flex; flex-direction:column; gap:9px; }
.footer-grid a{ color:#9db3bd; font-size:0.88rem; }
.footer-grid a:hover{ color:var(--sky); }
.copyright{ border-top:1px solid rgba(255,255,255,0.08); text-align:center; padding:18px 24px; font-size:0.8rem; color:#7f97a2; }
.copyright a{ color:#9db3bd; }
.copyright a:hover{ color:var(--sky); }

/* ---------- Legal pages ---------- */
.legal-content{ max-width:760px; margin:0 auto; padding:64px 24px 80px; }
.legal-content .eyebrow{ color:var(--red-dark); }
.legal-content h1{ font-size:clamp(1.8rem, 3vw, 2.3rem); margin:10px 0 8px; }
.legal-content .updated{ color:var(--ink-soft); font-size:0.88rem; margin-bottom:36px; display:block; }
.legal-content h2{ font-size:1.15rem; margin:32px 0 12px; color:var(--navy-800); }
.legal-content p{ color:var(--ink-soft); margin-bottom:14px; }
.legal-content ul{ color:var(--ink-soft); margin:0 0 14px; padding-left:22px; }
.legal-content li{ margin-bottom:8px; }
.legal-content a{ color:var(--navy-700); font-weight:600; }
.legal-content a:hover{ color:var(--red-dark); }

/* ---------- WhatsApp float ---------- */
.whatsapp{
  position:fixed; right:22px; bottom:22px; z-index:50; background:#25D366; color:#fff; border-radius:999px;
  padding:14px 18px; display:flex; align-items:center; gap:8px; font-weight:600; font-size:0.88rem; box-shadow:var(--shadow-lg);
}
.whatsapp span{ display:none; }
.whatsapp:hover span{ display:inline; }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero-content, .two-column{ grid-template-columns:1fr; }
  .hero-visual{ height:320px; margin-top:12px; }
  .services-grid, .project-grid, .process-grid, .testimonials-grid, .branding-grid{ grid-template-columns:repeat(2, 1fr); }
  .stats-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px){
  nav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--navy-950); flex-direction:column; padding:16px 24px; gap:16px; }
  nav.open{ display:flex; }
  .menu-toggle{ display:inline-block; margin-left:auto; }
  .quote-nav{ display:none; }
  .form-row{ grid-template-columns:1fr; }
  .services-grid, .project-grid, .process-grid, .testimonials-grid, .branding-grid, .footer-grid{ grid-template-columns:1fr; }
  .topbar-content{ font-size:0.74rem; gap:12px; }
  .socials{ margin-left:0; }
}

.project-grid .project-photo{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; margin-bottom:14px; display:block; }