/* ==========================================================================
   INNOVA ELEC — Design System
   Concept: "Panel & Signal" — electrical control-panel meets camera viewfinder.
   Palette grounded in breaker-panel steel/ink + live-power amber + signal teal.
   Type: IBM Plex family (engineering heritage) — Condensed display / Sans body / Mono data.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Color — named tokens */
  --ink:        #0E1A2B;  /* Panel Ink */
  --ink-2:      #142B44;  /* Panel Ink, raised surface */
  --steel:      #2B4D73;  /* Steel Blue — lines, borders on dark */
  --steel-soft: rgba(43,77,115,.35);
  --paper:      #F5F7FA;  /* Datasheet Paper — light bg */
  --paper-2:    #EAEEF3;  /* Paper, alt surface */
  --graphite:   #16212E;  /* body text on paper */
  --graphite-mute: #4E5A6C;
  --amber:      #FF9E1B;  /* Live Amber — electricity accent */
  --amber-dark: #DE8600;
  --amber-glow: rgba(255,158,27,.35);
  --teal:       #12A594;  /* Circuit Teal — surveillance accent */
  --teal-dark:  #0C7E72;
  --teal-glow:  rgba(18,165,148,.35);
  --on-dark:    #ECF1F7;
  --on-dark-mute: #93A2B8;
  --white:      #FFFFFF;

  /* Type */
  --font-display: 'IBM Plex Sans Condensed', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Radius / shadow / motion */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(14,26,43,.08);
  --shadow-2: 0 10px 26px -10px rgba(14,26,43,.28);
  --shadow-3: 0 24px 48px -16px rgba(14,26,43,.38);
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .3s;

  /* Layout */
  --maxw: 1180px;
  --pad-inline: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 8vw, 7rem);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--graphite);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.1; letter-spacing:-.01em; }

/* ---------- Focus & motion floor ---------- */
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-inline); }
.section{ padding-block:var(--section-pad); }
.section-alt{ background:var(--paper-2); }
.section-dark{ background:var(--ink); color:var(--on-dark); }
.section-dark .section-head p{ color:var(--on-dark-mute); }
.grid{ display:grid; gap:1.5rem; }
@media (min-width:700px){ .grid-2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:860px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .grid-6{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1180px){ .grid-6{ grid-template-columns:repeat(6,1fr); } .grid-4{grid-template-columns:repeat(4,1fr);} }
@media (min-width:640px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }

.bp-grid{
  background-image:
    linear-gradient(var(--steel-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel-soft) 1px, transparent 1px);
  background-size:44px 44px;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber);
  padding:.4rem .75rem;
  border:1px solid var(--amber-glow);
  border-radius:var(--r-full);
  background:rgba(255,158,27,.08);
}
.eyebrow--teal{ color:var(--teal); border-color:var(--teal-glow); background:rgba(18,165,148,.08); }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px currentColor/10; animation:pulse 2.2s var(--ease) infinite; }

@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.45; transform:scale(1.3); }
}

.section-head{ max-width:660px; margin-bottom:2.75rem; }
.section-head h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin-block:.6rem 0; }
.section-head p{ color:var(--graphite-mute); font-size:1.05rem; max-width:56ch; }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  letter-spacing:.01em;
  padding:.9rem 1.6rem;
  border-radius:var(--r-md);
  border:1px solid transparent;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space:nowrap;
}
.btn-sm{ padding:.6rem 1.1rem; font-size:.88rem; }
.btn-primary{ background:var(--amber); color:var(--ink); box-shadow:0 10px 24px -10px var(--amber-glow); }
.btn-primary:hover{ background:var(--amber-dark); transform:translateY(-2px); box-shadow:0 16px 30px -10px var(--amber-glow); }
.btn-teal{ background:var(--teal); color:var(--ink); box-shadow:0 10px 24px -10px var(--teal-glow); }
.btn-teal:hover{ background:var(--teal-dark); transform:translateY(-2px); color:var(--white); }
.btn-outline{ border-color:var(--steel-soft); color:var(--on-dark); background:rgba(255,255,255,.02); }
.btn-outline:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-2px); }
.btn-outline-dark{ border-color:rgba(14,26,43,.18); color:var(--graphite); }
.btn-outline-dark:hover{ border-color:var(--amber-dark); color:var(--amber-dark); transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ---------- Corner-bracket signature component ---------- */
.bracket{ position:relative; }
.bracket__c{
  position:absolute; width:16px; height:16px;
  border:0 solid var(--amber); opacity:.4;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events:none;
}
.bracket__c--tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.bracket__c--tr{ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; }
.bracket__c--bl{ bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px; }
.bracket__c--br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }
.bracket:hover .bracket__c, .bracket:focus-within .bracket__c{ opacity:1; }
.bracket:hover .bracket__c--tl, .bracket:focus-within .bracket__c--tl{ transform:translate(-3px,-3px); }
.bracket:hover .bracket__c--tr, .bracket:focus-within .bracket__c--tr{ transform:translate(3px,-3px); }
.bracket:hover .bracket__c--bl, .bracket:focus-within .bracket__c--bl{ transform:translate(-3px,3px); }
.bracket:hover .bracket__c--br, .bracket:focus-within .bracket__c--br{ transform:translate(3px,3px); }
.bracket--teal .bracket__c{ border-color:var(--teal); }

