/* Incify — landing page
   Desktop (>= 1100px) reproduces the 1920×1080 Figma frames 1:1: every value
   below is in design pixels and scaled by --u (1 design px = 1/1920 of the width).
   Below 1100px the same assets are re-laid out as a stacked mobile page. */

:root {
  --gray: #717171;
  --ink: #1d1d1d;
  --hl: #e6e4de;
  --hl-warm: #efeae0;
  --light: #e6e4dd;
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --u: calc(100cqw / 1920);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Alpha curve of the Figma white fade (sampled from the design file) */
  --fade-stops: #fff 0%, #fff 30%, rgba(255,255,255,.984) 35%, rgba(255,255,255,.949) 40%, rgba(255,255,255,.882) 45%,
    rgba(255,255,255,.784) 50%, rgba(255,255,255,.659) 55%, rgba(255,255,255,.51) 60%, rgba(255,255,255,.369) 65%,
    rgba(255,255,255,.237) 70%, rgba(255,255,255,.137) 75%, rgba(255,255,255,.064) 80%, rgba(255,255,255,.021) 85%, rgba(255,255,255,0) 90%;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: var(--gray);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

h1, h2, h3, p, ul { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul { list-style: none; }
strong { font-weight: 700; }
a { color: inherit; text-decoration: none; }
img, video, svg, canvas { display: block; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: #fff;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Highlighted text, as in the design */
.hl {
  background: var(--hl);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl--warm { background: var(--hl-warm); }

.deck { container-type: inline-size; }

.slide {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.deco { position: absolute; max-width: none; pointer-events: none; user-select: none; }

.fade { position: absolute; pointer-events: none; }
.fade--up { background: linear-gradient(to top, var(--fade-stops)); }

.card {
  overflow: hidden;
  background: #fff;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.card video,
.card canvas { width: 100%; height: 100%; object-fit: cover; }

.dots i {
  position: absolute;
  border-radius: 50%;
  background: #fff;
}

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--gray);
  transition: opacity 0.4s var(--ease), color 0.3s var(--ease);
}
.nav.is-light { color: var(--light); }
.nav__logo svg { width: 100%; height: auto; aspect-ratio: 748 / 325; }

.nav__toggle {
  display: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav__burger,
.nav__burger::before {
  display: block;
  width: 26px;
  height: 1.5px;
  margin: 0 auto;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.nav__burger { transform: translateY(-4px); }
.nav__burger::before { content: ""; transform: translateY(8px); }
.nav__toggle[aria-expanded="true"] .nav__burger { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger::before { transform: rotate(-90deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  padding: 96px 24px calc(48px + env(safe-area-inset-bottom));
  background: #f4dcd3 url("/assets/bg.webp") center / cover no-repeat;
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__links { display: grid; gap: 10px; }
.menu__links a {
  font-size: clamp(30px, 8.5vw, 48px);
  line-height: 1.15;
  color: var(--gray);
}

/* ---------- Reveal ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================
   DESKTOP — 1:1 with the Figma frames
   ========================================================= */
@media (min-width: 1100px) {
  .slide { aspect-ratio: 16 / 9; }

  .t {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    font-size: calc(var(--fs) * var(--u));
    line-height: calc(var(--lh, var(--fs)) * var(--u));
    white-space: nowrap;
  }
  .deco,
  .card,
  .fade {
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
  }
  .card { position: absolute; border-radius: calc(70 * var(--u)); }

  /* Highlights are separate rectangles behind the text, as drawn in Figma */
  .hl,
  .hl--warm { background: none; }
  .hlb {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
    background: var(--hl);
  }
  .hlb--warm { background: var(--hl-warm); }

  /* Nav */
  .nav { height: calc(110 * var(--u)); }
  .nav.is-hidden { opacity: 0; pointer-events: none; }
  .nav__logo {
    position: absolute;
    left: calc(43 * var(--u));
    top: calc(31 * var(--u));
    width: calc(161 * var(--u));
  }
  .nav__links a {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(53.4 * var(--u));
    font-size: max(calc(24 * var(--u)), 13px);
    line-height: calc(24 * var(--u));
    white-space: nowrap;
  }
  .nav__links a::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 3px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }
  .nav__links a:hover::after { transform: scaleX(1); }
  .menu { display: none !important; }

  /* 1 · Hero */
  .s1-disc { --x: -318.52; --y: -110; --w: 2427.88; --h: 1414; }
  .s1-logo {
    position: absolute;
    left: calc(168 * var(--u));
    top: calc(427 * var(--u));
    width: calc(523 * var(--u));
  }
  .s1-logo svg { width: 100%; height: auto; aspect-ratio: 748 / 325; }
  .s1-tag { --x: 808; --y: 534.9; --fs: 21; font-size: max(calc(21 * var(--u)), 12px); }

  /* 2 · Formulazione */
  .s2-discL { --x: -766; --y: -53.5; --w: 1868.13; --h: 1088; transform: rotate(90deg); }
  .s2-discR { --x: 818; --y: 100.4; --w: 1868.13; --h: 1088; transform: rotate(-90deg); }
  .s2-fade { --x: 0; --y: 688.3; --w: 1920; --h: 533.33; }
  .s2-card { --x: 1077; --y: 346; --w: 387; --h: 387; }
  .s2-title { --x: 155; --y: 269.9; --fs: 135; }
  .s2-sub { --x: 163; --y: 404.3; --fs: 45; }
  .s2-body { --x: 161; --y: 564; --fs: 32; --lh: 41; }
  .s2-body .hl { padding: calc(1 * var(--u)) calc(2 * var(--u)) calc(1.6 * var(--u)) calc(7 * var(--u)); }

  /* 3 · Tools */
  .s3-viso img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(1382 * var(--u));
    max-width: none;
    z-index: -1;
  }
  .s3-fade { --x: 0; --y: 688.3; --w: 1920; --h: 533.33; }
  .dots i {
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(15 * var(--u));
    height: calc(15 * var(--u));
  }
  .tool__name,
  .tool__desc {
    translate: -50% 0;
    text-align: center;
    color: var(--ink);
  }
  .tool__name { --fs: 24; font-weight: 700; text-transform: uppercase; }
  .tool__desc { font-size: max(calc(var(--fs) * var(--u)), 12px); }
  .tool__desc .hl { padding: calc(3 * var(--u)) calc(6 * var(--u)); }
  .tool--deform .tool__name { --x: 252.95; --y: 459.4; }
  .tool--deform .tool__desc { --x: 252.95; --y: 514.7; --fs: 19; --lh: 23; }
  .tool--refine .tool__name { --x: 683.95; --y: 610.4; }
  .tool--refine .tool__desc { --x: 683.95; --y: 638.8; --fs: 20; --lh: 30; }
  .tool--recipe .tool__name { --x: 1099.45; --y: 802.4; }
  .tool--recipe .tool__desc { --x: 1099.45; --y: 830.8; --fs: 20; --lh: 30; }
  .tool--ingr .tool__name { --x: 1669; --y: 755.4; }
  .tool--ingr .tool__desc { --x: 1671.35; --y: 783.8; --fs: 20; --lh: 30; }

  /* 4 · Marketing Suite */
  .s4-sphere { --x: 1442; --y: 67; --w: 952; --h: 952; }
  .s4-disc { --x: 165.12; --y: 898; --w: 1548.76; --h: 902; }
  .s4-title { --x: 178; --y: 156.1; --fs: 65; }
  .s4-lead { --x: 168; --y: 222.1; --fs: 40; --lh: 49; }
  .s4-lead .hl { padding: 0 calc(16 * var(--u)) calc(13 * var(--u)) calc(10 * var(--u)); }
  .item {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
    background: var(--hl);
  }
  .item p {
    position: relative;
    left: calc(var(--tx) * var(--u));
    top: calc(var(--ty) * var(--u));
    font-size: calc(28 * var(--u));
    line-height: calc(30 * var(--u));
    white-space: nowrap;
  }
  .i-story { --x: 168; --y: 418; --w: 442; --h: 61; --tx: -2; --ty: -1.1; }
  .i-review { --x: 168; --y: 580; --w: 442; --h: 138; --tx: -2; --ty: 8.9; }
  .i-products { --x: 168; --y: 757; --w: 483; --h: 87; --tx: -2; --ty: 13.9; }
  .i-claims { --x: 774; --y: 422; --w: 483; --h: 87; --tx: 0; --ty: -5.1; }
  .i-copy { --x: 770; --y: 590; --w: 483; --h: 87; --tx: 4; --ty: -1.1; }
  .i-ai { --x: 774; --y: 776; --w: 483; --h: 68; --tx: 4; --ty: 1.9; }

  /* 5 · Integrazioni */
  .s5-ring { --x: -321; --y: 331.75; --w: 2390; --h: 1496.51; }
  .s5-disc { --x: 167.12; --y: -195; --w: 1548.76; --h: 902; }
  .s5-card { --x: 745; --y: 650; --w: 430; --h: 430; }
  .s5-fade { --x: -1; --y: 540; --w: 1922; --h: 534; }
  .s5-title { --x: 960; --y: 480.1; --fs: 65; translate: -50% 0; }
  .s5-text { --x: 959.65; --y: 553.3; --fs: 45; translate: -50% 0; }
  .s5-text .hl { padding: calc(2.3 * var(--u)) calc(11 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u)); }

  /* 6 · Compliance */
  .s6-ring { --x: -363; --y: -682.26; --w: 2390; --h: 1496.51; }
  .s6-title { --x: 879; --y: 118.1; --fs: 72; font-weight: 700; }
  .s6-text { --x: 879; --y: 190.6; --fs: 72; --lh: 73; }
  .s6-detail { --x: 168; --y: 808.9; --fs: 28; --lh: 38; }

  /* 7 · Informazioni */
  .s7-title { --x: 168; --y: 306.6; --fs: 72; --lh: 73; }
  .s7-text {
    --x: 795; --y: 457; --fs: 28; --lh: 38;
    width: calc(926 * var(--u));
    height: calc(106 * var(--u));
    padding: calc(15.9 * var(--u)) 0 0 calc(8 * var(--u));
    background: var(--hl);
  }
  .s7-foot .col {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(750.2 * var(--u));
    font-size: max(calc(12 * var(--u)), 9px);
    line-height: calc(17 * var(--u));
  }
  .col--office { --x: 168; }
  .col--partner { --x: 572; }
  .col__value { margin-top: calc(17 * var(--u)); }
}

/* Shared footer type */
.col__label,
.col__value { font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.col__label { letter-spacing: var(--ls, 0.25em); }
/* Tracking matched per label to the design */
.col--office { --ls: 0.183em; }
.col--partner { --ls: 0.242em; }

/* =========================================================
   MOBILE & TABLET — stacked layout using the same assets
   ========================================================= */
@media (max-width: 1099.98px) {
  br.d { display: none; }
  .hlbs { display: none; }

  .slide { padding: 112px 20px 96px; }
  .t { position: relative; z-index: 1; }

  /* Nav */
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(64px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 20px 0;
  }
  .nav__logo { width: 84px; transition: opacity 0.4s var(--ease); }
  .nav.is-hidden .nav__logo { opacity: 0; pointer-events: none; }
  .nav.is-open { color: var(--gray); }
  .nav.is-open .nav__logo { opacity: 1; pointer-events: auto; }
  .nav__links { display: none; }
  .nav__toggle { display: block; width: 48px; height: 48px; margin-right: -12px; }
  /* Soft frosted band so the bar stays legible over scrolling content */
  .nav::before {
    content: "";
    position: absolute;
    inset: 0 0 -16px;
    z-index: -1;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(#000 60%, transparent);
    mask-image: linear-gradient(#000 60%, transparent);
    transition: opacity 0.4s var(--ease);
  }
  .nav.is-hidden::before,
  .nav.is-open::before { opacity: 0; }

  /* 1 · Hero */
  .s1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    text-align: center;
  }
  .s1-disc {
    left: 50%;
    top: 50%;
    width: max(240vw, 120vh);
    height: auto;
    transform: translate(-50%, -50%);
  }
  .s1-logo { position: relative; z-index: 1; width: min(66vw, 420px); }
  .s1-logo svg { width: 100%; height: auto; aspect-ratio: 748 / 325; }
  .s1-tag {
    max-width: 30ch;
    margin-top: 22px;
    font-size: clamp(16px, 4.2vw, 21px);
    line-height: 1.5;
    text-wrap: balance;
  }

  /* 2 · Formulazione */
  .s2 { padding-bottom: 140px; }
  .s2-discL,
  .s2-discR { width: 150vw; height: auto; }
  .s2-discL { left: -93vw; top: calc(36% - 43.7vw); transform: rotate(90deg); }
  .s2-discR { left: 43vw; top: calc(66% - 43.7vw); transform: rotate(-90deg); }
  .s2-fade { inset: auto 0 0 0; height: 32%; }
  .s2-title { font-size: clamp(46px, 13.5vw, 104px); line-height: 1; }
  .s2-sub { margin-top: 10px; font-size: clamp(19px, 5.1vw, 32px); line-height: 1.25; }
  .s2-body { margin-top: 28px; font-size: clamp(17px, 4.4vw, 22px); line-height: 1.7; }
  .s2-body .hl { padding: 0.12em 0.3em; }
  .s2-card {
    position: relative;
    z-index: 1;
    width: min(72vw, 360px);
    aspect-ratio: 1;
    margin: 44px auto 0;
    border-radius: 18%;
  }

  /* 3 · Tools */
  .s3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: max(100svh, 760px);
    padding-bottom: 150px;
  }
  .s3-viso img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% 35%;
    z-index: -1;
  }
  .s3-fade { inset: auto 0 0 0; height: 26%; }
  /* Dots keep their pattern but sit over the face, above the tool list */
  .dots { position: absolute; left: 4%; right: 4%; top: 12%; height: 24%; }
  .dots i {
    left: calc((var(--x) - 400) / 1400 * 100%);
    top: calc((var(--y) - 410) / 610 * 100%);
    width: 10px;
    height: 10px;
  }
  .tools { position: relative; z-index: 1; display: grid; gap: 30px; text-align: center; }
  .tool__name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .tool__desc { margin-top: 8px; font-size: 16px; line-height: 1.75; color: var(--ink); }
  .tool__desc .hl { padding: 0.15em 0.4em; }

  /* 4 · Marketing Suite */
  .s4 { padding-bottom: 30vw; }
  .s4-sphere {
    position: relative;
    display: block;
    width: min(96vw, 620px);
    aspect-ratio: 1;
    margin: 28px -34vw 0 auto;
  }
  .s4-disc {
    left: 50%;
    bottom: -50vw;
    width: 130vw;
    height: auto;
    transform: translateX(-50%);
  }
  .s4-title { font-size: clamp(38px, 10.5vw, 72px); line-height: 1.05; }
  .s4-lead { margin-top: 14px; font-size: clamp(19px, 5vw, 28px); line-height: 1.6; }
  .s4-lead .hl { padding: 0.1em 0.3em; }
  .items { position: relative; z-index: 1; display: grid; gap: 10px; margin-top: 28px; }
  .item { padding: 12px 14px; background: var(--hl); font-size: 16px; line-height: 1.5; }

  /* 5 · Integrazioni */
  .s5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(46vw + 24px) 20px 40px;
    text-align: center;
  }
  .s5-card { order: 1; }
  .s5-disc { left: 50%; top: -27vw; width: 128vw; height: auto; transform: translateX(-50%); }
  .s5-ring { left: 50%; bottom: -70vw; width: 240vw; height: auto; transform: translateX(-50%); }
  .s5-fade { inset: auto 0 0 0; height: 34%; z-index: 0; }
  .s5-title { font-size: clamp(38px, 10.5vw, 72px); line-height: 1.05; }
  .s5-text { margin-top: 16px; font-size: clamp(19px, 5vw, 28px); line-height: 1.6; }
  .s5-text .hl { padding: 0.1em 0.3em; }
  .s5-card {
    position: relative;
    width: min(66vw, 340px);
    aspect-ratio: 1;
    margin: 40px auto 0;
    border-radius: 18%;
  }

  /* 6 · Compliance */
  .s6 { padding-top: 120px; }
  .s6-ring { left: -62vw; top: -88vw; width: 220vw; height: auto; }
  .s6-title { font-size: clamp(34px, 9.5vw, 64px); font-weight: 700; line-height: 1.1; }
  .s6-text { margin-top: 6px; font-size: clamp(28px, 7.6vw, 52px); line-height: 1.22; }
  .s6-text .hl--cut {
    background: linear-gradient(to bottom, transparent 0.12em, var(--hl) 0);
    padding: 0 0.15em 0.1em 0;
  }
  .s6-detail { margin-top: 56px; font-size: clamp(17px, 4.4vw, 22px); line-height: 1.6; }

  /* 7 · Informazioni */
  .s7 { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .s7-title { font-size: clamp(38px, 10.5vw, 72px); line-height: 1.04; }
  .s7-text { margin-top: 28px; padding: 14px 16px; background: var(--hl); font-size: clamp(17px, 4.4vw, 22px); line-height: 1.6; }
  .s7-foot {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 28px 20px;
    margin-top: 64px;
  }
  .col__label { font-size: 11px; }
  .col__value { margin-top: 10px; font-size: 13px; line-height: 1.45; }

  @media (min-width: 700px) {
    .slide { padding-left: 48px; padding-right: 48px; }
    .items { grid-template-columns: 1fr 1fr; }
    .s4-sphere { margin-right: -12vw; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}