/* Shared styles for the SILA service pages (pharmacy, dentists, sport) */
:root {
  --cobalt: #2447F9;
  --ink: #141833;
  --sky: #8EA2FF;
  --tint: #E9EDFF;
  --mist: #F6F7FB;
  --white: #FFFFFF;
  --slate: #5B6178;
  --line: #E3E6F0;
  --font: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.6, 0, .3, 1);
  /* each page sets --c (service colour), --c-light, --c-soft */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; } }
body { font-family: var(--font); color: var(--ink); background: var(--white); font-size: 18px; line-height: 1.75; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Skiper 41 · progressive blur behind the sticky nav */
.nav { position: sticky; top: 0; z-index: 30; }
.nav__blur {
  position: absolute; inset: 0 0 auto 0; height: 130%; pointer-events: none;
  background: linear-gradient(to top, transparent, rgba(255, 255, 255, .92));
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent); mask-image: linear-gradient(to bottom, #000 50%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.nav .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; }
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; font-size: 16px; font-weight: 500; }
.nav__links > a:not(.btn) { color: var(--slate); }
.nav__links > a:not(.btn):hover { color: var(--ink); }

/* Skiper 58 · text roll, word by word */
.roll { display: inline-flex; gap: .28em; }
.roll__w { position: relative; display: inline-block; overflow: hidden; padding-block: .08em; line-height: 1.25; }
.roll__w > span { display: block; transition: transform .38s var(--ease); transition-delay: var(--d, 0s); }
.roll__w > span + span { position: absolute; inset: .08em 0 auto 0; transform: translateY(110%); }
:is(a, button):is(:hover, :focus-visible) .roll__w > span:first-child { transform: translateY(-110%); }
:is(a, button):is(:hover, :focus-visible) .roll__w > span + span { transform: translateY(0); }

/* Skiper 40 · underline link */
.ulink { position: relative; display: inline-block; }
.ulink::before { content: ""; position: absolute; inset-inline: 0; bottom: -.1em; height: .08em; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.ulink:hover::before, .ulink:focus-visible::before { transform: scaleX(1); transform-origin: right; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 500 17px/1 var(--font); background: var(--cobalt); color: var(--white); transition: background .2s, transform .2s; }
.btn:hover { background: #1733D6; }
.btn:active { transform: scale(.98); }
.btn--small { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn--light { background: var(--white); color: var(--c); }
.btn--light:hover { background: var(--mist); }
.btn--ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* Hero, in the service colour */
.hero { padding: 0 var(--gutter); }
.hero__box {
  max-width: calc(var(--wrap) + 120px); margin-inline: auto;
  background: var(--c); color: var(--white); border-radius: 40px;
  display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 40px;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px); overflow: hidden;
}
.hero__brand { height: clamp(44px, 5vw, 60px); width: auto; }
.hero h1 { margin-top: 32px; font-size: clamp(42px, 6.2vw, 86px); line-height: 1.12; font-weight: 700; max-width: 11ch; }
.hero__lede { margin-top: 24px; font-size: clamp(17px, 1.5vw, 20px); color: rgba(255, 255, 255, .88); max-width: 32em; }
.hero__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__chips { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__chips span { padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 14px; font-weight: 500; }

.phone { justify-self: center; width: 280px; height: 560px; border-radius: 44px; padding: 10px; background: var(--ink); box-shadow: 0 40px 80px -30px rgba(20, 24, 51, .55); }
.phone__screen { height: 100%; border-radius: 35px; overflow: hidden; background: var(--white); color: var(--ink); display: flex; flex-direction: column; }
.phone__top { background: var(--c); color: var(--white); padding: 42px 20px 22px; }
.phone__name { font-size: 21px; font-weight: 700; line-height: 1.3; }
.phone__status { font-size: 13px; opacity: .85; }
.phone__banner { margin-top: 18px; padding: 18px 16px; border-radius: 16px; background: rgba(255, 255, 255, .18); font-size: 17px; font-weight: 600; }
.phone__list { list-style: none; padding: 6px 16px; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
.phone__list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.phone__dot { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--c-soft); }
.phone__dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.phone__item { font-size: 14px; font-weight: 600; line-height: 1.4; }
.phone__sub { font-size: 12px; color: var(--slate); line-height: 1.4; }
.phone__by { padding: 12px; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 11px; color: var(--slate); }
.phone__by img { height: 15px; width: auto; }

/* Sections */
.section { padding-block: clamp(80px, 10vw, 130px) 0; }
.kicker { font-size: 16px; font-weight: 600; color: var(--c); }
.heading { margin-top: 8px; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.25; font-weight: 700; max-width: 18ch; }
.sub { margin-top: 14px; color: var(--slate); max-width: 36em; }

.feats { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat { background: var(--mist); border-radius: 22px; padding: 26px 24px 28px; }
.feat h3 { font-size: 19px; font-weight: 600; line-height: 1.4; }
.feat h3::before { content: ""; display: block; width: 28px; height: 6px; border-radius: 3px; background: var(--c); margin-bottom: 16px; }
.feat p { margin-top: 6px; font-size: 15.5px; color: var(--slate); line-height: 1.75; }

/* Role columns (dentists) */
.roles { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.role { border-radius: 28px; padding: 30px 28px; box-shadow: inset 0 0 0 1.5px var(--line); }
.role--main { background: var(--c); color: var(--white); box-shadow: none; }
.role h3 { font-size: 24px; font-weight: 700; }
.role__who { font-size: 15px; color: var(--slate); }
.role--main .role__who { color: rgba(255, 255, 255, .8); }
.role ul { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
.role li { font-size: 16px; line-height: 1.6; padding-inline-start: 20px; position: relative; }
.role li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.role--main li::before { background: var(--c-light); }

/* Privacy / rules table */
.rules { margin-top: 40px; border-radius: 28px; background: var(--ink); color: var(--white); padding: clamp(28px, 4vw, 48px); }
.rules h3 { font-size: 24px; font-weight: 700; }
.rules > p { margin-top: 8px; color: #B9BED3; max-width: 40em; }
.rules dl { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rules div { padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .06); }
.rules dt { font-weight: 600; color: var(--c-light); }
.rules dd { margin-top: 4px; font-size: 16px; color: #DADDEA; }

/* Add-ons */
.addons { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.addon { border-radius: 22px; padding: 22px; border: 1.5px dashed var(--line); }
.addon h3 { font-size: 17px; font-weight: 600; }
.addon p { margin-top: 6px; font-size: 15px; color: var(--slate); line-height: 1.7; }

/* Pricing (Skiper 37 count-up) */
.plans { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plan { border-radius: 30px; padding: 34px 34px 30px; box-shadow: inset 0 0 0 1.5px var(--line); display: flex; flex-direction: column; }
.plan h3 { font-size: 19px; font-weight: 600; color: var(--c); }
.plan__price { margin-top: 16px; font-size: clamp(40px, 4.4vw, 56px); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; direction: ltr; text-align: end; }
.plan__price small { font-size: .4em; font-weight: 500; margin-inline-start: 8px; color: var(--slate); }
.plan__then { margin-top: 6px; font-size: 18px; font-weight: 600; }
.plan__then span { font-variant-numeric: tabular-nums; }
.plan ul { list-style: none; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 15.5px; color: var(--slate); }
.plan li { padding-inline-start: 18px; position: relative; }
.plan li::before { content: ""; position: absolute; inset-inline-start: 0; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.plan--main { background: var(--c); color: var(--white); box-shadow: none; }
.plan--main h3, .plan--main .plan__price small, .plan--main ul { color: rgba(255, 255, 255, .85); }
.plan--main ul { border-color: rgba(255, 255, 255, .25); }
.plan--main li::before { background: var(--white); }
.plans__note { margin-top: 18px; font-size: 16px; color: var(--slate); max-width: 46em; }

/* CTA */
.cta { padding: clamp(80px, 10vw, 130px) var(--gutter) var(--gutter); }
.cta__box { max-width: calc(var(--wrap) + 120px); margin-inline: auto; background: var(--ink); color: var(--white); border-radius: 40px; padding: clamp(56px, 7vw, 100px) clamp(24px, 6vw, 80px) 36px; }
.cta h2 { font-size: clamp(38px, 5.6vw, 80px); line-height: 1.15; font-weight: 700; max-width: 13ch; }
.cta__lede { margin-top: 20px; color: #B9BED3; max-width: 32em; }
.cta .btn { margin-top: 34px; min-height: 58px; padding: 0 30px; font-size: 18px; }
.footer { margin-top: clamp(64px, 8vw, 110px); padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; font-size: 14px; color: #8E94AE; }
.footer img { height: 30px; width: auto; }
.footer__links { display: flex; gap: 22px; }
.footer a:hover { color: var(--white); }

/* Skiper 89 · scroll progress */
.progress { position: fixed; bottom: 16px; left: 16px; z-index: 40; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--c); }
.progress svg { width: 38px; height: 38px; rotate: -90deg; }

/* ===== Components shared with the landing page ===== */

/* Skiper 101 · tooltip on the platform chips */
.hero__chips [data-tip] { position: relative; cursor: default; }
.hero__chips [data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 4px; opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--white); font-size: 13px; line-height: 1.4; white-space: nowrap; padding: 7px 11px; border-radius: 9px;
  transition: opacity .18s ease, translate .18s ease;
}
.hero__chips [data-tip]:hover::after, .hero__chips [data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; }

/* Skiper 87 · scrollable phone list with faded edges */
.phone__list { overflow-y: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 36px), transparent); }
.phone__list::-webkit-scrollbar { display: none; }

/* Skiper 31 · words converge as a heading scrolls in */
.converge { perspective: 600px; }
.converge .cw { display: inline-block; will-change: transform; }

/* Skiper 52 · hover expand */
.expand { margin-top: 48px; display: flex; gap: 6px; height: 420px; }
.panel {
  position: relative; flex: 0 0 84px; border-radius: 28px; overflow: hidden; cursor: pointer;
  background: var(--c-soft); color: var(--c); transition: flex-basis .45s var(--ease), background .3s, color .3s;
}
.panel[aria-expanded="true"] { flex: 1 1 auto; cursor: default; background: var(--c); color: var(--white); }
.panel__tab { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 600; transition: opacity .25s; }
.panel__tab span { rotate: -90deg; white-space: nowrap; }
.panel[aria-expanded="true"] .panel__tab { opacity: 0; }
.panel__body { position: absolute; inset: 0; padding: 40px 44px; width: min(640px, 100%); display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; transition: opacity .2s; }
.panel[aria-expanded="true"] .panel__body { opacity: 1; transition: opacity .35s .2s; }
.panel__body h3 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; line-height: 1.3; }
.panel__body p { margin-top: 10px; font-size: 18px; line-height: 1.75; color: rgba(255, 255, 255, .9); max-width: 30em; }
.panel__body ul { list-style: none; margin-top: 16px; display: grid; gap: 8px; }
.panel__body li { font-size: 16.5px; line-height: 1.6; padding-inline-start: 20px; position: relative; color: rgba(255, 255, 255, .92); }
.panel__body li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-light); }
.expand--tall { height: 500px; }

/* Skiper 16 · sticky card stack for the steps */
.stack { position: relative; padding-bottom: 10vh; }
.stack__item { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding-inline: var(--gutter); }
.stack__card {
  position: relative; top: calc(-4vh + var(--i) * 24px); width: 100%; max-width: 980px; height: min(420px, 60vh);
  border-radius: 40px; padding: clamp(28px, 5vw, 60px); transform-origin: top center; will-change: transform;
  display: grid; grid-template-columns: auto 1fr; gap: 12px clamp(24px, 5vw, 64px); align-content: center;
}
.stack__n { grid-row: span 2; font-size: clamp(96px, 15vw, 200px); font-weight: 700; line-height: .9; }
.stack__card h3 { font-size: clamp(28px, 3.4vw, 46px); font-weight: 700; line-height: 1.25; align-self: end; }
.stack__card p { grid-column: 2; font-size: clamp(17px, 1.6vw, 21px); max-width: 26em; }
.s1 { background: var(--c-soft); color: var(--ink); } .s1 .stack__n { color: var(--c); } .s1 p { color: var(--slate); }
.s2 { background: var(--c); color: var(--white); } .s2 .stack__n { color: var(--c-light); }
.s3 { background: var(--ink); color: var(--white); } .s3 .stack__n { color: var(--c-light); }
.s4 { background: var(--tint); color: var(--ink); } .s4 .stack__n { color: var(--cobalt); } .s4 p { color: var(--slate); }
.s2 p, .s3 p { color: rgba(255, 255, 255, .82); }
.steps__intro { padding-top: clamp(80px, 10vw, 130px); }

/* Skiper 66 · wobbly clip on the contact box + Skiper 61 · spring mouse follow */
.cta__box { position: relative; overflow: hidden; clip-path: url(#wobble); border-radius: 0; }
.cta__inner { position: relative; z-index: 1; }
.follow { position: absolute; top: 0; left: 0; z-index: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, var(--c) 0 40%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity .3s; }

@media (max-width: 960px) {
  .expand, .expand--tall { flex-direction: column; height: auto; }
  .panel { flex: 0 0 64px; }
  .panel[aria-expanded="true"] { flex: 0 0 380px; }
  .panel__tab span { rotate: 0deg; }
}
@media (max-width: 640px) {
  .panel__body { padding: 26px 22px; }
  .panel__body p { font-size: 16.5px; }
  .panel[aria-expanded="true"] { flex-basis: 440px; }
  .stack__card { grid-template-columns: 1fr; border-radius: 30px; align-content: start; }
  .stack__n { grid-row: auto; font-size: 88px; }
  .stack__card p { grid-column: 1; }
}

@media (max-width: 960px) {
  .hero__box { grid-template-columns: 1fr; }
  .feats, .roles { grid-template-columns: 1fr 1fr; }
  .addons { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .nav__links > a:not(.btn) { display: none; }
  .hero { padding: 0 10px; }
  .hero__box { border-radius: 30px; }
  .phone { width: 260px; height: 520px; }
  .feats, .roles, .addons, .plans, .rules dl { grid-template-columns: 1fr; }
  .plan { padding: 28px 24px 24px; }
  .cta__box { border-radius: 28px; }
  .progress { width: 42px; height: 42px; }
  .progress svg { width: 34px; height: 34px; }
}