/* ---------- Navbar ---------- */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:100;
  background:rgba(14,26,43,.0);
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.nav.is-scrolled, .nav.is-solid{
  background:rgba(14,26,43,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--steel-soft);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.nav__logo{ display:flex; align-items:center; gap:.55rem; color:var(--on-dark); font-family:var(--font-display); font-size:1.2rem; font-weight:600; }
.nav__logo-mark{ color:var(--amber); }
.nav__logo-text strong{ color:var(--amber); font-weight:700; }
.nav__links{ display:none; align-items:center; gap:2rem; }
.nav__link{ font-size:.95rem; color:var(--on-dark-mute); font-weight:500; transition:color var(--dur) var(--ease); position:relative; padding-block:.3rem; }
.nav__link:hover, .nav__link[aria-current="page"]{ color:var(--on-dark); }
.nav__link[aria-current="page"]::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--amber); border-radius:var(--r-full); }
.nav__actions{ display:flex; align-items:center; gap:.9rem; }
.nav__whatsapp{ display:none; color:var(--on-dark-mute); transition:color var(--dur) var(--ease); }
.nav__whatsapp:hover{ color:var(--teal); }
.nav__burger{ display:flex; flex-direction:column; gap:5px; width:26px; padding:.4rem; }
.nav__burger span{ height:2px; width:100%; background:var(--on-dark); border-radius:2px; transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__mobile{
  max-height:0; overflow:hidden; background:var(--ink-2);
  border-bottom:1px solid var(--steel-soft);
  transition:max-height var(--dur) var(--ease);
}
.nav__mobile.is-open{ max-height:420px; }
.nav__mobile-inner{ padding:1.25rem var(--pad-inline) 2rem; display:flex; flex-direction:column; gap:1.1rem; }
.nav__mobile .nav__link{ color:var(--on-dark); font-size:1.05rem; }
.nav__mobile-contact{ display:flex; flex-direction:column; gap:.6rem; padding-top:1rem; border-top:1px solid var(--steel-soft); font-family:var(--font-mono); font-size:.85rem; color:var(--on-dark-mute); }

@media (min-width:900px){
  .nav__links{ display:flex; }
  .nav__whatsapp{ display:flex; }
  .nav__burger{ display:none; }
  .nav__mobile{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--ink); color:var(--on-dark);
  padding-top:calc(76px + clamp(3rem,8vw,6rem)); padding-bottom:clamp(3.5rem,8vw,6rem);
  overflow:hidden; isolation:isolate;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background-image:
    linear-gradient(var(--steel-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel-soft) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 75%);
  opacity:.55;
}
.hero__canvas{ position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity 1.1s var(--ease); }
.hero__canvas.is-ready{ opacity:1; }
.hero__inner{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero__eyebrow{ opacity:0; transform:translateY(10px); animation:heroIn .7s var(--ease) .1s forwards; }
.hero h1{
  font-size:clamp(2.15rem, 5.2vw, 3.85rem); max-width:16ch; margin-block:1.15rem .9rem;
  opacity:0; transform:translateY(14px); animation:heroIn .7s var(--ease) .22s forwards;
}
.hero h1 em{ font-style:normal; color:var(--amber); }
.hero__sub{
  max-width:56ch; color:var(--on-dark-mute); font-size:clamp(1.02rem,1.6vw,1.18rem);
  opacity:0; transform:translateY(14px); animation:heroIn .7s var(--ease) .34s forwards;
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2rem;
  opacity:0; transform:translateY(14px); animation:heroIn .7s var(--ease) .46s forwards;
}
.hero__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3.5rem;
  width:100%; max-width:760px; border-top:1px solid var(--steel-soft); padding-top:2rem;
  opacity:0; transform:translateY(14px); animation:heroIn .7s var(--ease) .58s forwards;
}
.hero__stat-num{ font-family:var(--font-mono); font-size:clamp(1.6rem,3vw,2.3rem); font-weight:600; color:var(--white); }
.hero__stat-num .unit{ color:var(--amber); }
.hero__stat-label{ font-size:.8rem; color:var(--on-dark-mute); margin-top:.3rem; }

@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }

