/* ============================================================================
   FILE: css/components.css
   PURPOSE: Reusable building blocks — buttons, cards, forms, the hero
   animation, the WhatsApp chat button, the cookie-consent banner, and the
   Google Maps container. Each block below is labelled and explained.
   ========================================================================== */

/* ================================ BUTTONS ================================= */

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* Base button shape shared by every button variant. */
.btn {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
  padding: 16px 30px;
  display: inline-block;
  transition: .2s;            /* animate hover changes smoothly */
}

/* Solid cobalt button = the PRIMARY action (only one per screen area). */
.btn-solid { background: var(--cobalt); color: #fff; }
.btn-solid:hover { background: var(--cobalt-soft); transform: translateY(-2px); }

/* Outlined "ghost" button = secondary, less important actions. */
.btn-ghost { border: 1px solid var(--line2); color: var(--paper); }
.btn-ghost:hover { border-color: var(--aqua); color: var(--aqua); }

/* ======================= HERO "DEPLOY CONSOLE" ============================ */
/* The terminal-style strip under the hero buttons. JavaScript (main.js)
   rotates the message every few seconds to show delivery outcomes. */

.console {
  margin-top: 52px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .85);
  font-family: var(--mono);
  font-size: 13px;
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  max-width: 560px;
}

/* The blinking aqua square — @keyframes defines the animation steps,
   and "animation:" plays it forever (infinite). */
.console .dot { width: 8px; height: 8px; background: var(--aqua); flex: none;
                animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

.console .lbl { color: var(--muted); flex: none; }
#ticker { color: var(--paper); white-space: nowrap; overflow: hidden;
          text-overflow: ellipsis; }

/* ===================== HERO LOGO ANIMATION (signature) ==================== */
/* The three beams of the logo slide in one after another, then the diamond
   node pops in. Delays are staggered with :nth-child so beam 1 starts at
   0.25s, beam 2 at 0.5s, beam 3 at 0.75s. */

.beam-stage { justify-self: center; width: min(420px, 80vw); }
.beam-stage svg { width: 100%; height: auto; overflow: visible; }

.beam {
  opacity: 0;
  transform-origin: left center;
  animation: beamIn 1s cubic-bezier(.2, .8, .2, 1) forwards; /* "forwards" =
                                    keep the final state after animating */
}
.beam:nth-child(2) { animation-delay: .25s; }
.beam:nth-child(3) { animation-delay: .5s;  }
.beam:nth-child(4) { animation-delay: .75s; }
@keyframes beamIn { from { opacity: 0; transform: translateX(-28px); }
                    to   { opacity: 1; transform: none; } }

.node { opacity: 0; animation: nodeIn .6s 1.15s forwards; }
@keyframes nodeIn { from { opacity: 0; transform: scale(.4); transform-origin: center; }
                    to   { opacity: 1; transform: scale(1); } }

.beam-lbl { font-family: var(--mono); fill: var(--muted); font-size: 6.4px;
            letter-spacing: .18em; }

/* Dashed circle slowly rotating around the node — pure decoration. */
.orbit { stroke: var(--line2); stroke-dasharray: 2 5;
         animation: spin 60s linear infinite; transform-origin: 90px 50px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ====================== SERVICE PHASE CARDS (3-up) ======================== */
/* Trick used here: the grid's background color shows through the 1px "gap"
   between cards, creating hairline dividers without drawing borders. */

.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* three equal columns */
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.phase { background: var(--panel); padding: 42px 34px; position: relative;
         transition: background .25s; }
.phase:hover { background: var(--panel2); }

.phase .num { font-family: var(--mono); color: var(--aqua); font-size: 13px;
              letter-spacing: .2em; }
.phase h3 { font-size: 23px; margin: 18px 0 14px; }
.phase p  { font-size: 15.5px; }

/* Feature list inside each card. The "→" arrow before each item is added
   with ::before, so the HTML stays clean. */
.phase ul { margin-top: 18px; list-style: none; }
.phase li { font-size: 14.5px; padding: 8px 0; border-top: 1px solid var(--line);
            display: flex; gap: 10px; }
.phase li::before { content: "\2192"; color: var(--cobalt-soft);
                    font-family: var(--mono); }

/* On hover, a short gradient line grows from 0 to 56px wide at the card's
   bottom-left — a small "alive" detail. */
.phase::after { content: ""; position: absolute; left: 34px; bottom: 0;
                width: 0; height: 2px;
                background: linear-gradient(90deg, var(--cobalt), var(--aqua));
                transition: width .35s; }
.phase:hover::after { width: 56px; }

/* ======================== CAPABILITY CARDS (2-up) ========================= */

.caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
        background: var(--line); border: 1px solid var(--line); }

/* Each card is a mini-grid: 56px icon column + flexible text column. */
.cap { background: var(--void); padding: 34px; display: grid;
       grid-template-columns: 56px 1fr; gap: 22px; transition: background .25s; }
.cap:hover { background: var(--panel); }

.cap .ic { width: 44px; height: 44px; border: 1px solid var(--line2);
           display: grid; place-items: center; }
.cap .ic svg { width: 22px; height: 22px; stroke: var(--aqua); fill: none;
               stroke-width: 1.6; }
