/* home.css — homepage only: hero + photo, trust card, product tabs, Lab/Clinic tiles, Redon spotlight,
   About band, light contact band. Logical properties only. */

/* ---------- Brand wall + button rows ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:479px){.btn-row>.btn{flex:1 1 100%}}
.brand-wall{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.brand-tile__origin{font-size:12px;line-height:1.3;color:var(--ink-500)}
@media (min-width:768px){.brand-wall{gap:16px}.brand-tile{flex-basis:calc((100% - 48px) / 4);min-height:112px}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:24px 84px;background:radial-gradient(60% 55% at calc(50% + 32% * var(--dir)) 38%,rgba(0,132,252,.11),rgba(0,132,252,0) 70%),linear-gradient(180deg,var(--sky-50) 0%,var(--sky-100) 100%)}
.hero__grid{display:grid;gap:28px;align-items:center}
.hero__copy{display:grid;gap:16px;max-width:36rem}
.hero h1{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display)}
.hero__sub{font-size:16px;line-height:1.6;color:var(--ink-700);max-width:34rem}
.hero__sub--long{display:none}
.hero__ctas{display:grid;gap:12px;margin-block-start:8px}
@media (min-width:480px){.hero__ctas{display:flex;flex-wrap:wrap}}
@media (min-width:768px){
  .hero{padding-block:40px 112px}
  .hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px}
  .hero__sub--long{display:inline}.hero__sub--short{display:none}
}
@media (min-width:1024px){
  .hero{padding-block:56px 136px}
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px}
  .hero__copy{gap:22px}
  .hero__sub{font-size:var(--fs-lead);line-height:var(--lh-lead)}
}
/* Laptops (1100–1366 × 800): the floating trust card must start inside the first screen */
@media (min-width:1100px){.hero{padding-block:40px 120px}}

/* Hero photo (aot/hero-photo, decorative; a 16:9 photo with its subject in the right 55%). Phones and tablets: under
   or beside the text, cropped to 4:3 on --focus (default: its right part, so the whole subject shows). From 1280px:
   the WHOLE photo, as tall as the hero and against its right edge, its empty left part fading into the hero
   background under the text (nothing is cropped or enlarged beyond the hero's height). */