/* ---------- Page header (inner pages) ---------- */
.page-hero{
  background:var(--ink); color:var(--on-dark); position:relative; isolation:isolate;
  padding-top:calc(76px + 3.5rem); padding-bottom:3.5rem;
  overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(var(--steel-soft) 1px, transparent 1px), linear-gradient(90deg, var(--steel-soft) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 15% 0%, black, transparent 70%);
  mask-image:radial-gradient(ellipse 70% 100% at 15% 0%, black, transparent 70%);
  opacity:.6;
}
.page-hero h1{ font-size:clamp(1.9rem,4.4vw,3.1rem); max-width:20ch; margin-block:1rem .85rem; }
.page-hero p{ max-width:62ch; color:var(--on-dark-mute); font-size:1.06rem; }
.page-hero .hero__stats{ margin-top:2.75rem; max-width:none; justify-content:flex-start; }

/* ---------- Feature / service cards ---------- */
.card{
  background:var(--white); border:1px solid rgba(14,26,43,.08); border-radius:var(--r-lg);
  padding:2rem 1.75rem; box-shadow:var(--shadow-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-3); border-color:rgba(14,26,43,.05); }
.card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:var(--r-md);
  background:rgba(255,158,27,.1); border:1px solid var(--amber-glow); color:var(--amber);
  margin-bottom:1.25rem;
}
.card__icon--teal{ background:rgba(18,165,148,.1); border-color:var(--teal-glow); color:var(--teal); }
.card h3{ font-size:1.2rem; margin-bottom:.6rem; }
.card p{ color:var(--graphite-mute); font-size:.96rem; }
.card__tag{
  display:inline-block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite-mute); margin-bottom:.85rem;
}

.card--dark{ background:var(--ink-2); border-color:var(--steel-soft); }
.card--dark h3{ color:var(--on-dark); }
.card--dark p{ color:var(--on-dark-mute); }