.cap h3 { font-size: 18px; margin-bottom: 8px; }
.cap p  { font-size: 14.5px; }
.cap .tag { font-family: var(--mono); font-size: 11px; color: var(--muted);
            letter-spacing: .14em; text-transform: uppercase; margin-top: 12px;
            display: block; }

/* ========================= ECOSYSTEM GRID (4-up) ========================== */

.eco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
            background: var(--line); border: 1px solid var(--line); }
.eco-cell { background: var(--panel); padding: 34px 28px; text-align: center; }
.eco-cell b { font-family: var(--disp); color: var(--paper); font-size: 16px;
              letter-spacing: .04em; display: block; }
.eco-cell span { font-family: var(--mono); font-size: 11px; color: var(--muted);
                 letter-spacing: .12em; text-transform: uppercase;
                 margin-top: 10px; display: block; }
.eco-note { font-family: var(--mono); font-size: 12.5px; color: var(--muted);
            margin-top: 22px; }

/* =========================== METRICS STRIP =============================== */

.metrics { display: grid; grid-template-columns: repeat(4, 1fr);
           border: 1px solid var(--line); }
.metric { padding: 34px 28px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric b { font-family: var(--disp); font-size: 34px; color: var(--paper);
            display: block; font-weight: 700; }
.metric b i { font-style: normal; color: var(--aqua); }
.metric span { font-size: 13.5px; }

/* ========================== CONTACT + FORM ================================ */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px;
                align-items: start; }

form { display: grid; gap: 16px; }

label { font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
        text-transform: uppercase; color: var(--muted); }

/* All three input types share the same style for consistency. */
input, textarea, select {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line2);
  color: var(--paper);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 15px;
  margin-top: 8px;
}
/* When the user clicks into a field, the border turns cobalt as feedback. */
input:focus, textarea:focus, select:focus { border-color: var(--cobalt);
                                            outline: none; }

.contact-links { display: grid; gap: 2px; margin-top: 36px; }
.clink { display: flex; justify-content: space-between; padding: 18px 0;
         border-top: 1px solid var(--line); text-decoration: none;
         font-family: var(--mono); font-size: 14px; transition: color .2s; }
.clink:hover { color: var(--aqua); }

/* ======================= GOOGLE MAPS CONTAINER ============================ */
/* The map itself is an <iframe> in index.html. This wrapper gives it a
   16:9 shape at any screen width and a brand-colored border. The
   grayscale + brightness filter tints Google's colorful map so it doesn't
   clash with our dark design. */

.map-wrap {
  margin-top: 70px;
  border: 1px solid var(--line2);
  aspect-ratio: 16 / 7;       /* keeps width:height proportional             */
  overflow: hidden;
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(.92) hue-rotate(190deg) brightness(.9);
}

/* ======================= WHATSAPP FLOATING BUTTON ========================= */
/* Fixed green circle in the bottom-right corner — visible on every scroll
   position. Clicking opens WhatsApp chat (wired up in js/main.js). */

.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;                /* above everything, including the header       */
  width: 56px;
  height: 56px;
  border-radius: 50%;         /* perfect circle                               */
  background: #25D366;        /* WhatsApp's official brand green              */
  display: grid;
  place-items: center;        /* centers the icon inside the circle           */
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
  transition: transform .2s;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* Small tooltip that appears when hovering the WhatsApp button. */
.wa-float::before {
  content: "Chat on WhatsApp";
  position: absolute;
  right: 68px;
  background: var(--panel2);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 12px;
  white-space: nowrap;
  border: 1px solid var(--line2);
  opacity: 0;                 /* hidden by default...                         */
  pointer-events: none;
  transition: opacity .2s;
}
.wa-float:hover::before { opacity: 1; }   /* ...revealed on hover             */

/* ======================= COOKIE CONSENT BANNER ============================ */
/* Legally, analytics/ad trackers should only run AFTER the visitor agrees
   (GDPR in the EU, and good practice everywhere). js/analytics.js shows
   this banner on first visit and only loads Google Analytics + Meta Pixel
   after "Accept" is clicked. */

.cookie-banner {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 70;
  max-width: 420px;
  background: var(--panel2);
  border: 1px solid var(--line2);
  padding: 22px;
  font-size: 14px;
  display: none;              /* hidden until JavaScript decides to show it   */
}
.cookie-banner.show { display: block; }
.cookie-banner p { margin-bottom: 16px; }
.cookie-banner .row { display: flex; gap: 12px; }
.cookie-banner button {
  cursor: pointer;
  font-family: var(--disp);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--line2);
  background: none;
  color: var(--titan);
}
.cookie-banner button.accept { background: var(--cobalt); border-color: var(--cobalt);
                               color: #fff; }

/* ===================== FOOTER SOCIAL MEDIA ICONS ========================== */
/* Row of square icon buttons above the footer text. The link URLs come from
   SOCIAL in js/config.js (wired by js/main.js); icons without a URL are
   hidden automatically. */

.social-row {
  display: flex;
  gap: 12px;
  margin-bottom: 34px;
}
.social-row a {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line2);
  display: grid;
  place-items: center;
  transition: border-color .2s, transform .2s;
}
.social-row a:hover { border-color: var(--aqua); transform: translateY(-2px); }
.social-row svg { width: 18px; height: 18px; fill: var(--titan); }
.social-row a:hover svg { fill: var(--aqua); }