/* =========================================================
   MONTIVADESIGN — Design system
   Swiss web design studio: charcoal / off-white / cobalt accent
   ========================================================= */

:root{
  --ink:        #1B1D24;
  --ink-2:      #262933;
  --ink-soft:   #23252D;
  --paper:      #FAF9F7;
  --paper-dim:  #F1EFEA;
  --line-dark:  rgba(255,255,255,.14);
  --line-light: rgba(13,14,16,.12);
  --text-dark:  #141516;
  --text-dark-soft: #5C5D59;
  --text-light: #F6F5F2;
  --text-light-soft: #ADAFB8;
  --accent:     #3654FF;
  --accent-deep:#2440D9;
  --accent-soft: #EEF0FF;
  --accent2:    #7C5CFF;
  --grain-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27170%27%20height%3D%27170%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200.05%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27170%27%20height%3D%27170%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200.025%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E");
  --contour-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27360%27%20height%3D%27170%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgb%28140%2C160%2C255%29%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20opacity%3D%270.16%27%3E%3Cpath%20d%3D%27M0.0%2C40.0%20L7.5%2C41.8%20L15.0%2C43.6%20L22.5%2C45.4%20L30.0%2C47.0%20L37.5%2C48.5%20L45.0%2C49.9%20L52.5%2C51.1%20L60.0%2C52.1%20L67.5%2C52.9%20L75.0%2C53.5%20L82.5%2C53.9%20L90.0%2C54.0%20L97.5%2C53.9%20L105.0%2C53.5%20L112.5%2C52.9%20L120.0%2C52.1%20L127.5%2C51.1%20L135.0%2C49.9%20L142.5%2C48.5%20L150.0%2C47.0%20L157.5%2C45.4%20L165.0%2C43.6%20L172.5%2C41.8%20L180.0%2C40.0%20L187.5%2C38.2%20L195.0%2C36.4%20L202.5%2C34.6%20L210.0%2C33.0%20L217.5%2C31.5%20L225.0%2C30.1%20L232.5%2C28.9%20L240.0%2C27.9%20L247.5%2C27.1%20L255.0%2C26.5%20L262.5%2C26.1%20L270.0%2C26.0%20L277.5%2C26.1%20L285.0%2C26.5%20L292.5%2C27.1%20L300.0%2C27.9%20L307.5%2C28.9%20L315.0%2C30.1%20L322.5%2C31.5%20L330.0%2C33.0%20L337.5%2C34.6%20L345.0%2C36.4%20L352.5%2C38.2%20L360.0%2C40.0%27/%3E%3Cpath%20d%3D%27M0.0%2C98.8%20L7.5%2C99.0%20L15.0%2C99.0%20L22.5%2C98.7%20L30.0%2C98.3%20L37.5%2C97.7%20L45.0%2C97.0%20L52.5%2C96.1%20L60.0%2C95.0%20L67.5%2C93.9%20L75.0%2C92.6%20L82.5%2C91.3%20L90.0%2C89.9%20L97.5%2C88.4%20L105.0%2C87.0%20L112.5%2C85.6%20L120.0%2C84.2%20L127.5%2C82.9%20L135.0%2C81.7%20L142.5%2C80.5%20L150.0%2C79.5%20L157.5%2C78.7%20L165.0%2C78.0%20L172.5%2C77.5%20L180.0%2C77.2%20L187.5%2C77.0%20L195.0%2C77.0%20L202.5%2C77.3%20L210.0%2C77.7%20L217.5%2C78.3%20L225.0%2C79.0%20L232.5%2C79.9%20L240.0%2C81.0%20L247.5%2C82.1%20L255.0%2C83.4%20L262.5%2C84.7%20L270.0%2C86.1%20L277.5%2C87.6%20L285.0%2C89.0%20L292.5%2C90.4%20L300.0%2C91.8%20L307.5%2C93.1%20L315.0%2C94.3%20L322.5%2C95.5%20L330.0%2C96.5%20L337.5%2C97.3%20L345.0%2C98.0%20L352.5%2C98.5%20L360.0%2C98.8%27/%3E%3Cpath%20d%3D%27M0.0%2C140.2%20L7.5%2C138.4%20L15.0%2C136.4%20L22.5%2C134.4%20L30.0%2C132.3%20L37.5%2C130.2%20L45.0%2C128.1%20L52.5%2C126.1%20L60.0%2C124.3%20L67.5%2C122.5%20L75.0%2C120.9%20L82.5%2C119.5%20L90.0%2C118.3%20L97.5%2C117.3%20L105.0%2C116.6%20L112.5%2C116.2%20L120.0%2C116.0%20L127.5%2C116.1%20L135.0%2C116.5%20L142.5%2C117.1%20L150.0%2C118.0%20L157.5%2C119.1%20L165.0%2C120.5%20L172.5%2C122.0%20L180.0%2C123.8%20L187.5%2C125.6%20L195.0%2C127.6%20L202.5%2C129.6%20L210.0%2C131.7%20L217.5%2C133.8%20L225.0%2C135.9%20L232.5%2C137.9%20L240.0%2C139.7%20L247.5%2C141.5%20L255.0%2C143.1%20L262.5%2C144.5%20L270.0%2C145.7%20L277.5%2C146.7%20L285.0%2C147.4%20L292.5%2C147.8%20L300.0%2C148.0%20L307.5%2C147.9%20L315.0%2C147.5%20L322.5%2C146.9%20L330.0%2C146.0%20L337.5%2C144.9%20L345.0%2C143.5%20L352.5%2C142.0%20L360.0%2C140.2%27/%3E%3C/g%3E%3C/svg%3E");
  --contour-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27360%27%20height%3D%27170%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgb%2854%2C84%2C255%29%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20opacity%3D%270.1%27%3E%3Cpath%20d%3D%27M0.0%2C40.0%20L7.5%2C41.8%20L15.0%2C43.6%20L22.5%2C45.4%20L30.0%2C47.0%20L37.5%2C48.5%20L45.0%2C49.9%20L52.5%2C51.1%20L60.0%2C52.1%20L67.5%2C52.9%20L75.0%2C53.5%20L82.5%2C53.9%20L90.0%2C54.0%20L97.5%2C53.9%20L105.0%2C53.5%20L112.5%2C52.9%20L120.0%2C52.1%20L127.5%2C51.1%20L135.0%2C49.9%20L142.5%2C48.5%20L150.0%2C47.0%20L157.5%2C45.4%20L165.0%2C43.6%20L172.5%2C41.8%20L180.0%2C40.0%20L187.5%2C38.2%20L195.0%2C36.4%20L202.5%2C34.6%20L210.0%2C33.0%20L217.5%2C31.5%20L225.0%2C30.1%20L232.5%2C28.9%20L240.0%2C27.9%20L247.5%2C27.1%20L255.0%2C26.5%20L262.5%2C26.1%20L270.0%2C26.0%20L277.5%2C26.1%20L285.0%2C26.5%20L292.5%2C27.1%20L300.0%2C27.9%20L307.5%2C28.9%20L315.0%2C30.1%20L322.5%2C31.5%20L330.0%2C33.0%20L337.5%2C34.6%20L345.0%2C36.4%20L352.5%2C38.2%20L360.0%2C40.0%27/%3E%3Cpath%20d%3D%27M0.0%2C98.8%20L7.5%2C99.0%20L15.0%2C99.0%20L22.5%2C98.7%20L30.0%2C98.3%20L37.5%2C97.7%20L45.0%2C97.0%20L52.5%2C96.1%20L60.0%2C95.0%20L67.5%2C93.9%20L75.0%2C92.6%20L82.5%2C91.3%20L90.0%2C89.9%20L97.5%2C88.4%20L105.0%2C87.0%20L112.5%2C85.6%20L120.0%2C84.2%20L127.5%2C82.9%20L135.0%2C81.7%20L142.5%2C80.5%20L150.0%2C79.5%20L157.5%2C78.7%20L165.0%2C78.0%20L172.5%2C77.5%20L180.0%2C77.2%20L187.5%2C77.0%20L195.0%2C77.0%20L202.5%2C77.3%20L210.0%2C77.7%20L217.5%2C78.3%20L225.0%2C79.0%20L232.5%2C79.9%20L240.0%2C81.0%20L247.5%2C82.1%20L255.0%2C83.4%20L262.5%2C84.7%20L270.0%2C86.1%20L277.5%2C87.6%20L285.0%2C89.0%20L292.5%2C90.4%20L300.0%2C91.8%20L307.5%2C93.1%20L315.0%2C94.3%20L322.5%2C95.5%20L330.0%2C96.5%20L337.5%2C97.3%20L345.0%2C98.0%20L352.5%2C98.5%20L360.0%2C98.8%27/%3E%3Cpath%20d%3D%27M0.0%2C140.2%20L7.5%2C138.4%20L15.0%2C136.4%20L22.5%2C134.4%20L30.0%2C132.3%20L37.5%2C130.2%20L45.0%2C128.1%20L52.5%2C126.1%20L60.0%2C124.3%20L67.5%2C122.5%20L75.0%2C120.9%20L82.5%2C119.5%20L90.0%2C118.3%20L97.5%2C117.3%20L105.0%2C116.6%20L112.5%2C116.2%20L120.0%2C116.0%20L127.5%2C116.1%20L135.0%2C116.5%20L142.5%2C117.1%20L150.0%2C118.0%20L157.5%2C119.1%20L165.0%2C120.5%20L172.5%2C122.0%20L180.0%2C123.8%20L187.5%2C125.6%20L195.0%2C127.6%20L202.5%2C129.6%20L210.0%2C131.7%20L217.5%2C133.8%20L225.0%2C135.9%20L232.5%2C137.9%20L240.0%2C139.7%20L247.5%2C141.5%20L255.0%2C143.1%20L262.5%2C144.5%20L270.0%2C145.7%20L277.5%2C146.7%20L285.0%2C147.4%20L292.5%2C147.8%20L300.0%2C148.0%20L307.5%2C147.9%20L315.0%2C147.5%20L322.5%2C146.9%20L330.0%2C146.0%20L337.5%2C144.9%20L345.0%2C143.5%20L352.5%2C142.0%20L360.0%2C140.2%27/%3E%3C/g%3E%3C/svg%3E");
  --logo-watermark: url("images/logo-watermark-mountain.png");
  --logo-watermark-horizontal: url("images/logo-watermark-horizontal.png");
  --radius: 3px;
  --max: 1240px;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{ box-sizing:inherit; }
html{ scroll-padding-top: 100px; -webkit-text-size-adjust:100%; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #17171A;
    --paper-dim: #1E1E21;
    --text-dark: #F1F0EC;
    --text-dark-soft: #ACADA7;
    --line-light: rgba(255,255,255,.12);
    --accent-soft: rgba(54,84,255,.14);
  }
}
:root[data-theme="dark"]{
  --paper: #17171A;
  --paper-dim: #1E1E21;
  --text-dark: #F1F0EC;
  --text-dark-soft: #ACADA7;
  --line-light: rgba(255,255,255,.12);
  --accent-soft: rgba(54,84,255,.14);
}

