/* Dr. CAM landing page — builds on ui.css tokens. Logical properties only (RTL first). */
html{scroll-behavior:smooth;scroll-padding-block-start:84px}
body{margin:0;background:var(--bg)}
.lp img{max-inline-size:100%;block-size:auto}
a{color:var(--accent)}
.lp{font-family:var(--font);color:var(--text-1)}
.wrap{inline-size:min(1200px,100% - 40px);margin-inline:auto}
.sec{padding-block:88px}
.sec.alt{background:var(--surface-1)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:22px;font-weight:600;color:var(--accent)}
.eyebrow::before{content:"";inline-size:18px;block-size:2px;background:var(--brand-orange);border-radius:2px}
.sec-h{display:flex;flex-direction:column;gap:10px;margin-block-end:40px;max-inline-size:720px}
.sec-h h2{font-size:34px;line-height:48px;font-weight:700;margin:0}
.sec-h p{font-size:17px;line-height:30px;color:var(--text-2);margin:0}

/* header */
.hdr{position:sticky;inset-block-start:0;z-index:20;background:rgb(255 255 255 / .94);backdrop-filter:saturate(1.4) blur(10px);border-block-end:1px solid var(--border)}
.hdr .wrap{display:flex;align-items:center;gap:24px;min-block-size:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.brand img{block-size:44px;inline-size:auto}
.brand b{display:block;font-size:19px;line-height:26px;font-weight:700}
.brand small{display:block;font-size:12px;line-height:18px;color:var(--accent);font-weight:600;direction:ltr;text-align:end}
.menu{display:flex;gap:4px;margin-inline-start:auto}
.menu a{padding-block:8px;padding-inline:12px;border-radius:var(--r-sm);font-size:15px;font-weight:500;color:var(--text-2);text-decoration:none}
.menu a:hover{background:var(--surface-1);color:var(--text-1)}
.hdr .btn{min-block-size:42px}
.burger{display:none}

/* hero */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:72px 96px}
.hero h1{font-size:52px;line-height:72px;font-weight:700;margin:0}
.hero .lead{font-size:20px;line-height:34px;color:#D5DEEB;margin:0}
.hero .chips{display:flex;flex-wrap:wrap;gap:8px}
.hero .chips span{font-size:14px;line-height:22px;padding-block:6px;padding-inline:12px;border-radius:var(--r-full);background:rgb(255 255 255 / .08);color:#C7D2E3;border:1px solid rgb(255 255 255 / .10)}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px}
.btn-light{background:#fff;color:var(--navy)}.btn-light:hover{background:#EEF1F5}
.btn-ghost{background:transparent;color:#fff;border-color:rgb(255 255 255 / .28)}.btn-ghost:hover{background:rgb(255 255 255 / .06)}
.hero-media{position:relative}
.hero-media img.photo{inline-size:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;display:block;box-shadow:0 24px 60px rgb(0 0 0 / .35)}
.hero-media .badge{position:absolute;inset-block-end:-22px;inset-inline-start:-22px;background:#fff;color:var(--text-1);border-radius:var(--r-md);padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-lg)}
.hero-media .badge b{display:block;font-size:15px;line-height:22px}
.hero-media .badge span{font-size:13px;line-height:20px;color:var(--text-2)}
.hero .wrap.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-block:0;align-items:stretch;border-block-start:1px solid rgb(255 255 255 / .12)}
.stats div{padding-block:26px;padding-inline:8px 24px;display:flex;flex-direction:column;gap:2px;border-inline-start:1px solid rgb(255 255 255 / .12)}
.stats div:first-child{border-inline-start:0;padding-inline-start:0}
.stats b{font-size:36px;line-height:48px;font-weight:700;color:var(--brand-orange);font-variant-numeric:tabular-nums;direction:ltr;text-align:end;unicode-bidi:isolate}
.stats span{font-size:15px;line-height:24px;color:#B4C3D8}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about p{font-size:17px;line-height:32px;color:var(--text-2);margin:0}
.about img{inline-size:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;display:block}
.vmv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-block-start:56px}
.vmv .card{padding:24px;display:flex;flex-direction:column;gap:10px}
.vmv h3{font-size:18px;line-height:28px;margin:0}
.vmv p{font-size:15px;line-height:26px;color:var(--text-2);margin:0}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-block-start:16px;background:var(--navy);border-radius:var(--r-lg);color:#fff;overflow:hidden}
.values div{padding:22px 24px;border-inline-start:1px solid rgb(255 255 255 / .1);display:flex;flex-direction:column;gap:4px}
.values div:first-child{border-inline-start:0}
.values b{font-size:18px;line-height:28px;color:var(--brand-orange)}
.values span{font-size:14px;line-height:22px;color:#C7D2E3}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.svc{display:flex;gap:14px;align-items:flex-start;padding:20px;text-decoration:none;color:inherit;transition:border-color 150ms,box-shadow 150ms}
.svc:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.svc h3{font-size:17px;line-height:26px;margin:0 0 4px}
.svc p{font-size:14px;line-height:22px;color:var(--text-2);margin:0}

/* feature rows */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:40px}
.feat+.feat{border-block-start:1px solid var(--border)}
.feat:nth-child(even) .feat-media{order:2}
.feat-media img{inline-size:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;display:block}
.feat h3{font-size:28px;line-height:40px;margin:0}
.feat .sub{font-size:16px;line-height:26px;color:var(--accent);font-weight:500;margin:0}
.feat p.body{font-size:16px;line-height:30px;color:var(--text-2);margin:0}
.ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:24px}
.ticks li::before{content:"";flex:none;inline-size:20px;block-size:20px;margin-block-start:2px;border-radius:var(--r-full);background:var(--accent-soft) url(/assets/icons/check.svg) center/14px no-repeat}

/* why + steps */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why .card{padding:24px;display:flex;gap:16px;align-items:flex-start}
.why .n{font-size:28px;line-height:36px;font-weight:700;color:var(--brand-blue);font-variant-numeric:tabular-nums;flex:none;min-inline-size:40px}
.why h3{font-size:17px;line-height:26px;margin:0 0 4px}
.why p{font-size:14px;line-height:22px;color:var(--text-2);margin:0}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.flow div{position:relative;padding-block:56px 0;display:flex;flex-direction:column;gap:6px}
.flow div::before{counter-increment:s;content:counter(s);position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:40px;block-size:40px;border-radius:var(--r-full);background:var(--navy);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:1}
.flow div::after{content:"";position:absolute;inset-block-start:19px;inset-inline:40px -16px;block-size:2px;background:var(--border-strong)}
.flow div:last-child::after{display:none}
.flow h3{font-size:17px;line-height:26px;margin:0}
.flow p{font-size:14px;line-height:22px;color:var(--text-2);margin:0}

/* sectors, works, team */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sectors div{display:flex;align-items:center;gap:12px;padding:16px;font-size:16px;font-weight:500}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.works figure{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden}
.works img{inline-size:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform 400ms}
.works figure:hover img{transform:scale(1.03)}
.works figcaption{padding-block:10px 0;font-size:15px;line-height:24px;font-weight:500}
.team{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.team img{inline-size:100%;border-radius:20px;display:block}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block-start:24px}
.roles div{padding:16px}
.roles b{display:block;font-size:16px;line-height:24px}
.roles span{font-size:14px;line-height:22px;color:var(--text-2)}

/* partners */
.partners{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.partners .card{padding:22px}
.partners h3{font-size:16px;line-height:24px;color:var(--accent);margin:0 0 12px}
.partners ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.partners li{font-size:15px;line-height:24px;padding-block-end:10px;border-block-end:1px solid var(--border)}
.partners li:last-child{border:0;padding:0}
.partners li small{display:block;font-size:13px;line-height:20px;color:var(--text-3)}
.factories{margin-block-start:16px;display:flex;align-items:center;gap:20px;padding:22px 24px}
.factories b{font-size:40px;line-height:48px;color:var(--brand-orange);font-variant-numeric:tabular-nums}
.brands{margin-block-start:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:15px;color:var(--text-2)}
.brands span[lang=en]{font-weight:600;color:var(--text-1);padding-block:6px;padding-inline:14px;border:1px solid var(--border-strong);border-radius:var(--r-full)}

/* app */
.app{background:var(--navy);color:#fff;overflow:hidden}
.app .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
.app .sec-h h2{color:#fff}.app .sec-h p{color:#C7D2E3}
.app ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.app li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:26px;color:#D5DEEB}
.app li b{color:#fff}
.app li .mi{color:var(--brand-orange);margin-block-start:3px}
.phones{display:flex;gap:18px;justify-content:center;align-items:flex-end;direction:ltr}
.phone{inline-size:220px;border-radius:34px;padding:8px;background:#0A1631;box-shadow:0 30px 60px rgb(0 0 0 / .45),inset 0 0 0 1px rgb(255 255 255 / .08);flex:none}
.phone img{inline-size:100%;display:block;border-radius:27px}
.phone.big{inline-size:250px}
.phone.low{transform:translateY(36px)}
.stores{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:28px;align-items:center}
.stores .soon{font-size:13px;line-height:20px;color:#93A5C1}

/* contact + footer */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.contact .list .li{min-block-size:64px}
.contact .li b{display:block;font-size:13px;line-height:20px;color:var(--text-2);font-weight:500}
.contact .li a,.contact .li span.v{font-size:17px;line-height:26px;font-weight:600;color:var(--text-1);text-decoration:none}
.map-card{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);min-block-size:320px;background:var(--surface-2)}
.map-card iframe{border:0;inline-size:100%;block-size:100%;min-block-size:320px;display:block}
.cta-band{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 32px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;margin-block-start:24px}
.cta-band h3{font-size:22px;line-height:32px;margin:0}
.ftr{background:#0A1834;color:#93A5C1;padding-block:40px 28px;font-size:14px;line-height:22px}
.ftr .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.ftr a{color:#C7D2E3;text-decoration:none}
.ftr a:hover{color:#fff}
.ftr .links{display:flex;gap:18px;flex-wrap:wrap}
.wa{position:fixed;inset-block-end:20px;inset-inline-start:20px;z-index:30;inline-size:56px;block-size:56px;border-radius:var(--r-full);background:#1FA855;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg)}

/* responsive */
@media (max-width:1024px){
  .hero .wrap,.about,.feat,.team,.app .wrap,.contact{grid-template-columns:1fr}
  .feat:nth-child(even) .feat-media{order:0}
  .why,.partners{grid-template-columns:1fr 1fr}
  .sectors{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:1fr;gap:0}
  .flow div{padding-block:0 24px;padding-inline-start:56px}
  .flow div::after{inset-block:44px -4px;inset-inline:19px auto;inline-size:2px;block-size:auto}
  .menu{display:none}
  .phones{justify-content:center}
}
@media (max-width:680px){
  .sec{padding-block:64px}
  .hero h1{font-size:36px;line-height:52px}
  .hero .lead{font-size:17px;line-height:30px}
  .hero .wrap{padding-block:40px 64px;gap:40px}
  .hero .wrap.stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .stats div:nth-child(n+3){border-block-start:1px solid rgb(255 255 255 / .12)}
  .sec-h h2{font-size:27px;line-height:40px}
  .vmv,.why,.partners,.works,.values,.roles{grid-template-columns:1fr}
  .values div{border-inline-start:0;border-block-start:1px solid rgb(255 255 255 / .1)}
  .values div:first-child{border:0}
  .ticks{grid-template-columns:1fr}
  .hero-media .badge{inset-inline-start:12px;inset-block-end:-18px}
  .phone{inline-size:150px;border-radius:24px;padding:5px}.phone img{border-radius:20px}
  .phone.big{inline-size:170px}.phone.side2{display:none}
  .hdr .btn-secondary{display:none}
  .brand small{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.works img{transition:none}}