/* Pillar cards (home) */
.pillar{
  position:relative; border-radius:var(--r-lg); padding:2.25rem 2rem; overflow:hidden;
  background:var(--ink-2); border:1px solid var(--steel-soft); color:var(--on-dark);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pillar:hover{ transform:translateY(-6px); box-shadow:var(--shadow-3); }
.pillar__num{ font-family:var(--font-mono); font-size:.75rem; color:var(--on-dark-mute); letter-spacing:.12em; }
.pillar h3{ font-size:1.45rem; margin-block:.9rem .7rem; color:var(--white); }
.pillar p{ color:var(--on-dark-mute); margin-bottom:1.4rem; font-size:.98rem; }
.pillar__link{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-weight:600; color:var(--amber); font-size:.95rem; }
.pillar--teal .pillar__link{ color:var(--teal); }
.pillar__link svg{ transition:transform var(--dur) var(--ease); }
.pillar:hover .pillar__link svg{ transform:translateX(4px); }

/* ---------- Process / timeline (genuine sequence — numbered) ---------- */
.process{ display:grid; gap:2.25rem; counter-reset:step; }
@media (min-width:860px){ .process{ grid-template-columns:repeat(4,1fr); gap:1.5rem; } }
.process__step{ position:relative; padding-top:1rem; }
.process__step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--font-mono); font-size:.85rem; color:var(--amber);
  display:block; margin-bottom:.9rem;
}
.process__step h4{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:.5rem; }
.process__step p{ color:var(--graphite-mute); font-size:.92rem; }
.process__line{
  display:none;
}
@media (min-width:860px){
  .process__step:not(:last-child)::after{
    content:''; position:absolute; top:1.55rem; left:calc(100% - 0.5rem); width:calc(1.5rem + 1px);
    border-top:1px dashed var(--steel-soft);
  }
}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--ink); color:var(--on-dark); border-radius:var(--r-lg);
  padding:clamp(2.5rem,5vw,4rem); text-align:center; position:relative; overflow:hidden; isolation:isolate;
}
.cta-banner::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(var(--steel-soft) 1px, transparent 1px), linear-gradient(90deg, var(--steel-soft) 1px, transparent 1px);
  background-size:44px 44px; opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 50% 0%, black, transparent 70%);
}
.cta-banner h2{ font-size:clamp(1.6rem,3.4vw,2.3rem); max-width:22ch; margin-inline:auto; }
.cta-banner p{ color:var(--on-dark-mute); max-width:52ch; margin:.9rem auto 1.9rem; }
.cta-banner__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:var(--on-dark-mute); padding-top:4.5rem; }
.footer__grid{ display:grid; gap:2.75rem; padding-bottom:3rem; border-bottom:1px solid var(--steel-soft); }
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr 1.1fr; } }
.footer__brand p{ margin-block:1rem 1.1rem; font-size:.92rem; max-width:32ch; }
.footer__whatsapp{ display:inline-flex; align-items:center; gap:.5rem; color:var(--teal); font-weight:600; font-size:.9rem; }
.footer__col h3{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark); margin-bottom:1.1rem; font-weight:600; }
.footer__col ul{ display:flex; flex-direction:column; gap:.65rem; font-size:.92rem; }
.footer__col a:hover{ color:var(--amber); }
.footer__contact li{ color:var(--on-dark-mute); }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; padding-block:1.6rem; font-size:.82rem; font-family:var(--font-mono); }

/* ---------- Floating WhatsApp button ---------- */
.fab-whatsapp{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
  width:56px; height:56px; border-radius:var(--r-full);
  background:var(--teal); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(18,165,148,.55);
  transition:transform var(--dur) var(--ease);
}
.fab-whatsapp:hover{ transform:scale(1.08); }