body{
  margin:0;
  background: var(--paper);
  color: var(--text-dark);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family:'Manrope', sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.wrap{ max-width: var(--max); margin:0 auto; padding: 0 28px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

section{ padding: 104px 0; }
@media (max-width:780px){ section{ padding:64px 0; } }

.section-dark{
  background-image:
    var(--grain-dark),
    var(--contour-dark),
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(54,84,255,.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 92% 10%, rgba(124,92,255,.16), transparent 55%),
    radial-gradient(ellipse 80% 65% at 100% 100%, rgba(140,160,255,.12), transparent 55%),
    linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 55%);
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 170px 170px, 360px 170px, auto, auto, auto, auto;
  color: var(--text-light);
  position: relative;
}
.section-light{
  background-image:
    var(--grain-light),
    var(--contour-light),
    radial-gradient(ellipse 55% 45% at 100% 0%, rgba(54,84,255,.07), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(124,92,255,.05), transparent 55%),
    linear-gradient(var(--paper), var(--paper));
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size: 170px 170px, 360px 170px, auto, auto, auto;
  color: var(--text-dark);
}
.section-dim{
  background-image:
    var(--grain-light),
    var(--contour-light),
    radial-gradient(ellipse 55% 45% at 0% 0%, rgba(54,84,255,.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(124,92,255,.06), transparent 55%),
    linear-gradient(var(--paper-dim), var(--paper-dim));
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size: 170px 170px, 360px 170px, auto, auto, auto;
  color: var(--text-dark);
}

/* ---- Watermark (mountain mark), layered on top of the above ---- */
/* Opt-in per section via the .wm class, only on the main tab pages (body.wm-page) */
body.wm-page .wm.section-light{
  background-image:
    var(--logo-watermark), var(--grain-light), var(--contour-light),
    radial-gradient(ellipse 55% 45% at 100% 0%, rgba(54,84,255,.07), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(124,92,255,.05), transparent 55%),
    linear-gradient(var(--paper), var(--paper));
  background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-size: auto 100%, 170px 170px, 360px 170px, auto, auto, auto;
}
body.wm-page .wm.section-dim{
  background-image:
    var(--logo-watermark), var(--grain-light), var(--contour-light),
    radial-gradient(ellipse 55% 45% at 0% 0%, rgba(54,84,255,.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(124,92,255,.06), transparent 55%),
    linear-gradient(var(--paper-dim), var(--paper-dim));
  background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-size: auto 100%, 170px 170px, 360px 170px, auto, auto, auto;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:700; letter-spacing:.03em; color: var(--accent);
  margin-bottom: 18px;
}
.section-dark .eyebrow{ color:#8CA0FF; }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: currentColor; }
.eyebrow .num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:20px; padding:0 5px;
  border:1px solid currentColor; border-radius:2px;
  font-size:.72rem; font-weight:800; letter-spacing:0;
  font-family:'Manrope', sans-serif;
  opacity:.9;
}

h2.h-lg{ font-size: clamp(1.9rem, 3.6vw, 2.7rem); max-width: 20ch; }
.section-sub{ font-size:1.05rem; max-width: 50ch; margin-top:16px; }
.section-dark .section-sub{ color: var(--text-light-soft); }
.section-light .section-sub, .section-dim .section-sub{ color: var(--text-dark-soft); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:48px; flex-wrap:wrap; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:.92rem; letter-spacing:.01em; font-family:'Inter',sans-serif;
  padding:15px 26px; border-radius: var(--radius); border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-accent{ background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); color:#fff; box-shadow: 0 6px 20px -6px rgba(54,84,255,.55); }
.btn-accent:hover{ background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent2) 100%); box-shadow: 0 8px 24px -6px rgba(54,84,255,.65); }
.btn-dark{ background: var(--ink); color: var(--text-light); }
.btn-dark:hover{ background:#26262A; }
.btn-outline-light{ background:transparent; color: var(--text-light); border-color: var(--line-dark); }
.btn-outline-light:hover{ background: rgba(255,255,255,.08); }
.btn-outline-dark{ background:transparent; color: var(--text-dark); border-color: var(--line-light); }
.btn-outline-dark:hover{ background: rgba(0,0,0,.05); }
.btn-lg{ padding:19px 34px; font-size:1rem; }
.btn-block{ width:100%; }

/* ---------- topbar ---------- */
.brand-strip{
  position:sticky; top:0; z-index:61; height:3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 55%, #34D5E0 100%);
}
.topbar{ position:sticky; top:3px; z-index:60; background: rgba(250,249,247,.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--line-light); padding-top: env(safe-area-inset-top,0px); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .topbar{ background: rgba(23,23,26,.88); } }
:root[data-theme="dark"] .topbar{ background: rgba(23,23,26,.88); }
.topbar-inner{ max-width: var(--max); margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:18px; position:relative; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .mark{
  width:60px; height:60px; flex:none; display:block; border-radius:50%;
  filter: drop-shadow(0 2px 10px rgba(54,84,255,.45));
  transition: transform .2s ease, filter .2s ease;
}
.brand:hover .mark{ transform: scale(1.05); filter: drop-shadow(0 3px 14px rgba(54,84,255,.6)); }
@media (max-width:640px){ .brand .mark{ width:48px; height:48px; } }
.nav-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:.9rem; font-weight:600; color: var(--text-dark-soft); }
.nav-links a:hover{ color: var(--text-dark); }
.topbar-cta{ display:flex; align-items:center; gap:14px; }
.burger{ display:none; background:none; border:none; padding:8px; cursor:pointer; }
.burger span, .burger span::before, .burger span::after{ content:""; display:block; width:22px; height:2px; background: var(--text-dark); position:relative; }
.burger span::before{ position:absolute; top:-7px; } .burger span::after{ position:absolute; top:7px; }
@media (max-width:960px){
  .nav-links{ display:none; }
  .nav-links.nav-open{ display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background: var(--paper); padding:22px 28px; gap:18px; border-bottom:1px solid var(--line-light); }
  .burger{ display:block; }
}
@media (min-width:961px){ .burger{ display:none; } }
@media (max-width:560px){ .topbar-inner{ padding:14px 20px; } .topbar-cta .btn span.full{ display:none; } }

/* ---------- hero ---------- */
.hero{
  background-image:
    var(--grain-dark),
    var(--contour-dark),
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(54,84,255,.26), transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 8%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(ellipse 80% 65% at 100% 100%, rgba(140,160,255,.13), transparent 55%),
    linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 55%);
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 170px 170px, 360px 170px, auto, auto, auto, auto;
  color: var(--text-light); padding:96px 0 88px; position:relative; overflow:hidden;
}
body.wm-page .hero{
  background-image:
    var(--logo-watermark), var(--grain-dark), var(--contour-dark),
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(54,84,255,.26), transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 8%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(ellipse 80% 65% at 100% 100%, rgba(140,160,255,.13), transparent 55%),
    linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 55%);
  background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-size: auto 100%, 170px 170px, 360px 170px, auto, auto, auto, auto;
}
.hero-grid{ position:relative; display:grid; grid-template-columns: 1.05fr .95fr; gap:64px; align-items:center; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:52px; } }
.hero .eyebrow{ color:#8CA0FF; }
.hero h1{ font-size: clamp(2.2rem, 4.6vw, 3.4rem); max-width: 16ch; }
.hero p.lead{ margin-top:22px; font-size:1.12rem; color: var(--text-light-soft); max-width:48ch; }
.hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-tags{ margin-top:34px; display:flex; gap:10px; flex-wrap:wrap; }
.tag{ border:1px solid var(--line-dark); padding:7px 14px; font-size:.82rem; font-weight:600; color: var(--text-light-soft); border-radius:999px; }
.hero-trust{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 26px; }
.hero-trust span{ display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:500; color: var(--text-light-soft); }
.hero-trust svg{ width:15px; height:15px; flex:none; stroke: var(--accent2); }

/* ---------- browser mockup composition ---------- */
.mock-stack{ position:relative; height: 380px; }
.mock-window{ position:absolute; background: var(--paper); border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.mock-chrome{ height:26px; background: var(--paper-dim); display:flex; align-items:center; gap:6px; padding:0 10px; }
.mock-dot{ width:7px; height:7px; border-radius:50%; background: var(--line-light); }
.mock-body{ padding:16px; display:flex; flex-direction:column; gap:8px; }
.mock-bar{ height:8px; background: var(--line-light); border-radius:2px; }
.mock-bar.accent{ background: var(--accent); width:40%; }
.mock-1{ width:66%; top:0; left:0; z-index:3; }
.mock-1 .mock-body{ height:200px; }
.mock-2{ width:40%; top:60px; right:0; z-index:2; }
.mock-2 .mock-body{ height:250px; }
.mock-3{ width:30%; bottom:0; left:12%; z-index:1; }
.mock-3 .mock-body{ height:150px; }
@media (max-width: 980px){ .mock-stack{ height: 300px; } }

/* ---------- problem cards ---------- */
.grid-5{ display:grid; grid-template-columns: repeat(5,1fr); gap:1px; background: var(--line-light); border:1px solid var(--line-light); margin-top:48px; }
@media (max-width:980px){ .grid-5{ grid-template-columns: repeat(2,1fr); } .grid-5 .problem-card:last-child:nth-child(odd){ grid-column: span 2; } }
@media (max-width:560px){ .grid-5{ grid-template-columns:1fr; } }
.problem-card{ background: var(--paper); padding:28px 24px; }
.problem-card h3{ font-size:1.02rem; margin-bottom:10px; }
.problem-card p{ color: var(--text-dark-soft); font-size:.92rem; }

/* ---------- pillars (3) ---------- */
.pillars-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--line-light); border:1px solid var(--line-light); margin-top:48px; }
@media (max-width:780px){ .pillars-3{ grid-template-columns:1fr; } }
.pillar-3{ background: var(--paper); padding:34px 30px; }
.pillar-3 .label{ font-size:.78rem; font-weight:800; letter-spacing:.06em; color: var(--accent); margin-bottom:12px; }
.pillar-3 p{ font-size:1rem; color: var(--text-dark-soft); }

