:root{
    --navy:#00007E;
    --orange:#FF5500;
    --bg:#f6f6f3;
    --grigiotto:#6b6f76;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:#141417;
  }
  a{ text-decoration:none; }
  .wrap{ max-width:1280px; margin:0 auto; padding:0 56px; }

  /* header */
  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 56px;
    position:sticky;
    top:0;
    background:rgba(246,246,243,0.9);
    backdrop-filter:blur(6px);
    z-index:20;
    border-bottom:1px solid #eaeae5;
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand-word{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; }
  .brand-word span{ color:var(--orange); }
  nav{ display:flex; align-items:center; gap:32px; font-size:14px; font-weight:500; }
  nav a{ color:#141417; }
  .nav-cta{ background:var(--navy); color:#fff !important; padding:9px 18px; border-radius:8px; }
  .tirrena-badge{
    display:flex; align-items:center; gap:8px;
    padding-right:24px; margin-right:8px; border-right:1px solid #dcdcd6;
    font-size:11.5px; color:var(--grigiotto); white-space:nowrap;
  }
  .tirrena-badge img{ height:20px; width:auto; display:block; }
  @media (max-width:1050px){ .tirrena-badge span{ display:none; } .tirrena-badge{ padding-right:14px; margin-right:0; } }

  /* hero */
  .hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
    padding:64px 56px 90px;
    max-width:1280px;
    margin:0 auto;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono',monospace; font-size:12px;
    color:var(--navy); background:#e9e9ff;
    padding:6px 12px; border-radius:20px; margin-bottom:22px;
  }
  .eyebrow::before{ content:''; width:6px;height:6px;border-radius:50%; background:var(--orange); }
  h1{
    font-family:'Space Grotesk',sans-serif; font-size:44px; line-height:1.12;
    font-weight:700; margin:0 0 20px; color:#101018;
  }
  h1 em{ font-style:normal; color:var(--navy); }
  .lead{ font-size:16.5px; color:var(--grigiotto); line-height:1.65; max-width:460px; margin:0 0 32px; }
  .cta-row{ display:flex; gap:14px; }
  .btn{ font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px; padding:13px 24px; border-radius:9px; display:inline-block; }
  .btn-primary{ background:var(--orange); color:#fff; }
  .btn-secondary{ background:transparent; color:var(--navy); border:1.5px solid var(--navy); }

  .stage{ position:relative; height:440px; }
  .app-card{
    position:absolute; width:290px; background:#fff; border-radius:16px;
    border:1px solid #e4e4e0; box-shadow:0 20px 40px -18px rgba(0,0,30,0.18); padding:20px 22px;
  }
  .card-1{ top:10px; left:40px; animation:float1 6s ease-in-out infinite; }
  .card-2{ top:190px; left:150px; animation:float2 7s ease-in-out infinite; }
  .card-3{ top:330px; left:10px; width:200px; opacity:0.55; animation:float3 8s ease-in-out infinite; }
  @keyframes float1{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
  @keyframes float2{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
  @keyframes float3{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  .card-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .icon-box{ width:40px;height:40px; border-radius:10px; display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .card-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14.5px; }
  .card-url{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--grigiotto); }
  .kpi-row{ display:flex; gap:10px; }
  .kpi{ flex:1; background:#f7f7f5; border-radius:8px; padding:8px 10px; }
  .kpi-label{ font-size:10.5px; color:var(--grigiotto); }
  .kpi-value{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; }
  .kpi-value.up{ color:#1a8f5a; }
  .flow-row{ display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--grigiotto); }
  .pill{ background:#f7f7f5; border-radius:20px; padding:4px 10px; }
  .pill.in{ color:var(--navy); background:#e9e9ff; }
  .pill.out{ color:var(--orange); background:#fff1ea; }
  .ghost-label{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--grigiotto); }

  /* sezioni generiche */
  section.block{ padding:80px 56px; }
  .block-inner{ max-width:1280px; margin:0 auto; }
  .section-head{ margin-bottom:44px; max-width:560px; }
  .section-tag{
    font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--orange);
    text-transform:uppercase; letter-spacing:0.6px; margin:0 0 10px;
  }
  h2{ font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; margin:0 0 12px; color:#101018; }
  .section-sub{ color:var(--grigiotto); font-size:15.5px; line-height:1.6; margin:0; }

  /* le nostre app */
  .apps-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
  .app-full-card{
    background:#fff; border:1px solid #e4e4e0; border-radius:18px; padding:32px 28px;
    display:flex; flex-direction:column; gap:18px;
  }
  .app-full-card .icon-box{ width:52px; height:52px; border-radius:12px; }
  .app-full-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; margin:0; }
  .app-full-url{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--grigiotto); margin:2px 0 0; }
  .app-full-desc{ font-size:14.5px; color:var(--grigiotto); line-height:1.6; margin:0; flex-grow:1; }
  .app-full-link{ font-size:14px; font-weight:600; color:var(--navy); display:inline-flex; align-items:center; gap:6px; }
  .app-full-card.ghost{ justify-content:center; align-items:center; text-align:center; border-style:dashed; background:transparent; }
  .app-full-card.ghost .app-full-desc{ flex-grow:0; }

  /* perché */
  .why-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
  .why-card{ padding:0; }
  .why-num{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--orange); margin:0 0 12px; }
  .why-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; margin:0 0 8px; }
  .why-desc{ font-size:14.5px; color:var(--grigiotto); line-height:1.6; margin:0; }

  /* teaser tirrena */
  .teaser{
    background:var(--navy); border-radius:24px; padding:52px 56px;
    display:flex; align-items:center; justify-content:space-between; gap:40px; color:#fff;
  }
  .teaser img.tirrena-mark{ height:34px; width:auto; display:block; margin-bottom:16px; }
  .teaser h3{ font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; margin:0 0 10px; }
  .teaser p{ font-size:14.5px; color:#c7c7e0; max-width:480px; margin:0; line-height:1.6; }
  .teaser .btn-secondary{ border-color:#fff; color:#fff; white-space:nowrap; }

  /* footer */
  footer{ padding:56px 56px 40px; border-top:1px solid #e4e4e0; }
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:36px; }
  .foot-brand-word{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; margin:10px 0 10px; }
  .foot-desc{ font-size:13.5px; color:var(--grigiotto); line-height:1.6; max-width:280px; }
  .foot-col h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--grigiotto); margin:0 0 14px; }
  .foot-col a, .foot-col p{ display:block; font-size:13.5px; color:#141417; margin:0 0 10px; line-height:1.5; }
  .foot-legal{ border-top:1px solid #e4e4e0; padding-top:20px; font-size:12.5px; color:var(--grigiotto); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

  @media (max-width:900px){
    header, .hero, section.block{ padding-left:24px; padding-right:24px; }
    .hero{ grid-template-columns:1fr; }
    .stage{ display:none; }
    .apps-grid, .why-grid, .foot-grid{ grid-template-columns:1fr; }
    .teaser{ flex-direction:column; align-items:flex-start; }
    nav{ display:none; }
  }

/* ============ pagine dedicate app (console-bilancio.html, protocollo.html) ============ */

.breadcrumb{
  max-width:1280px; margin:0 auto; padding:20px 56px 0;
  font-size:13px; color:var(--grigiotto);
}
.breadcrumb a{ color:var(--grigiotto); }
.breadcrumb a:hover{ color:var(--navy); }
.breadcrumb span.current{ color:#141417; }

.page-hero{
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:flex-start;
  max-width:1280px; margin:0 auto; padding:36px 56px 60px;
}
.page-hero .icon-box{
  width:72px; height:72px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.page-hero .icon-box img{ width:38px; height:38px; }
.page-hero-url{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--orange); margin:0 0 10px; }
.page-hero h1{ font-size:38px; margin:0 0 16px; }
.page-hero .lead{ max-width:600px; margin:0 0 28px; }

.feature-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; }
.feature-card{
  background:#fff; border:1px solid #e4e4e0; border-radius:16px; padding:26px 26px;
}
.feature-card .why-num{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--orange); margin:0 0 10px; }
.feature-card .why-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16.5px; margin:0 0 8px; }
.feature-card .why-desc{ font-size:14.5px; color:var(--grigiotto); line-height:1.6; margin:0; }

.audience-band{
  background:#fff; border-top:1px solid #eaeae5; border-bottom:1px solid #eaeae5;
}
.audience-list{ display:flex; flex-wrap:wrap; gap:12px; }
.audience-pill{
  font-size:13.5px; font-weight:500; color:var(--navy);
  background:#e9e9ff; padding:9px 16px; border-radius:20px;
}

.cta-band{
  background:var(--navy); border-radius:24px; padding:52px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; color:#fff;
}
.cta-band h3{ font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; margin:0 0 8px; }
.cta-band p{ font-size:14.5px; color:#c7c7e0; margin:0; }
.cta-band .cta-row{ flex-shrink:0; }
.cta-band .btn-secondary{ border-color:#fff; color:#fff; }

@media (max-width:900px){
  .breadcrumb, .page-hero{ padding-left:24px; padding-right:24px; }
  .page-hero{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
}