/* ---------- Forms ---------- */
.form{ display:flex; flex-direction:column; gap:1.35rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--graphite-mute); }
.field .req{ color:var(--amber-dark); }
.field input, .field select, .field textarea{
  background:var(--white); border:1px solid rgba(14,26,43,.16); border-radius:var(--r-md);
  padding:.85rem 1rem; font-size:.98rem; color:var(--graphite);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-glow);
}
.field textarea{ resize:vertical; min-height:130px; }
.field-row{ display:grid; gap:1.35rem; }
@media (min-width:640px){ .field-row{ grid-template-columns:1fr 1fr; } }
.form__actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; margin-top:.35rem; }
.form__note{ font-size:.85rem; color:var(--graphite-mute); }
.form__status{
  display:none; padding:.9rem 1.1rem; border-radius:var(--r-md); font-size:.92rem;
  background:rgba(18,165,148,.08); border:1px solid var(--teal-glow); color:var(--teal-dark);
}
.form__status.is-visible{ display:block; }
.form__status.is-error{ background:rgba(255,158,27,.1); border-color:var(--amber-glow); color:var(--amber-dark); }
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- FAQ ---------- */
.faq-item{
  border:1px solid rgba(14,26,43,.1); border-radius:var(--r-md); background:var(--white);
  padding:.3rem 1.4rem; margin-bottom:.85rem;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding-block:1.1rem;
  font-family:var(--font-display); font-weight:600; font-size:1.02rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .ic{ flex-shrink:0; color:var(--amber); transition:transform var(--dur) var(--ease); }
.faq-item[open] summary .ic{ transform:rotate(45deg); }
.faq-item p{ color:var(--graphite-mute); padding-bottom:1.2rem; font-size:.96rem; max-width:70ch; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Tilt ---------- */
.tilt{ transform-style:preserve-3d; will-change:transform; }

/* ---------- Misc ---------- */
.divider{ border:0; border-top:1px solid rgba(14,26,43,.08); margin-block:var(--section-pad); }
.divider--dark{ border-top-color:var(--steel-soft); }
.pill-list{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pill{
  font-family:var(--font-mono); font-size:.78rem; padding:.5rem .9rem; border-radius:var(--r-full);
  border:1px solid rgba(14,26,43,.12); color:var(--graphite-mute);
}
.text-center{ text-align:center; }
.mono{ font-family:var(--font-mono); }
.mt-lg{ margin-top:3rem; }

/* ---------- About (FAQ page) ---------- */
.about-grid{ display:grid; gap:3rem; align-items:start; }
@media (min-width:900px){ .about-grid{ grid-template-columns:1fr 1fr; } }
.about-panel{
  background:var(--ink); color:var(--on-dark); border-radius:var(--r-lg); padding:2.25rem;
  position:relative; overflow:hidden; isolation:isolate;
}
.about-panel::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(var(--steel-soft) 1px, transparent 1px), linear-gradient(90deg, var(--steel-soft) 1px, transparent 1px);
  background-size:36px 36px; opacity:.5;
}
.about-panel dl{ display:grid; gap:1.1rem; margin-top:1.5rem; }
.about-panel dt{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-mute); }
.about-panel dd{ font-family:var(--font-display); font-size:1.1rem; color:var(--white); margin-top:.15rem; }

/* ---------- Devis two-col ---------- */
.devis-layout{ display:grid; gap:2.5rem; align-items:start; }
@media (min-width:940px){ .devis-layout{ grid-template-columns:1.3fr .9fr; } }
.devis-side{ display:flex; flex-direction:column; gap:1.25rem; }
.contact-card{ background:var(--white); border:1px solid rgba(14,26,43,.08); border-radius:var(--r-lg); padding:1.75rem; box-shadow:var(--shadow-1); }
.contact-card h3{ font-size:1.05rem; margin-bottom:1rem; }
.contact-link{ display:flex; align-items:center; gap:.75rem; padding-block:.7rem; border-top:1px solid rgba(14,26,43,.07); font-size:.95rem; }
.contact-link:first-of-type{ border-top:0; }
.contact-link .ic{ color:var(--teal); flex-shrink:0; }

/* ---------- Realisations grid ---------- */
.category-card{ background:var(--white); border:1px solid rgba(14,26,43,.08); border-radius:var(--r-lg); padding:1.9rem; box-shadow:var(--shadow-1); }
.category-card h3{ font-size:1.1rem; margin:.3rem 0 .55rem; }
.category-card p{ color:var(--graphite-mute); font-size:.92rem; }

.note-card{
  border:1px dashed rgba(14,26,43,.18); border-radius:var(--r-lg); padding:1.75rem 2rem;
  display:flex; gap:1.25rem; align-items:flex-start; background:rgba(18,165,148,.04);
}
.note-card .ic{ color:var(--teal); flex-shrink:0; margin-top:.2rem; }
.note-card p{ color:var(--graphite-mute); font-size:.95rem; }
.note-card strong{ color:var(--graphite); }

/* ---------- Service rows (Services page) ---------- */
.service-row{ display:flex; flex-direction:column; gap:1.35rem; scroll-margin-top:96px; }
@media (min-width:700px){
  .service-row{ flex-direction:row; gap:2.25rem; }
  .service-row__icon{ flex:0 0 auto; }
}
.service-row__body p{ color:var(--graphite-mute); margin-block:.6rem 1.1rem; max-width:68ch; }
.service-row .pill-list{ margin-bottom:1.1rem; }

.link-arrow{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-weight:600; color:var(--amber-dark); font-size:.95rem; }
.link-arrow svg{ transition:transform var(--dur) var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }
.link-arrow--teal{ color:var(--teal-dark); }

.guarantee-row{ display:flex; flex-wrap:wrap; gap:1rem 2.5rem; justify-content:center; }
.guarantee{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.85rem; color:var(--graphite-mute); }
.guarantee .ic{ color:var(--amber-dark); flex-shrink:0; }