.hero__photo{margin:0}
.hero__photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:var(--focus,100% 62%);border-radius:var(--r-tile);box-shadow:var(--sh-2);background:var(--sky-100)}
@media (min-width:1280px){
  .hero{isolation:isolate}
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__copy{max-width:33rem}
  .hero__photo{position:absolute;inset-block:0;inset-inline-end:0;z-index:-1;aspect-ratio:16/9}
  .hero__photo img{width:100%;height:100%;aspect-ratio:auto;object-position:100% 50%;border-radius:0;box-shadow:none;background:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%);mask-image:linear-gradient(90deg,transparent 0,#000 32%)}
}
/* Product circles in the Lab/Clinic tiles and the spotlight */
.tile__art .orb,.spot__media .orb{position:absolute;box-shadow:inset 0 0 0 1px var(--sky-200),var(--sh-2)}
.tag{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:8px;padding-block:6px;padding-inline:10px 12px;border-radius:var(--r-pill);background:#fff;box-shadow:var(--sh-2);font-size:13px;font-weight:600;color:var(--ink-900);white-space:nowrap}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--azure-500);box-shadow:0 0 0 3px var(--sky-100)}
.products-sec{padding-block-start:var(--sp-8)}
@media (max-width:479px){.products-sec{padding-block-start:36px}.products-sec .sec-head{margin-block-end:16px;gap:8px}.products-sec .sec-head .lead{display:none}}

/* ---------- Trust card ---------- */
.trust{list-style:none;position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin-block-start:-64px;padding:18px 16px;background:#fff;border:1px solid var(--line-100);border-radius:20px;box-shadow:var(--sh-3)}
.trust__item{display:grid;gap:8px;align-content:start}
.trust__icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--sky-100);color:var(--azure-700)}
.trust__icon .i{--i:18px}
.trust__title{font-size:14px;line-height:1.3;font-weight:600;color:var(--ink-900)}
.trust__sub{display:none;font-size:14px;line-height:1.5;color:var(--ink-500)}
@media (min-width:768px){
  .trust{gap:24px;padding:28px}
  .trust__item{grid-template-columns:auto 1fr;column-gap:14px}
  .trust__icon{width:44px;height:44px;grid-row:span 2}
  .trust__icon .i{--i:22px}
  .trust__title{font-size:16px}
  .trust__sub{display:block}
}
@media (min-width:1024px){
  .trust{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:28px 8px}
  .trust__item{grid-template-columns:1fr;row-gap:10px;padding-inline:24px}
  .trust__icon{grid-row:auto}
  .trust__item+.trust__item{border-inline-start:1px solid var(--line-100)}
}

/* ---------- Tabs ---------- */
.tabs__list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:6px var(--gutter) 8px;mask-image:linear-gradient(calc(90deg * var(--dir)),transparent 0,#000 var(--gutter),#000 calc(100% - 40px),transparent)}
.tabs__list::-webkit-scrollbar{display:none}
.tab{flex:none;min-height:44px;padding-inline:18px;border:1px solid var(--line-200);border-radius:var(--r-pill);background:#fff;color:var(--ink-700);font-size:15px;font-weight:600;white-space:nowrap;transition:background-color var(--t1),color var(--t1),border-color var(--t1)}
.tab:hover{border-color:var(--sky-200);color:var(--navy-800)}
.tab[aria-selected="true"]{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.tabs__panel{padding-block-start:24px}
.tabs__panel[hidden]{display:none}
.tabs__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px;margin-block-start:28px}
@media (min-width:1024px){
  .tabs__list{justify-content:safe center;gap:0;margin-inline:0;padding:0;border-block-end:1px solid var(--line-200);mask-image:none}
  .tab{position:relative;min-height:56px;padding-inline:16px;border:0;border-radius:0;background:none;color:var(--ink-500);font-size:16px}
  .tab:focus-visible{outline-offset:-3px;border-radius:8px}
  .tab:hover{color:var(--navy-800)}
  .tab[aria-selected="true"]{background:none;color:var(--ink-900)}
  .tab[aria-selected="true"]::after{content:"";position:absolute;inset-inline:16px;inset-block-end:-1px;height:2px;background:var(--azure-500);border-radius:2px}
  .tabs__panel{padding-block-start:40px}
}

/* ---------- Lab / clinic tiles (light: navy stays for the About band and the footer) ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;aspect-ratio:1;padding:14px;overflow:hidden;border:1px solid var(--sky-200);border-radius:var(--r-tile);background:linear-gradient(calc(155deg * var(--dir)),var(--sky-100) 0%,#fff 100%);color:var(--ink-500);text-decoration:none;transition:border-color var(--t2),box-shadow var(--t2)}
.tile:hover{color:var(--ink-500);border-color:var(--sky-300);box-shadow:var(--sh-2)}
.tile__art{position:absolute;z-index:-1;inset-block-start:12px;inset-inline-end:12px;width:58%;aspect-ratio:1}
.tile:hover .tile__art .orb img{scale:var(--mo-scale)}
.tile__art .orb:nth-child(1){width:70%;inset-block-start:0;inset-inline-end:0}
.tile__art .orb:nth-child(2){width:40%;inset-block-start:52%;inset-inline-end:58%}
.tile__art .orb:nth-child(3){width:32%;inset-block-start:66%;inset-inline-end:16%}
/* Two circles: both large, on a diagonal (top start, lower end), not touching */
.tile__art .orb:first-child:nth-last-child(2){width:56%;inset-block-start:0;inset-inline-end:44%}
.tile__art .orb:nth-child(2):last-child{width:56%;inset-block-start:44%;inset-inline-end:0}
.tile::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.9) 34%,rgba(255,255,255,0) 58%)}
.tile__title{color:var(--ink-900);font-size:17px;line-height:1.25;font-weight:600}
.tile__meta{display:none;font-size:13px;line-height:1.4}
/* From 530px the meta line fits under the title without reaching the lower circle (three lines on narrower tiles) */
@media (min-width:530px){.tile__meta{display:block}.tile__title{font-size:19px}}
.tile__go{display:none}
@media (min-width:768px){
  .tiles{gap:20px}
  .tile{aspect-ratio:auto;min-height:340px;padding:28px;gap:8px}
  /* The text keeps to the start half, beside the circles at the end, so nothing needs the white wash */
  .tile::after{display:none}
  .tile>span:not(.tile__go){max-width:48%}
  .tile__title{font-size:var(--fs-h3)}
  .tile__meta{font-size:15px}
  .tile__art{inset-block-start:20px;inset-inline-end:20px;width:50%}
  .tile__go{display:inline-flex;align-items:center;gap:10px;margin-block-start:12px;font-weight:600;color:var(--navy-800);white-space:nowrap}
  .tile__go .i{--i:40px;padding:10px;border-radius:50%;background:var(--navy-800);color:#fff;transition:translate var(--t2)}
  .tile:hover .tile__go .i{translate:calc(3px * var(--dir)) 0}
}
@media (min-width:1024px){
  .tiles{grid-template-columns:7fr 5fr}
  .tile{min-height:420px;padding:40px}
  .tile__art{inset-block-start:28px;inset-inline-end:28px;width:min(50%,340px)}
  /* The clinic tile is narrower (5fr): a wider art box keeps its circles close to the lab tile's */
  .tile--clinic .tile__art{width:58%}
}

/* ---------- Redon spotlight ---------- */
.spot{display:grid;gap:32px;align-items:center}
.spot__media{position:relative;width:min(100%,460px);aspect-ratio:1/.86;margin-inline:auto}
.spot__media .orb:nth-child(1){height:100%;inset-block-start:0;inset-inline-start:0}
.spot__media .orb:nth-child(2){height:38%;inset-block-start:4%;inset-inline-end:0}
.spot__media .orb:nth-child(3){height:34%;inset-block-end:2%;inset-inline-end:4%}
.spot__copy{display:grid;gap:16px}
@media (min-width:1024px){.spot{grid-template-columns:1fr 1fr;gap:64px}.spot__copy{gap:20px}}

/* ---------- About band ---------- */
.about{display:grid;gap:20px;max-width:44rem}
.about h2{font-weight:400;font-size:var(--fs-product-title);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
@media (min-width:1024px){.about h2{font-size:var(--fs-h1)}}
.about p{font-size:var(--fs-lead);line-height:var(--lh-lead)}

/* ---------- How to order ---------- */
.steps{list-style:none;padding:0;display:grid;gap:12px}
.step{position:relative;display:grid;align-content:start;grid-template-columns:auto 1fr;gap:4px 16px;padding:20px;border:1px solid var(--line-100);border-radius:var(--r-card);background:#fff}
.step__num{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sky-100);color:var(--navy-800);font-weight:600;font-size:18px;font-variant-numeric:tabular-nums}
.step h3{font-size:var(--fs-h4);line-height:var(--lh-h4)}
.step p{font-size:15px;color:var(--ink-500)}
.step__icon{display:none}
@media (min-width:768px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .step{grid-template-columns:1fr;gap:12px;padding:28px}
  .step__num{grid-row:auto}
  .step__icon{display:block;position:absolute;inset-block-start:28px;inset-inline-end:28px;width:28px;height:28px;color:var(--sky-300)}
}