/* cybershield — design tokens, base, responsive.
   Tokens/base/keyframes/media queries preserved verbatim from the Claude Design
   prototype so the visual output matches exactly. Production additions
   (hover states, hidden toggles, reduced motion) follow at the end. */

:root{
  --font-display:3.375rem;--font-h1:2.5rem;--font-h2:2.25rem;--font-h3:2rem;--font-h4:1.5rem;--font-lead:1.375rem;--font-body:1.25rem;--font-body-sm:1.125rem;--font-button:1.0625rem;--font-label:1rem;--font-caption:0.875rem;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
  --ink:#181818;--white:#FFFFFF;--primary:#7D66F0;--primary-hover:#AD9EF5;--accent:#11E5B4;--gray-500:#999999;--gray-400:#AAAAAA;--gray-200:#DDDDDD;--gray-100:#EEEEEE;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;
  --radius-sm:5px;--radius-md:15px;--radius-lg:25px;--radius-full:9999px;
  --shadow-sm:0 2px 6px rgba(24,24,24,.08);--shadow-md:0 6px 20px rgba(24,24,24,.12);--focus-ring:0 0 0 3px rgba(125,102,240,.4);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#181818;color:#ffffff;font-family:"source-sans-pro","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:#11E5B4;text-decoration:none;}
a:hover{color:#ffffff;}
[data-r="navlinks"] a{transition:color .2s ease;}
[data-r="navlinks"] a:hover{color:#11E5B4 !important;}
[data-r="navlinks"] a[data-active="true"]{color:#11E5B4 !important;}
::selection{background:#11E5B4;color:#181818;}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-16px) rotate(1deg);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes popin{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
/* ---- responsive ---- */
@media (max-width:1024px){
  /* Hero: title/tag at the top, start-call CTA pinned at the bottom (text above,
     arrow below), animated crystal anchored behind. */
  [data-r="herosection"]{align-items:center !important;text-align:center !important;justify-content:flex-start !important;padding-top:clamp(28px,9vw,64px) !important;}
  [data-r="startcall"]{position:absolute !important;bottom:clamp(48px,10vw,84px) !important;left:50% !important;transform:translateX(-50%) !important;flex-direction:column-reverse !important;}
  [data-r="startcall"] > div{text-align:center !important;}
  [data-r="heroglow"]{display:block !important;}
  [data-r="heroright"]{position:absolute !important;top:auto !important;left:0 !important;right:0 !important;bottom:36px !important;width:auto !important;height:42vh !important;z-index:0 !important;margin:0 !important;padding:0 !important;}
  [data-r="herocrystalglow"]{left:50% !important;}
  [data-r="crystalfallback"]{justify-content:center !important;padding-right:0 !important;}
  [data-r="herotitle"]{justify-content:center !important;padding-left:0 !important;font-size:clamp(1.6rem,8.5vw,2.8rem) !important;}
  [data-r="herotag"]{margin-top:0 !important;}
  [data-r="pgrow"]{grid-template-columns:1fr !important;gap:24px !important;}
  [data-r="navlinks"],[data-r="applytop"]{display:none !important;}
  [data-r="hamburger"]{display:inline-flex !important;}
  /* Floating full-width CTA: detached from the edges, generous vertical padding.
     Hidden over the hero; app.js reveals it when #programma enters the viewport. */
  [data-r="applymobile"]{display:block !important;left:14px !important;right:14px !important;bottom:14px !important;width:auto !important;border-radius:14px !important;padding:20px !important;box-shadow:0 8px 28px rgba(0,0,0,.45) !important;opacity:0;transform:translateY(calc(100% + 14px));pointer-events:none;transition:opacity .3s ease,transform .3s ease;}
  [data-r="applymobile"][data-visible="true"]{opacity:1;transform:none;pointer-events:auto;}
  [data-r="cookiefab"]{bottom:96px !important;}
  footer{padding-bottom:96px !important;}
  [data-r="areetec"]{grid-template-columns:1fr 1fr !important;gap:clamp(28px,4vw,48px) !important;}
  [data-r="percorso"]{grid-template-columns:1fr !important;gap:36px !important;}
  [data-r="percorsohead"]{position:static !important;}
  [data-r="promotori"]{grid-template-columns:1fr 1fr !important;}
  [data-r="condrow"]{grid-template-columns:200px 1fr !important;gap:32px !important;}
}
/* Tablet portrait (641–1024px): the phone layout leaves a huge empty band
   between the badge and the bottom-anchored crystal, and the 200px condrow
   label column clips long single words ("caratteristiche") at the larger
   type scale. Scale the title up, let the crystal band fill more of the
   viewport, and widen the label column. */
@media (min-width:641px) and (max-width:1024px){
  [data-r="herosection"]{padding-top:clamp(48px,10vw,84px) !important;padding-bottom:clamp(28px,6vw,48px) !important;}
  [data-r="herotitle"]{font-size:clamp(2.6rem,7.5vw,4.1rem) !important;}
  [data-r="heroright"]{height:60vh !important;bottom:0 !important;}
  [data-r="heroglow"]{width:min(880px,120%) !important;bottom:-8% !important;}
  [data-r="startcall"]{position:relative !important;bottom:auto !important;margin-top:auto !important;}
  [data-r="condrow"]{grid-template-columns:300px 1fr !important;gap:24px !important;}
}
@media (max-width:640px){
  [data-r="promotori"]{grid-template-columns:1fr !important;}
  [data-r="areetec"]{grid-template-columns:1fr !important;}
  [data-r="condrow"]{grid-template-columns:1fr !important;gap:18px !important;}
  [data-r="footerbar"]{flex-direction:column !important;align-items:flex-start !important;gap:26px !important;}
  [data-r="startcall"]{flex-wrap:nowrap !important;width:auto !important;height:auto !important;gap:16px !important;}
  [data-r="pgcards"]{grid-template-columns:1fr !important;}
}

/* ---- production additions ---- */

/* Toggle helper: beats inline `display:flex` on the modal / mobile-menu overlays. */
[hidden]{display:none !important;}

/* Hover states ported from the prototype's `style-hover` attributes.
   !important is required to override the elements' inline base styles. */
.btn-apply{transition:background .2s ease;}
.btn-apply:hover{background:#3aecc4 !important;}
/* Call not open yet: the apply CTAs stay visible as a "Coming soon" status
   chip, so the mint fill on hover must not fire and imply they are clickable. */
.btn-apply[disabled]:hover{background:rgba(17,229,180,.12) !important;}
[data-r="applymobile"][disabled]:hover{background:rgba(24,24,24,.97) !important;}
.btn-purple{transition:background .2s ease;}
.btn-purple:hover{background:#AD9EF5 !important;}
.hero-scroll-btn{transition:background .2s ease,border-color .2s ease;}
.hero-scroll-btn:hover{background:rgba(255,255,255,.08) !important;border-color:#11E5B4 !important;}
.benefit-nav{transition:border-color .2s ease,color .2s ease;}
.benefit-nav:hover{border-color:#11E5B4 !important;color:#11E5B4 !important;}
.footer-privacy{transition:background .2s ease,color .2s ease;}
.footer-privacy:hover{background:rgba(255,255,255,.14) !important;}
.faq-toggle{transition:color .2s ease;}
.faq-toggle:hover{color:#11E5B4 !important;}
.menu-link{transition:color .2s ease;}
.menu-link:hover{color:#11E5B4 !important;}

/* Focus visibility for keyboard users (prototype relied on defaults). */
a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px;}

/* Reduced motion: the prototype had no fallback. Kill the infinite/entrance
   animations and instant-scroll instead. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  [data-r="follow-crystal"]{display:none !important;}
}