/* ============================================================
   FRASASSI — shared styles (all pages)
   Identity: survey/expedition map-sheet. Green→blue gradient
   from the logo mark. Sora display / IBM Plex Sans body /
   IBM Plex Mono coordinates.
   ============================================================ */

:root{
  --ink:#0b1f2e; --muted:#4a6271; --paper:#f6faf8; --card:#ffffff;
  --emerald:#2bb673; --ocean:#1f6fd6; --deep:#0c3354; --night:#081f33;
  --line:#dce9e2; --grid:#e9f2ec;
  --grad:linear-gradient(100deg,var(--emerald),var(--ocean));
  --radius:16px;
  --shadow:0 12px 36px rgba(12,51,84,.09);
  --shadow-lg:0 24px 60px rgba(12,51,84,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'IBM Plex Sans',sans-serif;color:var(--ink);background:var(--paper);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Sora',sans-serif;line-height:1.12;letter-spacing:-.022em}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.mono{font-family:'IBM Plex Mono',monospace}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ocean);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:30px;height:1px;background:linear-gradient(90deg,var(--emerald),var(--ocean))}

section{padding:104px 0;position:relative}
section h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:16px 0 14px}
.lede{color:var(--muted);max-width:640px;font-size:1.08rem}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Sora',sans-serif;font-weight:600;
  font-size:.95rem;padding:14px 28px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease;position:relative;overflow:hidden}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(31,111,214,.3)}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 34px rgba(31,111,214,.38)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .6s ease}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ocean);color:var(--ocean);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-3px)}
:is(.btn,a,input,textarea,select,summary):focus-visible{outline:3px solid var(--emerald);outline-offset:3px}

/* ---------- scroll-reveal animation system ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.32,1)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.32,1)}
.rv-r{opacity:0;transform:translateX(40px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.32,1)}
.rv-l.in,.rv-r.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){
  .rv,.rv-l,.rv-r{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* ---------- nav ---------- */
nav.main{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease}
nav.main.scrolled{background:rgba(246,250,248,.88);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:flex;align-items:center;gap:11px;font-family:'Sora',sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.logo img{height:38px;width:auto;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.logo:hover img{transform:rotate(-12deg) scale(1.08)}
.nav-links{display:flex;gap:34px;font-weight:500;font-size:.94rem}
.nav-links a{position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--grad);transition:width .25s ease;border-radius:2px}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:flex;gap:12px;align-items:center}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.3s}
@media(max-width:920px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:block}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:78px;left:0;right:0;background:var(--paper);
    padding:28px;gap:20px;box-shadow:var(--shadow-lg);border-top:1px solid var(--line)}
}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:170px 0 70px;background:
  radial-gradient(700px 360px at 85% -10%,rgba(43,182,115,.12),transparent 60%),
  radial-gradient(700px 360px at 10% 0%,rgba(31,111,214,.10),transparent 60%)}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin:16px 0 14px;max-width:760px}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---------- product screenshot frames ---------- */
.shot{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .35s cubic-bezier(.22,.8,.32,1),box-shadow .35s ease;will-change:transform}
.shot:hover{transform:translateY(-8px) rotate(-.5deg);box-shadow:var(--shadow-lg)}
.shot svg{display:block;width:100%;height:auto}
/* Raster screenshots must render FLAT — a 3D-composited layer glitches the
   image colors when the browser re-rasterizes on zoom. */
.shot--flat{transform-style:flat;perspective:none}
.shot--flat:hover{transform:translateY(-8px)}
.shot--flat img{display:block;width:100%;height:auto;transform:translateZ(0);backface-visibility:hidden}