/* ---------- service cards ---------- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background: var(--line-light); border:1px solid var(--line-light); }
@media (max-width:760px){ .grid-2{ grid-template-columns:1fr; } }
.svc-card{ background: var(--paper); padding:38px 34px; display:flex; flex-direction:column; gap:14px; }
.svc-num{ font-size:.8rem; font-weight:800; color: var(--accent); letter-spacing:.03em; }
.svc-card h3{ font-size:1.35rem; }
.svc-price{ font-family:'Manrope',sans-serif; font-weight:800; font-size:1.3rem; }
.svc-price span{ font-size:.85rem; font-weight:600; color: var(--text-dark-soft); }
.svc-card p.desc{ color: var(--text-dark-soft); font-size:.97rem; }
.svc-list{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px; }
.svc-list li{ display:flex; gap:9px; align-items:flex-start; font-size:.9rem; color: var(--text-dark-soft); }
.svc-list svg{ width:15px; height:15px; margin-top:3px; flex:none; stroke: var(--accent); }
.svc-card .btn{ margin-top:10px; align-self:flex-start; }

/* ---------- portfolio cards ---------- */
.portfolio-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
@media (max-width:700px){ .portfolio-grid{ grid-template-columns:1fr; } }
.portfolio-card{ display:block; background: var(--paper); border:1px solid var(--line-light); border-radius:8px; overflow:hidden; text-decoration:none; color:inherit; transition: transform .2s ease, box-shadow .2s ease; }
.portfolio-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.25); }
.portfolio-visual{ height:190px; overflow:hidden; background: var(--paper-dim); }
.portfolio-visual img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition: transform .35s ease; }
.portfolio-card:hover .portfolio-visual img{ transform: scale(1.035); }
.portfolio-body{ padding:26px 24px 30px; display:flex; flex-direction:column; gap:8px; }
.portfolio-tag{ font-size:.75rem; font-weight:700; letter-spacing:.06em; color: var(--accent); }
.portfolio-body h3{ font-size:1.2rem; margin:2px 0 4px; }
.portfolio-body p{ color: var(--text-dark-soft); font-size:.92rem; }
.portfolio-link{ margin-top:10px; font-size:.88rem; font-weight:700; color: var(--accent); }

