/* ITKMV Premium UI layer — design refresh, October 2026.
   Intentionally additive: keeps existing content, forms, calculator and theme support. */
:root {
  --premium-ease: cubic-bezier(.2,.8,.2,1);
  --premium-spring: cubic-bezier(.18,1,.32,1);
  --premium-radius: 1.5rem;
  --premium-line: rgba(20, 43, 73, .10);
  --premium-shadow: 0 18px 54px rgba(7, 20, 39, .075);
}

html { scroll-padding-top: 6rem; }
body { letter-spacing: -.006em; }
::selection { background: rgba(255, 122, 26, .24); }

/* Consistent section rhythm and calmer surfaces */
main > section { isolation: isolate; scroll-margin-top: 5.5rem; }
main > section:not(:first-child) { position: relative; }
main > section:not(.bg-aurora)::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 8% 0%, rgba(42,79,135,.035), transparent 36%),
              radial-gradient(ellipse at 95% 75%, rgba(255,122,26,.025), transparent 34%);
}
.dark main > section:not(.bg-aurora)::before {
  background: radial-gradient(ellipse at 8% 0%, rgba(61,130,220,.08), transparent 38%),
              radial-gradient(ellipse at 95% 75%, rgba(255,122,26,.035), transparent 36%);
}

/* Slim scroll progress with a warm-to-cool highlight */
#scroll-progress {
  width: 100% !important; height: 3px; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, #ff7a1a 0%, #ffb36f 42%, #8ec5ff 100%);
  box-shadow: 0 0 14px rgba(255,122,26,.22);
  transition: none; will-change: transform;
}

/* Header: crisp glass, more deliberate active states */
#site-header {
  border-bottom-color: rgba(255,255,255,.08);
  transition: background-color .32s var(--premium-ease), box-shadow .32s var(--premium-ease),
              border-color .32s var(--premium-ease), backdrop-filter .32s ease;
}
#site-header[data-scrolled="1"] {
  background: rgba(255,255,255,.84) !important;
  border-bottom-color: rgba(15,35,60,.08) !important;
  box-shadow: 0 8px 35px rgba(8,20,39,.075) !important;
  backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35);
}
.dark #site-header[data-scrolled="1"] {
  background: rgba(6,17,31,.82) !important; border-bottom-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.2) !important;
}
#site-header > div { transition: height .28s var(--premium-ease); }
#site-header.header-compact > div { height: 4rem; }
#site-header .nav-link { position: relative; border-radius: 999px; transition: color .2s ease, background .2s ease; }
#site-header .nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  border-radius: 3px; background: #ff7a1a; transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--premium-spring); opacity: .9;
}
#site-header .nav-link:hover::after, #site-header .nav-link[aria-current="page"]::after { transform: scaleX(1); }
#site-header .nav-link[aria-current="page"] { color: #d95e09; background: rgba(255,122,26,.055); }
.dark #site-header .nav-link[aria-current="page"] { color: #ffb27c; background: rgba(255,122,26,.09); }
#site-header a:focus-visible, #site-header button:focus-visible { outline: 3px solid rgba(255,122,26,.5); outline-offset: 3px; }

/* Main hero: richer atmosphere without heavy image assets */
main > section.bg-aurora:first-child { overflow: clip; }
main > section.bg-aurora:first-child::before {
  content: ""; position: absolute; z-index: 0; inset: -25% -10%; pointer-events: none;
  background: radial-gradient(ellipse at var(--pointer-x, 72%) var(--pointer-y, 35%), rgba(255,122,26,.16), transparent 33%),
              radial-gradient(ellipse at 18% 78%, rgba(63,139,229,.18), transparent 38%);
  opacity: .9; transition: opacity .5s ease;
}
main > section.bg-aurora:first-child > .relative { z-index: 1; }
main > section.bg-aurora:first-child h1 { text-wrap: balance; letter-spacing: -.045em; }
main > section.bg-aurora:first-child h1 .text-gradient-brand {
  background: linear-gradient(100deg, #ff8b38 0%, #ffc087 45%, #fff1e5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 5px 20px rgba(255,122,26,.14));
}
main > section.bg-aurora:first-child .glass {
  background: linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
  border-color: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 45px rgba(0,0,0,.08);
}
main > section.bg-aurora:first-child .rounded-\[1\.75rem\] {
  box-shadow: 0 30px 90px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.035);
}
main > section.bg-aurora:first-child .bg-grid { opacity: .27; }
.hero-phone-card { box-shadow: 0 28px 65px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.06); }
.hero-phone-card:hover { animation-play-state: paused; }