/* ---------- footer ---------- */
footer{background:var(--night);color:#a9c6dd;padding:74px 0 36px;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;opacity:.07;
  background-image:radial-gradient(circle at 1px 1px,#7fd6a8 1px,transparent 0);background-size:34px 34px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;position:relative}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}}
footer h4{color:#fff;font-size:.95rem;margin-bottom:16px}
footer a{display:block;font-size:.92rem;margin-bottom:9px;transition:color .2s,transform .2s}
footer a:hover{color:#7fd6a8;transform:translateX(3px)}
.foot-bottom{border-top:1px solid #16456b;margin-top:48px;padding-top:24px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:#6d96b6;position:relative}

/* ---------- CTA band ---------- */
.cta-band{background:var(--night);border-radius:26px;padding:70px 60px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-band::before,.cta-band::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:orbit 14s ease-in-out infinite alternate}
.cta-band::before{width:340px;height:340px;background:var(--emerald);top:-160px;left:-100px}
.cta-band::after{width:340px;height:340px;background:var(--ocean);bottom:-160px;right:-100px;animation-delay:-7s}
@keyframes orbit{from{transform:translate(0,0) scale(1)}to{transform:translate(50px,30px) scale(1.18)}}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:14px}
.cta-band p{color:#b9d2e6;max-width:520px;margin:0 auto 30px}
@media(max-width:680px){.cta-band{padding:48px 26px}}

/* ---------- chat widget (floating, all pages) ---------- */
#fab-chat{position:fixed;bottom:26px;right:26px;z-index:90;width:62px;height:62px;border-radius:50%;
  background:var(--grad);border:0;cursor:pointer;box-shadow:0 12px 30px rgba(31,111,214,.45);
  display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
#fab-chat:hover{transform:scale(1.1) rotate(-6deg)}
#fab-chat svg{width:28px;height:28px;fill:#fff}
#fab-chat .ping{position:absolute;inset:0;border-radius:50%;border:2px solid var(--emerald);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.55);opacity:0}}
#chat-panel{position:fixed;bottom:104px;right:26px;z-index:90;width:min(380px,calc(100vw - 32px));
  background:var(--night);border:1px solid #1b4a72;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px rgba(8,31,51,.5);transform:translateY(16px) scale(.96);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,.8,.32,1),opacity .3s ease}
#chat-panel.open{transform:none;opacity:1;pointer-events:auto}
.chat-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid #1b4a72;
  font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:#9cc3e2}
.dot{width:9px;height:9px;border-radius:50%;background:var(--emerald);box-shadow:0 0 10px var(--emerald);animation:blink 2.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.45}}
.chat-body{padding:18px;display:flex;flex-direction:column;gap:12px;height:300px;overflow-y:auto;scroll-behavior:smooth}
.msg{max-width:86%;padding:11px 15px;border-radius:14px;font-size:.9rem;line-height:1.5;
  animation:msgin .35s cubic-bezier(.22,.8,.32,1)}
@keyframes msgin{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.msg.bot{background:#10395e;color:#dceeff;border-bottom-left-radius:4px;align-self:flex-start}
.msg.user{background:var(--grad);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.typing span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7fb4dd;margin:0 2px;animation:tb 1.1s infinite}
.msg.typing span:nth-child(2){animation-delay:.15s}.msg.typing span:nth-child(3){animation-delay:.3s}
@keyframes tb{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.chat-input{display:flex;border-top:1px solid #1b4a72}
.chat-input input{flex:1;background:transparent;border:0;padding:15px 18px;color:#fff;font-family:inherit;font-size:.92rem}
.chat-input input::placeholder{color:#6f97b8}
.chat-input input:focus{outline:none}
.chat-input button{background:var(--grad);border:0;color:#fff;padding:0 22px;font-weight:600;cursor:pointer;font-family:'Sora',sans-serif}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card);padding:18px 0}
.marquee-track{display:flex;gap:64px;width:max-content;animation:scrollx 30s linear infinite;font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--muted);white-space:nowrap}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.marquee-track b{color:var(--emerald)}

/* ---------- v2.1 enhancements ---------- */
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:99;box-shadow:0 0 10px rgba(43,182,115,.5)}
::selection{background:rgba(43,182,115,.25)}
.grad-text{background-size:200% 100%;animation:shimmer 6s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.shot:not(.shot--flat),.cs{transform-style:preserve-3d;perspective:900px}
.shot.tilting{transition:none}
@media(prefers-reduced-motion:reduce){.grad-text{animation:none}}