/* ---------- loyalty banner ---------- */
.loyalty{ border:1.5px solid var(--accent); background: var(--accent-soft); padding:34px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.loyalty .big{ font-family:'Manrope',sans-serif; font-weight:900; font-size:2.4rem; color: var(--accent-deep); }
.loyalty .label{ font-weight:700; font-size:.95rem; }
.loyalty .sub{ font-size:.85rem; color: var(--text-dark-soft); }

/* ---------- timeline ---------- */
.timeline{ display:grid; grid-template-columns: repeat(5,1fr); gap:28px; margin-top:48px; }
@media (max-width:920px){ .timeline{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .timeline{ grid-template-columns:1fr; } }
.tl-step{ padding-top:22px; border-top:2px solid var(--accent); }
.tl-num{ font-size:.8rem; font-weight:800; color: var(--text-dark-soft); }
.tl-step h3{ font-size:1.02rem; margin:8px 0; }
.tl-step p{ font-size:.9rem; color: var(--text-dark-soft); }
.section-dark .tl-step{ border-top-color:#8CA0FF; }
.section-dark .tl-num{ color: var(--text-light-soft); }
.section-dark .tl-step p{ color: var(--text-light-soft); }

/* ---------- portfolio / concept cards ---------- */
.concept-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:44px; }
@media (max-width:920px){ .concept-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:620px){ .concept-grid{ grid-template-columns:1fr; } }
.concept-card{ border:1px solid var(--line-light); background: var(--paper); overflow:hidden; }
.concept-preview{ background: var(--ink); }
.concept-chrome{ height:24px; display:flex; align-items:center; gap:6px; padding:0 10px; background:#111216; }
.concept-chrome .d{ width:6px; height:6px; border-radius:50%; background:#3a3b3f; flex:none; }
.concept-chrome .url{ flex:1; height:8px; margin-left:6px; border-radius:4px; background:#232329; }

/* mini website mockup inside each concept preview */
.site-mock{ padding:16px 16px 20px; display:flex; flex-direction:column; gap:16px; }
.site-mock-nav{ display:flex; align-items:center; gap:9px; }
.site-mock-logo{ width:14px; height:14px; border-radius:4px; background: var(--mock-accent); flex:none; }
.site-mock-link{ width:24px; height:5px; border-radius:2px; background: rgba(255,255,255,.24); }
.site-mock-btn{ margin-left:auto; width:34px; height:13px; border-radius:3px; background: var(--mock-accent); flex:none; }
.site-mock-hero{ display:flex; align-items:center; gap:14px; }
.site-mock-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.site-mock-h{ height:9px; width:88%; border-radius:2px; background: rgba(255,255,255,.9); }
.site-mock-h.short{ width:60%; }
.site-mock-p{ height:5px; width:70%; border-radius:2px; background: rgba(255,255,255,.28); }
.site-mock-cta{ margin-top:6px; width:52px; height:15px; border-radius:3px; background: var(--mock-accent); }
.site-mock-icon{ width:60px; height:60px; border-radius:12px; background: var(--mock-accent-soft); display:flex; align-items:center; justify-content:center; flex:none; }
.site-mock-icon svg{ width:28px; height:28px; color: var(--mock-accent); }
.concept-body{ padding:22px; }
.concept-tag{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.05em; color: var(--accent-deep); background: var(--accent-soft); padding:4px 10px; margin-bottom:12px; }
.concept-body h3{ font-size:1.08rem; margin-bottom:8px; }
.concept-body p{ font-size:.9rem; color: var(--text-dark-soft); }

/* ---------- pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:48px; align-items:stretch; }
@media (max-width:920px){ .pricing-grid{ grid-template-columns:1fr; } }
.price-card{ border:1.5px solid var(--line-light); background: var(--paper); padding:36px 30px; display:flex; flex-direction:column; }
.price-card.featured{ border-color: var(--ink); }
.price-tier{ font-size:.78rem; font-weight:800; letter-spacing:.08em; color: var(--text-dark-soft); margin-bottom:16px; }
.price-amount{ font-family:'Manrope',sans-serif; font-weight:900; font-size:2.6rem; letter-spacing:-.02em; }
.price-amount .price-currency{ font-size:1rem; font-weight:600; color: var(--text-dark-soft); letter-spacing:0; }
.price-name{ font-weight:700; margin-top:6px; margin-bottom:22px; }
.price-card .svc-list{ flex:1; margin-bottom:24px; }
.price-note{ font-size:.8rem; color: var(--text-dark-soft); margin-top:10px; }

/* ---------- industries ---------- */
.industry-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.industry-chip{ border:1px solid var(--line-light); padding:10px 18px; font-size:.9rem; font-weight:600; }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; }
.faq details{ border-bottom:1px solid var(--line-light); padding:22px 0; }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; font-weight:700; font-size:1.03rem; font-family:'Manrope',sans-serif; }
.faq summary::-webkit-details-marker{ display:none; }
.faq .q{ flex:1; } /* wraps the question text as a single flex item, so an inline price span inside it isn't itself spread apart by justify-content:space-between */
.faq .plus{ flex:none; width:20px; height:20px; position:relative; }
.faq .plus::before, .faq .plus::after{ content:""; position:absolute; background:currentColor; left:50%; top:50%; transform:translate(-50%,-50%); }
.faq .plus::before{ width:14px; height:2px; } .faq .plus::after{ width:2px; height:14px; transition:opacity .15s ease; }
.faq details[open] .plus::after{ opacity:0; }
.faq .a{ margin-top:14px; color: var(--text-dark-soft); max-width:65ch; font-size:.97rem; }

/* ---------- final cta ---------- */
.final-cta{
  background-image:
    var(--grain-dark),
    var(--contour-dark),
    radial-gradient(ellipse 70% 55% at 88% 0%, rgba(54,84,255,.24), transparent 60%),
    radial-gradient(ellipse 55% 50% at 10% 12%, rgba(124,92,255,.16), transparent 55%),
    radial-gradient(ellipse 80% 65% at 0% 100%, rgba(140,160,255,.12), transparent 55%),
    linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 55%);
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 170px 170px, 360px 170px, auto, auto, auto, auto;
  color: var(--text-light);
}
.final-cta h2{ font-size: clamp(2rem,4.2vw,2.9rem); max-width: 20ch; }
.final-cta .btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.final-cta .email-line{ margin-top:22px; font-size:.92rem; color: var(--text-light-soft); }
.final-cta .email-line a{ color: var(--text-light); font-weight:700; }

/* ---------- footer ---------- */
footer{
  background-image:
    var(--grain-dark),
    var(--contour-dark),
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(54,84,255,.12), transparent 60%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-size: 170px 170px, 360px 170px, auto, auto;
  color: var(--text-light-soft); border-top:1px solid var(--line-dark); padding:56px 0 40px;
}
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-brand-col{ display:flex; flex-direction:column; }
.footer-mountain{ flex:1; min-height:130px; margin-top:18px; }
body.wm-page .footer-mountain{
  background-image: var(--logo-watermark);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: auto 100%;
}
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{ display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand .mark{ width:52px; height:52px; display:block; border-radius:50%; filter: drop-shadow(0 2px 12px rgba(54,84,255,.35)); }
.footer-col h4{ font-size:.78rem; font-weight:800; letter-spacing:.05em; color: var(--text-light); margin-bottom:16px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:.92rem; }
.footer-col a:hover{ color: var(--text-light); }
.footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; }

/* ---------- form ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.85rem; font-weight:700; }
.field input, .field select, .field textarea{ border:1.5px solid var(--line-light); background: var(--paper); color: var(--text-dark); padding:13px 14px; font-family:inherit; font-size:.96rem; border-radius: var(--radius); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--accent); }
.field textarea{ resize:vertical; min-height:110px; }
.field-hint{ font-size:.8rem; color: var(--text-dark-soft); }
.form-msg{ margin-top:16px; font-size:.9rem; display:none; color: var(--accent-deep); font-weight:600; }
.form-msg.show{ display:block; }
.form-msg.error{ color:#C0392B; }

/* ---------- mobile sticky cta ---------- */
.mobile-cta{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; padding:13px 18px calc(13px + env(safe-area-inset-bottom,0px)); background: var(--accent); }
.mobile-cta a{ display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-weight:800; font-size:.96rem; font-family:'Manrope',sans-serif; }
@media (max-width:760px){ .mobile-cta{ display:block; } body{ padding-bottom:64px; } }

.small-note{ font-size:.82rem; color: var(--text-dark-soft); margin-top:12px; }
.section-dark .small-note{ color: var(--text-light-soft); }
.small-note svg{ width:14px; height:14px; margin-right:5px; vertical-align:-2px; stroke: var(--accent); flex:none; }
.placeholder-tag{ font-size:.74rem; font-weight:700; color: var(--accent); border:1px dashed var(--line-light); padding:2px 8px; border-radius:3px; }

/* =========================================================
   MOTION LAYER
   1) sticky nav shrink   2) scroll reveal / hero load-in
   3) hover + press feedback (pointer-aware)   4) FAQ smooth open/close
   5) price count-up (JS, see animations.js)
   ========================================================= */

/* ---------- 1. sticky nav: shrink + shadow on scroll ---------- */
.topbar{ transition: box-shadow .3s ease; }
.topbar-inner{ transition: padding .3s ease; }
.topbar.is-scrolled{ box-shadow: 0 10px 30px -18px rgba(0,0,0,.28); }
.topbar.is-scrolled .topbar-inner{ padding-top:11px; padding-bottom:11px; }
.brand .mark{ transition: transform .2s ease, filter .2s ease, width .3s ease, height .3s ease; }
.topbar.is-scrolled .brand .mark{ width:44px; height:44px; }
@media (max-width:640px){ .topbar.is-scrolled .brand .mark{ width:38px; height:38px; } }

/* ---------- 2. scroll reveal (also drives the hero's load-in,
   since the hero sits in the viewport at page load and its
   observer fires immediately) ---------- */
.reveal{
  opacity:0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-group > *{
  opacity:0; transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16,.84,.44,1), transform .6s cubic-bezier(.16,.84,.44,1);
  transition-delay: calc(var(--i, 0) * .07s);
}
.reveal-group.is-visible > *{ opacity:1; transform:none; }
/* no-JS / JS-failed fallback: never leave content invisible */
html.no-js .reveal, html.no-js .reveal-group > *{ opacity:1 !important; transform:none !important; }

/* ---------- 3. hover + press feedback, pointer-aware so touch
   devices (no real hover) get a tap/press state instead ---------- */
.btn{ transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .2s ease; }
.btn:active{ transform: scale(.96); }
/* Boxes (cards, pillars, pricing, chips) no longer lift on hover — they
   light up around their border instead: see "BOX HOVER — border light-up" below. */
.concept-card{ transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease; }
@media (hover:hover) and (pointer:fine){
  .btn-accent:hover{ transform: translateY(-2px); }
  .btn-dark:hover{ transform: translateY(-2px); }
  .concept-card:hover{ transform: translateY(-6px); box-shadow: 0 28px 52px -30px rgba(0,0,0,.32); }
}
@media (hover:none){
  .concept-card:active{ transform: scale(.98); }
}

/* ---------- 4. FAQ smooth open/close (height animated via JS,
   see animations.js — CSS just defines the transition) ---------- */
.faq .a{ overflow:hidden; transition: height .32s cubic-bezier(.16,.84,.44,1), opacity .25s ease; }

/* ---------- 5. count-up target numbers: keep digit width stable ---------- */
[data-price-build], [data-price-monthly], [data-price-existing]{ font-variant-numeric: tabular-nums; }

/* =========================================================
   HERO 3D SCENE ("Relay" layer) — see assets/hero-scene.js
   Progressive enhancement: until the WebGL scene reports
   ready (.hero.scene-ready), the .mock-stack fallback shows.
   ========================================================= */
.hero-visual{ position:relative; }
.hero-scene{ display:none; pointer-events:none; }
.hero-scene canvas{ display:block; }
.hero.scene-ready .hero-scene{ display:block; animation: sceneIn 1.4s ease both; }
.hero.scene-ready .mock-stack{ display:none; }
@keyframes sceneIn{ from{ opacity:0; } to{ opacity:1; } }

/* desktop: canvas bleeds across the whole hero, text column sits above it */
@media (min-width:981px){
  .hero.scene-ready{ min-height: min(760px, calc(100vh - 80px)); display:flex; align-items:center; }
  .hero.scene-ready > .wrap{ width:100%; }
  .hero.scene-ready .hero-grid{ position:static; }
  .hero.scene-ready .hero-grid > div:first-child{ position:relative; z-index:2; }
  .hero.scene-ready .hero-visual{ position:static; min-height:420px; }
  .hero.scene-ready .hero-scene{ position:absolute; inset:0; z-index:1; }
  /* soft veil behind the copy so the grid lines never fight the headline */
  .hero.scene-ready::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(90deg, rgba(27,29,36,.55) 0%, rgba(27,29,36,.25) 32%, transparent 52%);
  }
}
/* tablet / mobile: scene sits in the flow under the copy */
@media (max-width:980px){
  .hero.scene-ready .hero-visual{ margin: -8px -28px -40px; }
  .hero.scene-ready .hero-scene{ position:relative; height: clamp(260px, 52vw, 380px); }
}
@media (max-width:640px){ .hero.scene-ready .hero-visual{ margin: -12px -20px -36px; } }

/* the real 3D mountain replaces the flat watermark in the hero */
body.wm-page .hero.scene-ready{
  background-image:
    var(--grain-dark), var(--contour-dark),
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(54,84,255,.26), transparent 60%),
    radial-gradient(ellipse 55% 50% at 78% 30%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(ellipse 80% 65% at 100% 100%, rgba(140,160,255,.13), transparent 55%),
    linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 55%);
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0;
  background-size: 170px 170px, 360px 170px, auto, auto, auto, auto;
}