/* Heading and body typography */
h2 { letter-spacing: -.035em; text-wrap: balance; }
h3 { letter-spacing: -.022em; text-wrap: balance; }
.eyebrow {
  border-color: rgba(255,122,26,.23); background: linear-gradient(135deg, rgba(255,122,26,.09), rgba(255,122,26,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5); letter-spacing: .12em;
}
.dark .eyebrow { box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.text-gradient-brand {
  background-image: linear-gradient(100deg, #e96e12 0%, #ff9d55 52%, #f5b77c 100%);
  -webkit-background-clip: text; background-clip: text;
}
.dark .text-gradient-brand { background-image: linear-gradient(100deg, #ff9a52 0%, #ffbf8e 52%, #ffe0c3 100%); }

/* Card surfaces, with an understated border glow on hover */
.gradient-border, .feature-card, .case-card, .review-card {
  border-color: rgba(17,43,74,.105);
  box-shadow: 0 8px 24px rgba(8,20,39,.035);
  transition: transform .42s var(--premium-spring), box-shadow .42s var(--premium-ease), border-color .28s ease, background-color .28s ease;
}
.dark .gradient-border, .dark .feature-card, .dark .case-card, .dark .review-card { border-color: rgba(255,255,255,.09); }
.gradient-border:hover, .feature-card:hover, .case-card:hover {
  border-color: rgba(255,122,26,.28); box-shadow: 0 20px 55px rgba(8,20,39,.105);
}
.dark .gradient-border:hover, .dark .feature-card:hover, .dark .case-card:hover { box-shadow: 0 24px 65px rgba(0,0,0,.23); }
#services article > div { overflow: hidden; isolation: isolate; }
#services article > div::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--card-x, 50%) var(--card-y, 35%), rgba(255,122,26,.09), transparent 42%);
  transition: opacity .35s ease;
}
#services article > div:hover::after { opacity: 1; }
.feature-card { border-radius: 1.5rem; }
.feature-card::before {
  content: ""; position: absolute; width: 9rem; height: 9rem; right: -4rem; top: -4rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,26,.10), transparent 68%); opacity: .3; transition: transform .6s var(--premium-spring), opacity .3s ease;
}
.feature-card:hover::before { transform: scale(1.6); opacity: .8; }
.feature-num { letter-spacing: .16em; }
.case-visual { position: relative; isolation: isolate; }
.case-visual::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.1) 48%, transparent 72%);
  transform: translateX(-120%); transition: transform .8s var(--premium-ease);
}
.case-card:hover .case-visual::before { transform: translateX(120%); }
.case-card:hover .case-visual { background-position: 54% 44%; }
.review-card { transition: transform .35s var(--premium-spring), border-color .25s ease, box-shadow .3s ease; }
.review-card:hover { transform: translateY(-3px); border-color: rgba(255,122,26,.22); box-shadow: 0 14px 34px rgba(8,20,39,.065); }

/* Buttons: tactile press and a very short specular sweep */
.shine { position: relative; overflow: hidden; isolation: isolate; }
.shine::after {
  content: ""; position: absolute; z-index: -1; top: -80%; bottom: -80%; left: -45%; width: 24%;
  transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transition: left .75s var(--premium-ease); pointer-events: none;
}
.shine:hover::after { left: 130%; }
a[class*="bg-brand-600"], button[class*="bg-brand-600"], .floating-cta {
  box-shadow: 0 10px 28px rgba(255,122,26,.2); transition: transform .24s var(--premium-spring), box-shadow .28s ease, filter .25s ease;
}
a[class*="bg-brand-600"]:hover, button[class*="bg-brand-600"]:hover { filter: saturate(1.08); box-shadow: 0 15px 34px rgba(255,122,26,.28); }
a[class*="bg-brand-600"]:active, button[class*="bg-brand-600"]:active { transform: translateY(1px) scale(.985); }
.floating-cta { background-image: linear-gradient(110deg, #f8791c, #ff913e); }
.floating-cta-pulse { animation: premium-pulse 2.3s ease-out infinite; }
@keyframes premium-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.28); } 75%,100% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }

/* Forms: better clarity and visible keyboard focus */
/*#contact form { border-radius: 1.75rem; box-shadow: 0 28px 75px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.65); }*/
/*.dark #contact form { box-shadow: 0 28px 75px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.035); }*/
input, textarea, select { border-radius: .9rem; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline-color: rgba(255,122,26,.7); outline-offset: 2px;
}
#contact input:focus, #contact textarea:focus, #contact select:focus {
  border-color: rgba(255,122,26,.65); box-shadow: 0 0 0 4px rgba(255,122,26,.105); transform: none;
}
.service-chip { transition: transform .22s var(--premium-spring), box-shadow .22s ease, background-color .22s ease, border-color .22s ease; }
.service-chip:active { transform: scale(.97); }

/* Calculator visual hierarchy */
.calculator-shell { border-radius: 2rem; box-shadow: 0 30px 85px rgba(8,20,39,.105); }
.calc-service { transition: transform .28s var(--premium-spring), border-color .22s ease, box-shadow .22s ease, background-color .22s ease; }
.calc-service.active { box-shadow: 0 10px 28px rgba(255,122,26,.11), inset 0 0 0 1px rgba(255,122,26,.07); }
.calc-range-field { transition: border-color .22s ease, background-color .22s ease; }
.calc-range-field:focus-within { border-color: rgba(255,122,26,.48); }
.calculator-result { position: relative; overflow: hidden; }
.calculator-result::after {
  content: ""; position: absolute; width: 20rem; height: 20rem; right: -11rem; bottom: -11rem; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.075); box-shadow: 0 0 0 24px rgba(255,255,255,.018), 0 0 0 48px rgba(255,255,255,.012); pointer-events: none;
}

/* Process line animates in as the section is revealed */
#proc-grad { opacity: .85; }
#process article { transition-delay: 0ms; }
#process article:hover { transform: translateY(-5px); }

/* Scroll-in motion: blur is intentionally subtle and removed after entry */
.reveal { filter: blur(3px); transition-property: opacity, transform, filter; transition-duration: .72s; transition-timing-function: var(--premium-spring); }
.reveal.is-visible { filter: blur(0); }
#services .reveal, #benefits .reveal, #why .reveal, #cases .reveal, #process .reveal { will-change: opacity, transform; }

/* Small details for mobile and touch */
#mobile-menu { border-radius: 0 0 1.25rem 1.25rem; }
#mobile-menu a { transition: background-color .2s ease, color .2s ease, transform .2s var(--premium-spring); }
#mobile-menu a:active { transform: scale(.99); }
.mobile-bottom-cta { box-shadow: 0 -8px 32px rgba(8,20,39,.06); }
.privacy-notice { border-radius: 1.1rem !important; }

@media (hover: hover) and (pointer: fine) {
  #services article > div:hover { transform: translateY(-5px); }
  .feature-card:hover { transform: translateY(-5px); }
  .case-card:hover { transform: translateY(-5px); }
}
@media (max-width: 767px) {
  html { scroll-padding-top: 5rem; }
  main > section { scroll-margin-top: 4.75rem; }
  main > section.bg-aurora:first-child h1 { letter-spacing: -.04em; }
  #contact form { border-radius: 1.4rem; }
  .floating-cta { box-shadow: 0 8px 25px rgba(255,122,26,.25); }
}
@media (max-width: 420px) {
  main > section.bg-aurora:first-child h1 { font-size: clamp(2rem, 10vw, 2.5rem); }
  .floating-cta { min-height: 3rem; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .floating-cta-pulse { animation: none !important; }
}

/* A persistent bottom action bar already exists on tablets/phones; avoid two CTAs colliding. */
@media (max-width: 1023px) {
  .floating-cta { display: none !important; }
}