/* 4-up variant of .grid-5 (was an inline style that broke the mobile layout) */
.grid-5.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:980px){ .grid-5.grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .grid-5.grid-4{ grid-template-columns: 1fr; } }

/* =========================================================
   HOMEPAGE RIVER + LAKE — see assets/river.js
   The river canvas is fixed to the viewport and sits between
   the section backgrounds and the content: section content
   (.wrap) is lifted above it, so text and cards always stay
   on top and the river flows "underneath" them.
   ========================================================= */
.river-canvas{ position:fixed; inset:0; pointer-events:none; z-index:1; }
body.has-river main > section:not(.hero) > .wrap{ position:relative; z-index:2; }
body.has-river .hero-grid > div:first-child{ position:relative; z-index:2; }

.lake-spot{ display:none; pointer-events:none; }
body.has-river .lake-spot{ display:block; }
@media (min-width:981px){
  body.has-river .final-cta .wrap > :not(.lake-spot){ max-width: min(600px, 50%); }
  body.has-river .final-cta .lake-spot{ position:absolute; right:28px; top:50%; width:40%; height:300px; transform:translateY(-50%); }
}
@media (max-width:980px){
  body.has-river .final-cta .lake-spot{ height:190px; margin:30px -28px -40px; }
}
@media (max-width:640px){
  body.has-river .final-cta .lake-spot{ height:170px; margin:26px -20px -30px; }
}

/* =========================================================
   BOX HOVER — border light-up (site-wide)
   A gradient light traces around the box border and a soft
   glow appears; it untraces on mouse-out.
   Not applied to: portfolio cards (Réalisations page) and the
   SEO chips on the Services page, which keep their own hover.
   ========================================================= */
@property --trace{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
.svc-card, .problem-card, .pillar-3, .price-card{ position:relative; --trace-inset:0px; }
.price-card{ --trace-inset:-1.5px; }
.detail-grid .problem-card{ --trace-inset:-1px; }
.svc-card::after, .problem-card::after, .pillar-3::after, .price-card::after{
  content:""; position:absolute; inset: var(--trace-inset); pointer-events:none; z-index:1;
  padding:1.5px; /* ring thickness */
  background: conic-gradient(from 300deg, var(--accent) 0%, var(--accent2) calc(var(--trace) * .55), #34D5E0 var(--trace), transparent var(--trace));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0;
  transition: --trace .75s cubic-bezier(.65,0,.35,1), opacity .25s ease;
}
/* the glow lives on ::before so the boxes' own scroll-reveal transitions stay untouched */
.svc-card::before, .problem-card::before, .pillar-3::before, .price-card::before{
  content:""; position:absolute; inset: var(--trace-inset); pointer-events:none;
  box-shadow: 0 0 28px -8px rgba(54,84,255,.55), 0 0 0 1px rgba(54,84,255,.12);
  opacity:0; transition: opacity .35s ease;
}
@media (hover:hover){
  .svc-card:hover, .problem-card:hover, .pillar-3:hover, .price-card:hover{ z-index:1; }
  .svc-card:hover::before, .problem-card:hover::before, .pillar-3:hover::before, .price-card:hover::before{ opacity:1; }
  .svc-card:hover::after, .problem-card:hover::after, .pillar-3:hover::after, .price-card:hover::after{ --trace:100%; opacity:1; }
}
/* keyboard users get the same light-up when a card's link/button has focus */
.svc-card:focus-within, .price-card:focus-within{ z-index:1; }
.svc-card:focus-within::before, .price-card:focus-within::before{ opacity:1; }
.svc-card:focus-within::after, .price-card:focus-within::after{ --trace:100%; opacity:1; }

/* Chips/tags (SEO, "Pour qui", "Zone d'intervention"…): a simple blue border + soft glow.
   Drawn on ::before so the scroll-reveal transitions on the chips stay untouched. */
.industry-chip{ position:relative; }
.industry-chip::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  border:1px solid var(--accent); box-shadow: 0 0 16px -4px rgba(54,84,255,.5);
  opacity:0; transition: opacity .25s ease;
}
@media (hover:hover){ .industry-chip:hover::before{ opacity:1; } }

/* ---------- service pages: detail boxes, steps, good-to-know ---------- */
.detail-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:40px; }
@media (max-width:920px){ .detail-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .detail-grid{ grid-template-columns: 1fr; } }
.detail-grid .problem-card{ border:1px solid var(--line-light); padding:28px 26px; }
.detail-grid .problem-card .num{ display:block; font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:800; color: var(--accent); letter-spacing:.04em; margin-bottom:10px; }
.timeline.tl-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:920px){ .timeline.tl-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .timeline.tl-4{ grid-template-columns: 1fr; } }
.know-list{ list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap:14px 36px; }
@media (max-width:700px){ .know-list{ grid-template-columns:1fr; } }
.know-list li{ display:flex; gap:10px; align-items:flex-start; color: var(--text-dark-soft); font-size:.97rem; }
.know-list li strong{ color: var(--text-dark); }
.know-list svg{ width:16px; height:16px; margin-top:4px; flex:none; stroke: var(--accent); }

/* no-WebGL fallback: keep the mockup windows above the river */
body.has-river .hero:not(.scene-ready) .hero-visual{ position:relative; z-index:2; }
/* pricing cards: let the long CTA wrap instead of pushing the 3rd card off-screen (~1000px wide screens) */
.pricing-grid > *{ min-width:0; }
.price-card .btn{ white-space:normal; text-align:center; }

/* ---------- legal articles (Conditions générales) ---------- */
.legal-article{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line-light); }
.legal-article h2{ font-size:1.15rem; display:flex; gap:12px; align-items:baseline; }
.legal-article .legal-num{ color: var(--accent); font-size:.82rem; font-weight:800; min-width:3.4em; font-variant-numeric: tabular-nums; }
.legal-article p{ margin-top:12px; max-width:66ch; }
.legal-article ul{ margin:12px 0 0; padding-left:20px; display:grid; gap:8px; max-width:66ch; }
@media (max-width:480px){ .legal-article h2{ flex-direction:column; gap:2px; } }