/* ============================================================
   Shadi Clinic — Campaign Visual System 2026
   بازطراحی سراسری صفحات عمومی با حفظ هویت فیروزه‌ای و طلایی
   ============================================================ */
:root {
    --campaign-teal: #0e897e;
    --campaign-teal-deep: #075e58;
    --campaign-teal-ink: #123f3b;
    --campaign-teal-soft: #eaf7f5;
    --campaign-gold: #d5a04c;
    --campaign-gold-deep: #aa7430;
    --campaign-gold-soft: #fff7e9;
    --campaign-cream: #fbf8f1;
    --campaign-white: #ffffff;
    --campaign-ink: #18312e;
    --campaign-muted: #657773;
    --campaign-line: rgba(14, 137, 126, .15);
    --campaign-line-gold: rgba(213, 160, 76, .28);
    --campaign-shadow-sm: 0 10px 28px rgba(14, 66, 61, .08);
    --campaign-shadow: 0 24px 70px rgba(10, 65, 60, .13);
    --campaign-shadow-strong: 0 34px 90px rgba(5, 59, 54, .20);
    --campaign-radius-sm: 16px;
    --campaign-radius: 26px;
    --campaign-radius-lg: 38px;
    --campaign-container: min(1320px, calc(100% - 48px));
}

[data-theme="light"] {
    --color-accent: var(--campaign-teal);
    --color-accent-dark: var(--campaign-teal-deep);
    --color-accent-deep: #064e49;
    --color-accent-bright: #22a99d;
    --color-accent-soft: rgba(14, 137, 126, .11);
    --color-accent-glow: rgba(14, 137, 126, .23);
    --color-bg: #fbfaf7;
    --color-bg-alt: #f3f7f5;
    --color-bg-deep: #e8f0ee;
    --color-surface: #ffffff;
    --color-surface-2: #f7faf9;
    --color-primary: #18312e;
    --color-text: #243b37;
    --color-text-muted: #657773;
    --color-border: rgba(14, 71, 66, .11);
    --color-border-soft: rgba(14, 71, 66, .07);
    --color-header-bg: rgba(255, 255, 255, .87);
}

html { scroll-padding-top: 128px; }
body.site-public {
    background:
        radial-gradient(circle at 9% 4%, rgba(213,160,76,.09), transparent 24rem),
        radial-gradient(circle at 91% 18%, rgba(14,137,126,.09), transparent 28rem),
        #fbfaf7;
}
body.site-public::before {
    background-image:
        linear-gradient(rgba(14,137,126,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,137,126,.026) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.76), transparent 78%);
}
body.site-public::after { display: none; }
body.site-public > *:not(.site-ambient):not(.site-scroll-progress):not(.public-float-dock):not(.chat-widget):not(.app-modal):not(.cookie-banner):not(.mobile-cta-bar):not(.c555-promo):not(.results-lightbox) { position: relative; z-index: 1; }

.site-scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    z-index: 3000;
    pointer-events: none;
    background: transparent;
}
.site-scroll-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--campaign-teal), var(--campaign-gold));
    box-shadow: 0 0 16px rgba(14,137,126,.45);
}
.site-ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.site-ambient span { position: absolute; border-radius: 999px; filter: blur(2px); opacity: .52; }
.site-ambient span:nth-child(1) { width: 440px; height: 440px; right: -240px; top: 18%; background: radial-gradient(circle, rgba(14,137,126,.10), transparent 70%); }
.site-ambient span:nth-child(2) { width: 360px; height: 360px; left: -180px; top: 56%; background: radial-gradient(circle, rgba(213,160,76,.10), transparent 70%); }
.site-ambient span:nth-child(3) { width: 280px; height: 280px; right: 28%; bottom: -170px; background: radial-gradient(circle, rgba(14,137,126,.07), transparent 72%); }

.container { width: var(--campaign-container); max-width: 1320px; padding-inline: 0; }
.section { padding-block: clamp(74px, 8vw, 118px); }
.section--tight { padding-block: clamp(54px, 6vw, 86px); }
.section-alt {
    background:
        radial-gradient(circle at 12% 0, rgba(213,160,76,.08), transparent 24rem),
        linear-gradient(180deg, rgba(234,247,245,.72), rgba(248,250,249,.92));
    border-block: 1px solid rgba(14,137,126,.08);
}
.section-header { margin-bottom: clamp(34px, 5vw, 58px); }
.section-eyebrow, .page-eyebrow, .device-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 14px;
    border: 1px solid var(--campaign-line-gold);
    border-radius: 999px;
    color: var(--campaign-gold-deep);
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,247,233,.94));
    box-shadow: 0 6px 22px rgba(137, 91, 34, .07);
    font-size: .84rem;
    font-weight: 850;
    letter-spacing: -.01em;
}
.section-title, .page-title {
    font-family: var(--font-display);
    letter-spacing: -.035em;
    color: var(--campaign-ink);
}
.section-title { font-size: clamp(2rem, 3.8vw, 3.35rem); line-height: 1.32; }
.section-desc, .page-desc { color: var(--campaign-muted); line-height: 2; font-size: clamp(.96rem, 1.2vw, 1.1rem); }

/* Header */
.topbar {
    color: rgba(255,255,255,.88);
    background: linear-gradient(90deg, #064d48, #0e897e 52%, #075e58);
    border: 0;
    min-height: 38px;
}
.topbar-inner { min-height: 38px; }
.topbar-link:hover { color: #ffe6b7; }
.site-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: rgba(255,255,255,.87);
    backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid rgba(14,137,126,.12);
    box-shadow: 0 5px 22px rgba(16,58,54,.04);
    transition: box-shadow .25s ease, background .25s ease, transform .25s ease;
}
.site-header.is-scrolled { background: rgba(255,255,255,.96); box-shadow: 0 16px 42px rgba(13,65,60,.11); }
.header-inner { min-height: 82px; }
.logo-img { filter: drop-shadow(0 5px 12px rgba(14,137,126,.13)); }
.main-nav ul { gap: 6px; }
.main-nav a {
    padding: 10px 13px;
    border-radius: 12px;
    color: #31504c;
    font-weight: 720;
}
.main-nav a::after { display: none; }
.main-nav a:hover, .main-nav a.active {
    color: var(--campaign-teal-deep);
    background: linear-gradient(135deg, rgba(14,137,126,.09), rgba(213,160,76,.07));
}
.main-nav a.active { box-shadow: inset 0 0 0 1px rgba(14,137,126,.13); }
.header-actions { gap: 9px; }
.theme-toggle, .btn-account {
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    border-color: rgba(14,137,126,.14);
}
.btn-booking {
    border-radius: 15px;
    box-shadow: 0 13px 28px rgba(14,137,126,.22);
}

.clinic-signature-bar {
    background: rgba(255,255,255,.78);
    border-bottom: 1px solid rgba(14,137,126,.10);
    backdrop-filter: blur(14px);
}
.clinic-signature-bar__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr)) auto;
    align-items: center;
    gap: 10px;
    min-height: 70px;
}
.clinic-signature-bar__inner > span {
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-left: 1px solid rgba(14,137,126,.10);
}
.clinic-signature-bar__inner > span i {
    grid-row: 1 / 3;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--campaign-teal);
    background: var(--campaign-teal-soft);
    border-radius: 13px;
    font-size: 1.25rem;
}
.clinic-signature-bar__inner b { color: var(--campaign-ink); font-size: .88rem; }
.clinic-signature-bar__inner small { color: var(--campaign-muted); font-size: .72rem; }
.clinic-signature-bar__inner > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--campaign-gold), #bd8434);
    box-shadow: 0 10px 24px rgba(180,122,45,.20);
    font-weight: 800;
}
.clinic-signature-bar__inner > a:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(180,122,45,.28); }

/* Buttons */
.btn {
    border-radius: 15px;
    min-height: 46px;
    padding-inline: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.btn-lg { min-height: 54px; border-radius: 17px; padding-inline: 25px; }
.btn-primary {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #11a195 0%, #087a71 62%, #075d57 100%);
    box-shadow: 0 13px 28px rgba(14,137,126,.20), inset 0 1px 0 rgba(255,255,255,.23);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(14,137,126,.28); }
.btn-outline {
    color: var(--campaign-teal-deep);
    border: 1px solid rgba(14,137,126,.27);
    background: rgba(255,255,255,.80);
    backdrop-filter: blur(8px);
}
.btn-outline:hover { color: #fff; background: var(--campaign-teal); border-color: var(--campaign-teal); transform: translateY(-2px); }
.btn-ghost { color: #4e6864; border: 1px dashed rgba(14,137,126,.26); background: rgba(255,255,255,.50); }

/* Home hero */
.page-index .hero {
    padding: clamp(34px, 5vw, 74px) 0 clamp(72px, 8vw, 112px);
    background: transparent;
}
.page-index .hero-inner {
    position: relative;
    grid-template-columns: minmax(0, 1.06fr) minmax(410px, .94fr);
    gap: clamp(30px, 5vw, 72px);
    min-height: 650px;
    padding: clamp(32px, 5vw, 72px);
    border: 1px solid rgba(14,137,126,.15);
    border-radius: 44px;
    overflow: hidden;
    background:
        radial-gradient(circle at 9% 5%, rgba(213,160,76,.19), transparent 28%),
        radial-gradient(circle at 95% 82%, rgba(14,137,126,.18), transparent 33%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,249,247,.94));
    box-shadow: 0 38px 100px rgba(10,74,68,.14);
    isolation: isolate;
}
.page-index .hero-inner::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border: 1px solid rgba(14,137,126,.11);
    border-radius: 50%;
    right: -160px;
    top: -170px;
    box-shadow: 0 0 0 42px rgba(14,137,126,.025), 0 0 0 86px rgba(213,160,76,.022);
    z-index: -1;
}
.page-index .hero-content { align-self: center; position: relative; z-index: 2; }
.hero-badge {
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(14,137,126,.18);
    background: rgba(255,255,255,.78);
    box-shadow: 0 8px 25px rgba(15,77,72,.07);
}
.hero-title { color: var(--campaign-ink); font-size: clamp(2.8rem, 5.2vw, 5.1rem); line-height: 1.16; letter-spacing: -.055em; }
.hero-title .accent { color: transparent; background: linear-gradient(135deg, var(--campaign-teal), var(--campaign-gold)); background-clip: text; -webkit-background-clip: text; }
.hero-lead { color: var(--campaign-teal-deep); font-weight: 850; font-size: clamp(1.05rem, 1.7vw, 1.34rem); }
.hero-desc { color: var(--campaign-muted); line-height: 2.05; max-width: 670px; }
.hero-actions { gap: 11px; }
.hero-stats {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}
.hero-stats .stat-item {
    position: relative;
    padding: 16px 14px;
    border: 1px solid rgba(14,137,126,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.73);
    box-shadow: 0 10px 28px rgba(13,70,65,.06);
}
.hero-stats .stat-item strong { color: var(--campaign-teal-deep); font-size: 1.45rem; }
.hero-stats .stat-item span { color: var(--campaign-muted); font-size: .77rem; }
.hero-visual { position: relative; align-self: center; }
.hero-visual::before {
    content: "";
    position: absolute;
    inset: -22px;
    z-index: -1;
    border-radius: 40px;
    background: linear-gradient(145deg, rgba(14,137,126,.18), rgba(213,160,76,.13));
    filter: blur(1px);
    transform: rotate(2deg);
}
.video-slider {
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 32px;
    overflow: hidden;
    background: rgba(255,255,255,.90);
    box-shadow: 0 30px 72px rgba(10,64,59,.20);
}
.video-poster__media { border-radius: 0; }
.video-poster__body { padding: 23px 24px 27px; }
.video-poster__badge { border: 1px solid rgba(255,255,255,.65); backdrop-filter: blur(12px); }
.video-poster__play { box-shadow: 0 0 0 11px rgba(255,255,255,.18), 0 14px 30px rgba(0,0,0,.18); }

/* Shared internal page hero */
.page-header, .page-hero {
    padding: clamp(34px, 5vw, 70px) 0 30px;
    background: transparent;
    border: 0;
}
.page-header > .container, .page-hero > .container {
    position: relative;
    min-height: clamp(260px, 30vw, 390px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(34px, 5vw, 68px);
    overflow: hidden;
    border: 1px solid rgba(14,137,126,.15);
    border-radius: 40px;
    background:
        radial-gradient(circle at 10% 10%, rgba(213,160,76,.17), transparent 29%),
        radial-gradient(circle at 88% 92%, rgba(14,137,126,.19), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.99), rgba(238,249,247,.95));
    box-shadow: 0 28px 76px rgba(9,72,66,.12);
    isolation: isolate;
}
.page-header > .container::before, .page-hero > .container::before {
    content: "";
    position: absolute;
    width: 290px;
    height: 290px;
    left: -120px;
    top: -150px;
    border: 1px solid rgba(213,160,76,.22);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(213,160,76,.035), 0 0 0 78px rgba(14,137,126,.025);
    z-index: -1;
}
.page-header > .container::after, .page-hero > .container::after {
    content: "";
    position: absolute;
    left: 42px;
    bottom: 33px;
    width: 102px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--campaign-gold), var(--campaign-teal));
    opacity: .88;
}
.page-title { max-width: 930px; margin-top: 15px; font-size: clamp(2.45rem, 5vw, 4.65rem); line-height: 1.22; }
.page-desc { max-width: 850px; margin-top: 14px; }
.breadcrumb {
    width: fit-content;
    margin-top: 22px;
    padding: 8px 13px;
    border: 1px solid rgba(14,137,126,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.66);
    backdrop-filter: blur(10px);
    color: #66807b;
}
.breadcrumb a:hover { color: var(--campaign-teal); }

/* Shared cards */
.service-card, .device-card, .device-page-card, .blog-card, .doctor-card,
.svc-cat-card, .testimonial-card, .value-box, .contact-info-card,
.detail-section, .aside-card, .doctor-content-card, .doctor-directory-card,
.doctor-booking-card, .doctor-note, .result-card, .method-card,
.trust-card, .staff-card, .doctor-video-card, .blog-category-panel {
    border-radius: var(--campaign-radius);
    border: 1px solid rgba(14,137,126,.13);
    background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(249,252,251,.97));
    box-shadow: var(--campaign-shadow-sm);
}
.service-card, .device-card, .device-page-card, .blog-card, .doctor-card,
.svc-cat-card, .testimonial-card, .method-card, .trust-card,
.doctor-directory-card, .result-card {
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.service-card:hover, .device-card:hover, .device-page-card:hover, .blog-card:hover,
.doctor-card:hover, .svc-cat-card:hover, .testimonial-card:hover,
.method-card:hover, .trust-card:hover, .doctor-directory-card:hover, .result-card:hover {
    transform: translateY(-8px);
    border-color: rgba(213,160,76,.40);
    box-shadow: var(--campaign-shadow);
}
.service-card { position: relative; padding: 29px; overflow: hidden; }
.service-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(213,160,76,.13), transparent 70%);
}
.service-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: linear-gradient(145deg, var(--campaign-teal), var(--campaign-teal-deep));
    color: #fff;
    box-shadow: 0 14px 28px rgba(14,137,126,.22);
}
.service-title { color: var(--campaign-ink); font-family: var(--font-display); font-size: 1.35rem; }
.service-desc { color: var(--campaign-muted); line-height: 1.95; }
.service-price { color: #8b612a; background: var(--campaign-gold-soft); border-radius: 999px; padding: 5px 10px; }
.service-link { color: var(--campaign-teal); font-weight: 800; }

/* Service categories */
.svc-cat-grid { gap: 24px; }
.svc-cat-card { position: relative; overflow: hidden; padding: 28px; }
.svc-cat-card::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    left: -75px;
    bottom: -80px;
    border-radius: 50%;
    background: rgba(14,137,126,.06);
}
.svc-cat-card__icon { border-radius: 18px; background: linear-gradient(145deg, var(--campaign-teal-soft), #fff); color: var(--campaign-teal); }
.svc-cat-card__count { border-radius: 999px; background: var(--campaign-gold-soft); color: #8a5e27; }
.svc-cat-card__list li { border-bottom-color: rgba(14,137,126,.08); }
.svc-cat-card__cta { color: var(--campaign-teal-deep); font-weight: 850; }

/* Detail heroes: service and device */
.device-hero {
    padding: clamp(38px, 5vw, 74px) 0 34px;
    background: transparent;
}
.device-hero__inner {
    position: relative;
    grid-template-columns: minmax(0,1.06fr) minmax(350px,.94fr);
    min-height: 520px;
    gap: clamp(28px,5vw,68px);
    padding: clamp(34px,5vw,68px);
    border: 1px solid rgba(14,137,126,.15);
    border-radius: 42px;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 10%, rgba(213,160,76,.18), transparent 28%),
        radial-gradient(circle at 8% 90%, rgba(14,137,126,.18), transparent 33%),
        linear-gradient(135deg, rgba(255,255,255,.99), rgba(238,249,247,.95));
    box-shadow: 0 32px 86px rgba(9,72,66,.14);
}
.device-hero__text { align-self: center; }
.device-hero__title { color: var(--campaign-ink); font-family: var(--font-display); font-size: clamp(2.65rem,5vw,4.8rem); line-height: 1.19; letter-spacing: -.05em; }
.device-hero__short { color: var(--campaign-muted); font-size: 1.08rem; line-height: 2; }
.device-hero__media {
    align-self: center;
    min-height: 390px;
    border-radius: 32px;
    padding: 12px;
    background: linear-gradient(145deg, rgba(14,137,126,.13), rgba(213,160,76,.13));
    box-shadow: 0 28px 66px rgba(14,72,67,.15);
    transform: rotate(-1deg);
}
.device-hero__media img, .device-hero__ph { border-radius: 25px; }
.device-hero__ph {
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.92), transparent 32%),
        linear-gradient(145deg, #e9f7f5, #fff8ed);
    border: 1px solid rgba(255,255,255,.85);
}
.device-hero__ph i { color: var(--campaign-teal); filter: drop-shadow(0 10px 18px rgba(14,137,126,.16)); }
.device-video {
    border-radius: 34px;
    border: 1px solid rgba(14,137,126,.14);
    background: #fff;
    box-shadow: var(--campaign-shadow);
    overflow: hidden;
}
.device-video__frame { border-radius: 0; }
.device-video__caption { padding: 28px 32px; }
.device-video__caption h2 { font-family: var(--font-display); color: var(--campaign-ink); }
.device-detail-grid, .single-grid { gap: 34px; }
.device-side-card { border-radius: 24px; border: 1px solid rgba(14,137,126,.14); background: linear-gradient(145deg,#fff,#f5faf9); box-shadow: var(--campaign-shadow-sm); }

/* Devices listing */
.device-rooms-strip { background: transparent; border: 0; padding-top: 18px; }
.device-rooms-strip__grid {
    border: 1px solid rgba(14,137,126,.13);
    border-radius: 26px;
    background: rgba(255,255,255,.82);
    box-shadow: var(--campaign-shadow-sm);
    backdrop-filter: blur(12px);
}
.device-page-card { overflow: hidden; }
.device-page-card__media { background: linear-gradient(145deg,#e7f6f4,#fff5e5); }
.device-page-card__body { padding: 24px; }
.device-page-card__body h2 { color: var(--campaign-ink); font-family: var(--font-display); }

/* Doctors */
.doctors-intro-strip { background: transparent; border: 0; padding-top: 12px; }
.doctors-intro-strip > .container {
    border: 1px solid rgba(14,137,126,.13);
    border-radius: 24px;
    background: rgba(255,255,255,.84);
    box-shadow: var(--campaign-shadow-sm);
    overflow: hidden;
}
.doctor-directory-grid { gap: 26px; }
.doctor-directory-card { border-radius: 30px; }
.doctor-directory-card__media { background: linear-gradient(145deg,#eaf6f4,#fef7e9); }
.doctor-directory-card__body { padding: 25px; }
.doctor-directory-card__specialty { width: fit-content; padding: 6px 10px; border-radius: 999px; background: var(--campaign-teal-soft); }
.doctor-directory-card h2 { font-family: var(--font-display); font-size: 1.55rem; }
.doctor-directory-card__actions .btn { border-radius: 13px; }
.schedule-poster { border-radius: 30px; padding: 10px; background: linear-gradient(145deg,rgba(14,137,126,.13),rgba(213,160,76,.12)); box-shadow: var(--campaign-shadow); }
.schedule-poster img { border-radius: 22px; }

.doctor-profile-page { background: transparent; }
.doctor-profile-hero { padding: 42px 0 34px; }
.doctor-profile-hero__grid {
    position: relative;
    padding: clamp(30px,5vw,64px);
    border: 1px solid rgba(14,137,126,.15);
    border-radius: 42px;
    background:
        radial-gradient(circle at 8% 10%, rgba(213,160,76,.17), transparent 28%),
        radial-gradient(circle at 90% 90%, rgba(14,137,126,.17), transparent 34%),
        linear-gradient(135deg,#fff,#edf8f6);
    box-shadow: 0 32px 84px rgba(9,72,66,.13);
}
.doctor-profile-hero__media { border-radius: 32px; padding: 9px; background: linear-gradient(145deg,rgba(14,137,126,.20),rgba(213,160,76,.18)); box-shadow: 0 28px 68px rgba(13,70,65,.17); }
.doctor-profile-hero__media img, .doctor-profile-hero__placeholder { border-radius: 25px; }
.doctor-profile-hero__content h1 { color: var(--campaign-ink); font-family: var(--font-display); font-size: clamp(2.6rem,5vw,4.7rem); }
.doctor-profile-facts span { border: 1px solid rgba(14,137,126,.12); border-radius: 16px; background: rgba(255,255,255,.76); }
.doctor-anchor-nav { background: rgba(255,255,255,.90); backdrop-filter: blur(16px); border-block-color: rgba(14,137,126,.10); box-shadow: 0 12px 32px rgba(13,69,64,.07); }
.doctor-anchor-nav a { border-radius: 999px; }
.doctor-anchor-nav a:hover { background: var(--campaign-teal-soft); color: var(--campaign-teal-deep); }
.doctor-content-card { padding: clamp(24px,3vw,38px); }
.doctor-content-card h2 { font-family: var(--font-display); color: var(--campaign-ink); }
.doctor-expertise-grid > div, .doctor-credentials-grid > div { border-radius: 16px; background: linear-gradient(145deg,#f6fbfa,#fff); border-color: rgba(14,137,126,.10); }
.doctor-booking-card { padding: 30px; background: linear-gradient(145deg,#075e58,#0e897e); color: #fff; border-color: rgba(255,255,255,.14); box-shadow: 0 28px 66px rgba(7,94,88,.25); }
.doctor-booking-card h2, .doctor-booking-card p, .doctor-booking-card > i { color: #fff; }
.doctor-booking-card .btn-primary { background: linear-gradient(135deg,var(--campaign-gold),#b97e31); }
.doctor-booking-card .btn-outline { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.10); }
.doctor-related-card { border-radius: 18px; border: 1px solid rgba(14,137,126,.12); background: #fff; box-shadow: 0 10px 26px rgba(13,70,65,.06); }

/* Blog listing and cards */
.blog-section-head { margin-bottom: 30px; }
.blog-section-head h2 { font-family: var(--font-display); color: var(--campaign-ink); font-size: clamp(1.8rem,3vw,2.7rem); }
.blog-category-panel { padding: 23px; }
.blog-card { overflow: hidden; }
.blog-image { position: relative; overflow: hidden; background: linear-gradient(145deg,#e8f6f4,#fff6e7); }
.blog-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(7,53,49,.18),transparent 54%); pointer-events: none; }
.blog-image img { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.blog-card:hover .blog-image img { transform: scale(1.055); }
.blog-content { padding: 24px; }
.blog-title, .blog-content h3 { font-family: var(--font-display); color: var(--campaign-ink); line-height: 1.62; }
.blog-excerpt { color: var(--campaign-muted); line-height: 1.95; }
.blog-category { border-radius: 999px; background: var(--campaign-gold-soft); color: #875b24; }
.filter-tab { border-radius: 999px; }
.filter-tab.active, .filter-tab:hover { background: linear-gradient(135deg,var(--campaign-teal),var(--campaign-teal-deep)); color:#fff; box-shadow: 0 10px 24px rgba(14,137,126,.18); }

/* Article page */
.page-post .page-header > .container { min-height: 320px; }
.page-post .single-grid { align-items: start; }
.detail-hero-image { border-radius: 30px; padding: 8px; background: linear-gradient(145deg,rgba(14,137,126,.15),rgba(213,160,76,.14)); box-shadow: var(--campaign-shadow); }
.detail-hero-image img { border-radius: 23px; }
.detail-section.article-body, .article-body, .post-content {
    color: #314a46;
    font-size: clamp(1rem,1.2vw,1.08rem);
    line-height: 2.15;
}
.detail-section { padding: clamp(24px,3.5vw,42px); }
.article-body h2, .post-content h2, .detail-section h2 {
    position: relative;
    padding: 14px 18px 14px 0;
    color: var(--campaign-ink);
    font-family: var(--font-display);
    font-size: clamp(1.65rem,2.7vw,2.35rem);
    border-bottom: 1px solid rgba(14,137,126,.12);
}
.article-body h2::before, .post-content h2::before, .detail-section h2::before {
    content: "";
    position: absolute;
    right: 0;
    top: 17px;
    bottom: 17px;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(var(--campaign-teal),var(--campaign-gold));
}
.article-body h3, .post-content h3 { color: #22544e; font-family: var(--font-display); }
.article-body blockquote, .post-content blockquote {
    border: 1px solid rgba(213,160,76,.25);
    border-right: 5px solid var(--campaign-gold);
    border-radius: 18px;
    background: linear-gradient(145deg,#fffaf0,#fff);
    box-shadow: 0 12px 28px rgba(114,78,31,.06);
}
.article-body table, .post-content table { display: table; width: 100%; border: 1px solid rgba(14,137,126,.14); box-shadow: 0 10px 26px rgba(13,70,65,.05); }
.article-body th, .post-content th { background: linear-gradient(135deg,var(--campaign-teal),var(--campaign-teal-deep)); color:#fff; }
.article-body td, .post-content td { border-color: rgba(14,137,126,.09); }
.article-body ul li::marker, .post-content ul li::marker { color: var(--campaign-teal); }
.aside-card { overflow: hidden; }
.cta-card { background: linear-gradient(145deg,#075e58,#0e897e); color:#fff; border-color:transparent; box-shadow: 0 24px 58px rgba(7,94,88,.22); }
.cta-card h3, .cta-card p { color:#fff; }
.comments { border-radius: 28px; border:1px solid rgba(14,137,126,.13); background:#fff; box-shadow: var(--campaign-shadow-sm); padding: clamp(22px,3vw,36px); }

/* Gallery */
.gallery-filter-tabs { padding: 8px; border: 1px solid rgba(14,137,126,.12); border-radius: 999px; background: rgba(255,255,255,.82); box-shadow: var(--campaign-shadow-sm); width: fit-content; margin-inline: auto; }
.results-shell { padding: 16px; border: 1px solid rgba(14,137,126,.11); border-radius: 32px; background: rgba(255,255,255,.72); box-shadow: var(--campaign-shadow); }
.results-rail { padding: .3rem .15rem 1.1rem; }
.result-card { border-radius: 24px; }
.result-card__image { background: linear-gradient(145deg,#e6f5f3,#fff5e5); }
.result-card__head h2 { font-family: var(--font-display); color: var(--campaign-ink); }
.results-control { width: 50px; height: 50px; border-color: rgba(14,137,126,.16); box-shadow: 0 13px 28px rgba(13,70,65,.14); }
.gallery-context-banner, .gallery-note { border-radius: 18px; }

/* About */
.about-grid { gap: clamp(34px,6vw,80px); align-items: center; }
.about-content h2, .clinic-tour h2 { font-family: var(--font-display); color: var(--campaign-ink); }
.about-content > p { color: var(--campaign-muted); line-height: 2.1; }
.about-features li { border: 1px solid rgba(14,137,126,.10); border-radius: 16px; background: rgba(255,255,255,.78); padding: 13px 15px; }
.hero-image-placeholder { border-radius: 34px !important; background: linear-gradient(145deg,#e6f5f3,#fff6e7) !important; border:1px solid rgba(14,137,126,.13); box-shadow: var(--campaign-shadow); }
.clinic-tour__item { border-radius: 25px; overflow: hidden; box-shadow: var(--campaign-shadow-sm); }
.stats-grid { border-radius: 34px; background: linear-gradient(135deg,#075e58,#0e897e); box-shadow: 0 30px 76px rgba(7,94,88,.23); }
.stat-box strong { color:#fff; }
.stat-box span { color:rgba(255,255,255,.74); }

/* Contact and forms */
.contact-grid { gap: clamp(28px,5vw,70px); align-items: start; }
.contact-info-card, .booking-form-page, .booking-form {
    border: 1px solid rgba(14,137,126,.14);
    border-radius: 30px;
    background: linear-gradient(145deg,#fff,#f7fbfa);
    box-shadow: var(--campaign-shadow);
}
.contact-info-card { overflow: hidden; }
.contact-item { border-bottom-color: rgba(14,137,126,.09); }
.contact-item i { color: var(--campaign-teal); background: var(--campaign-teal-soft); border-radius: 14px; }
.booking-form-page, .booking-form { padding: clamp(24px,4vw,42px); }
.booking-form-page h2, .booking-form h2 { font-family: var(--font-display); color: var(--campaign-ink); }
.form-group label { color: #38534f; font-weight: 780; }
.form-control, input, select, textarea {
    border-radius: 14px;
}
.booking-form-page input, .booking-form-page select, .booking-form-page textarea,
.booking-form input, .booking-form select, .booking-form textarea {
    min-height: 50px;
    border: 1px solid rgba(14,137,126,.15);
    background: rgba(255,255,255,.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}
.booking-form-page input:focus, .booking-form-page select:focus, .booking-form-page textarea:focus,
.booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus {
    border-color: var(--campaign-teal);
    box-shadow: 0 0 0 4px rgba(14,137,126,.10);
}
.map-placeholder { border-radius: 28px; border: 1px solid rgba(14,137,126,.14); background: linear-gradient(145deg,#e9f7f5,#fff8ed); }
.support-gallery__grid > * { border-radius: 22px; overflow: hidden; box-shadow: var(--campaign-shadow-sm); }

/* Booking CTA and global conversion */
.booking-cta {
    padding-block: clamp(64px,8vw,105px);
    background: transparent;
}
.booking-cta .booking-inner, .booking-cta-simple {
    position: relative;
    overflow: hidden;
    padding: clamp(32px,5vw,60px);
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.15);
    background:
        radial-gradient(circle at 8% 5%, rgba(213,160,76,.32), transparent 29%),
        linear-gradient(135deg,#064f4a,#0e897e 68%,#0b756d);
    box-shadow: 0 32px 82px rgba(7,94,88,.25);
}
.booking-cta h2, .booking-cta p, .booking-cta-simple h2, .booking-cta-simple p { color:#fff; }
.booking-cta .btn-primary, .booking-cta-simple .btn-primary { background: linear-gradient(135deg,var(--campaign-gold),#b7792d); box-shadow: 0 14px 32px rgba(143,92,31,.26); }

.global-conversion-panel { padding: 48px 0 22px; }
.global-conversion-panel__card {
    position: relative;
    display: grid;
    grid-template-columns: 84px minmax(0,1fr) auto;
    align-items: center;
    gap: 28px;
    padding: clamp(28px,4vw,48px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 34px;
    background:
        radial-gradient(circle at 5% 10%, rgba(213,160,76,.34), transparent 25%),
        radial-gradient(circle at 90% 120%, rgba(255,255,255,.14), transparent 30%),
        linear-gradient(135deg,#064d48,#0e897e 66%,#087067);
    box-shadow: 0 34px 88px rgba(7,84,78,.24);
}
.global-conversion-panel__card::after {
    content:"";
    position:absolute;
    left:-80px;
    top:-100px;
    width:280px;
    height:280px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 70px rgba(213,160,76,.04);
}
.global-conversion-panel__icon {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 26px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    font-size: 2.2rem;
}
.global-conversion-panel__content { position:relative; z-index:1; }
.global-conversion-panel__content > span { color: #ffe0aa; font-weight: 850; }
.global-conversion-panel__content h2 { margin-top: 6px; color:#fff; font-family:var(--font-display); font-size:clamp(1.65rem,3vw,2.65rem); line-height:1.45; }
.global-conversion-panel__content p { color:rgba(255,255,255,.76); line-height:1.9; }
.global-conversion-panel__actions { position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; min-width:190px; }
.global-conversion-panel__actions .btn-primary { background:linear-gradient(135deg,var(--campaign-gold),#b87a2d); }
.global-conversion-panel__actions .btn-outline { color:#fff; border-color:rgba(255,255,255,.36); background:rgba(255,255,255,.09); }

/* Footer */
.site-footer {
    margin-top: 26px;
    padding-top: 74px;
    color: rgba(255,255,255,.78);
    background:
        radial-gradient(circle at 8% 0, rgba(213,160,76,.16), transparent 30%),
        linear-gradient(145deg,#071d1b,#0b302d 56%,#08231f);
    border-top: 1px solid rgba(213,160,76,.18);
}
.footer-title { color:#fff; font-family:var(--font-display); }
.footer-about, .footer-links a, .footer-contact { color:rgba(255,255,255,.68); }
.footer-links a:hover, .footer-contact a:hover { color:#ffdca2; transform:translateX(-3px); }
.footer-social a { border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.07); color:#fff; border-radius:14px; }
.footer-social a:hover { background:var(--campaign-teal); border-color:var(--campaign-teal); transform:translateY(-4px); }
.footer-bottom { border-top-color:rgba(255,255,255,.10); }
.badge-item { color:rgba(255,255,255,.72); }

/* Mobile floating controls */
.call-float, .support-float { box-shadow: 0 15px 32px rgba(6,77,71,.23); }
.mobile-cta-bar { border-top: 1px solid rgba(14,137,126,.13); background: rgba(255,255,255,.94); backdrop-filter: blur(20px); }
.mobile-cta-bar__item--primary { color:#fff; background:linear-gradient(135deg,var(--campaign-teal),var(--campaign-teal-deep)); border-radius:15px; margin-block:7px; }

/* Reveal motion */
.ui-ready .ui-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.ui-ready .ui-reveal.is-visible { opacity: 1; transform: none; }
.ui-ready .ui-reveal[data-ui-delay="1"] { transition-delay: .06s; }
.ui-ready .ui-reveal[data-ui-delay="2"] { transition-delay: .12s; }
.ui-ready .ui-reveal[data-ui-delay="3"] { transition-delay: .18s; }

/* Dark mode support */
html:not([data-theme="light"]) body.site-public {
    background:
        radial-gradient(circle at 9% 4%, rgba(213,160,76,.08), transparent 24rem),
        radial-gradient(circle at 91% 18%, rgba(14,137,126,.12), transparent 28rem),
        #08100f;
}
html:not([data-theme="light"]) .site-header { background:rgba(8,18,17,.88); border-color:rgba(255,255,255,.07); }
html:not([data-theme="light"]) .clinic-signature-bar { background:rgba(8,18,17,.88); }
html:not([data-theme="light"]) .main-nav a { color:#c6d8d5; }
html:not([data-theme="light"]) .page-index .hero-inner,
html:not([data-theme="light"]) .page-header > .container,
html:not([data-theme="light"]) .page-hero > .container,
html:not([data-theme="light"]) .device-hero__inner,
html:not([data-theme="light"]) .doctor-profile-hero__grid {
    background:
        radial-gradient(circle at 10% 10%, rgba(213,160,76,.12), transparent 29%),
        radial-gradient(circle at 90% 90%, rgba(14,137,126,.17), transparent 34%),
        linear-gradient(135deg,#101d1b,#0d1716);
    border-color:rgba(255,255,255,.08);
}
html:not([data-theme="light"]) .hero-title,
html:not([data-theme="light"]) .section-title,
html:not([data-theme="light"]) .page-title,
html:not([data-theme="light"]) .device-hero__title,
html:not([data-theme="light"]) .doctor-profile-hero__content h1,
html:not([data-theme="light"]) .service-title,
html:not([data-theme="light"]) .blog-title,
html:not([data-theme="light"]) .blog-content h3,
html:not([data-theme="light"]) .article-body h2,
html:not([data-theme="light"]) .post-content h2,
html:not([data-theme="light"]) .detail-section h2 { color:#f2f8f7; }
html:not([data-theme="light"]) .service-card,
html:not([data-theme="light"]) .device-card,
html:not([data-theme="light"]) .device-page-card,
html:not([data-theme="light"]) .blog-card,
html:not([data-theme="light"]) .doctor-card,
html:not([data-theme="light"]) .svc-cat-card,
html:not([data-theme="light"]) .testimonial-card,
html:not([data-theme="light"]) .doctor-content-card,
html:not([data-theme="light"]) .doctor-directory-card,
html:not([data-theme="light"]) .result-card,
html:not([data-theme="light"]) .detail-section,
html:not([data-theme="light"]) .aside-card,
html:not([data-theme="light"]) .comments,
html:not([data-theme="light"]) .contact-info-card,
html:not([data-theme="light"]) .booking-form-page {
    background:linear-gradient(145deg,#111d1b,#0d1716);
    border-color:rgba(255,255,255,.08);
}
html:not([data-theme="light"]) .hero-desc,
html:not([data-theme="light"]) .section-desc,
html:not([data-theme="light"]) .page-desc,
html:not([data-theme="light"]) .service-desc,
html:not([data-theme="light"]) .blog-excerpt,
html:not([data-theme="light"]) .article-body,
html:not([data-theme="light"]) .post-content { color:#b3c6c2; }

/* Responsive */
@media (max-width: 1180px) {
    .clinic-signature-bar__inner { grid-template-columns: repeat(3,1fr); padding-block: 8px; }
    .clinic-signature-bar__inner > a { grid-column: 1 / -1; justify-content:center; margin-bottom:6px; }
    .page-index .hero-inner, .device-hero__inner { grid-template-columns: 1fr 420px; }
    .global-conversion-panel__card { grid-template-columns: 72px 1fr; }
    .global-conversion-panel__actions { grid-column: 1 / -1; flex-direction:row; padding-right:100px; }
}

@media (max-width: 900px) {
    :root { --campaign-container: min(100% - 32px, 1320px); }
    .clinic-signature-bar { display:none; }
    .page-index .hero-inner, .device-hero__inner { grid-template-columns:1fr; min-height:unset; }
    .page-index .hero-visual { order:-1; width:min(100%,620px); margin-inline:auto; }
    .page-index .hero-inner, .page-header > .container, .page-hero > .container, .device-hero__inner, .doctor-profile-hero__grid { border-radius:32px; }
    .device-hero__media { min-height:320px; transform:none; }
    .global-conversion-panel__actions { padding-right:0; }
    .main-nav { background:rgba(255,255,255,.98); backdrop-filter:blur(18px); }
    html:not([data-theme="light"]) .main-nav { background:rgba(8,18,17,.98); }
}

@media (max-width: 640px) {
    :root { --campaign-container: calc(100% - 24px); }
    .section { padding-block:60px; }
    .topbar { min-height:34px; }
    .header-inner { min-height:68px; }
    .page-index .hero { padding-top:18px; }
    .page-index .hero-inner { padding:24px 18px 30px; border-radius:25px; }
    .hero-title { font-size:2.45rem; }
    .hero-actions { display:grid; grid-template-columns:1fr; }
    .hero-stats { grid-template-columns:1fr; }
    .hero-stats .stat-item { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; }
    .page-header, .page-hero { padding-top:20px; }
    .page-header > .container, .page-hero > .container { min-height:280px; padding:30px 20px; border-radius:25px; }
    .page-header > .container::after, .page-hero > .container::after { left:22px; bottom:22px; }
    .page-title { font-size:2.35rem; }
    .device-hero { padding-top:20px; }
    .device-hero__inner { padding:26px 18px; border-radius:25px; }
    .device-hero__title { font-size:2.4rem; }
    .device-hero__media { min-height:250px; border-radius:24px; }
    .device-hero__media img, .device-hero__ph { border-radius:18px; }
    .service-card, .svc-cat-card, .blog-content, .device-page-card__body { padding:22px; }
    .gallery-filter-tabs { width:100%; overflow-x:auto; justify-content:flex-start; border-radius:18px; }
    .results-shell { padding:9px; border-radius:24px; }
    .global-conversion-panel { padding-top:30px; }
    .global-conversion-panel__card { grid-template-columns:1fr; text-align:center; padding:30px 20px; border-radius:26px; }
    .global-conversion-panel__icon { margin-inline:auto; }
    .global-conversion-panel__actions { grid-column:auto; flex-direction:column; }
    .site-footer { padding-top:58px; }
    .float-actions, .support-float { bottom:84px; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-ready .ui-reveal { opacity:1 !important; transform:none !important; transition:none !important; }
    .site-scroll-progress { display:none; }
}

/* Page hero aliases used by equipment archive */
.page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 14px;
    border: 1px solid var(--campaign-line-gold);
    border-radius: 999px;
    color: var(--campaign-gold-deep);
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,247,233,.94));
    font-weight: 850;
}
.page-hero__title {
    max-width: 930px;
    margin-top: 15px;
    color: var(--campaign-ink);
    font-family: var(--font-display);
    font-size: clamp(2.45rem, 5vw, 4.65rem);
    line-height: 1.22;
    letter-spacing: -.045em;
}
.page-hero__desc {
    max-width: 850px;
    margin-top: 14px;
    color: var(--campaign-muted);
    line-height: 2;
    font-size: clamp(.96rem, 1.2vw, 1.1rem);
}

/* Account, login and support pages */
.auth-wrap {
    max-width: 760px;
    margin-inline: auto;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid rgba(14,137,126,.14);
    border-radius: 32px;
    background: linear-gradient(145deg,#fff,#f5faf9);
    box-shadow: var(--campaign-shadow);
}
.auth-tabs {
    padding: 7px;
    border: 1px solid rgba(14,137,126,.11);
    border-radius: 18px;
    background: var(--campaign-teal-soft);
}
.auth-tab { border-radius: 13px; }
.auth-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg,var(--campaign-teal),var(--campaign-teal-deep));
    box-shadow: 0 10px 24px rgba(14,137,126,.18);
}
.auth-input {
    border: 1px solid rgba(14,137,126,.15);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
}
.auth-input:focus-within { border-color: var(--campaign-teal); box-shadow: 0 0 0 4px rgba(14,137,126,.10); }
.auth-choice__item { border-radius: 15px; border-color: rgba(14,137,126,.12); background:#fff; }
.auth-note { border-radius: 18px; background:var(--campaign-gold-soft); border:1px solid rgba(213,160,76,.22); }
.auth-alert { border-radius: 16px; }

.account-layout { gap: 28px; align-items:start; }
.account-sidebar {
    border: 1px solid rgba(14,137,126,.13);
    border-radius: 28px;
    background: linear-gradient(145deg,#fff,#f5faf9);
    box-shadow: var(--campaign-shadow-sm);
    overflow: hidden;
}
.account-profile { background: linear-gradient(145deg,var(--campaign-teal-soft),#fff8ec); }
.account-nav a { margin: 5px 8px; border-radius: 13px; }
.account-nav a.is-active, .account-nav a:hover { color:#fff; background:linear-gradient(135deg,var(--campaign-teal),var(--campaign-teal-deep)); }
.account-main, .account-section, .visit-detail, .ticket-view,
.tier-card, .wallet-card, .ticket-row {
    border: 1px solid rgba(14,137,126,.13);
    border-radius: 24px;
    background: linear-gradient(145deg,#fff,#f8fbfa);
    box-shadow: var(--campaign-shadow-sm);
}
.account-main { padding: clamp(20px,3vw,34px); }
.account-section, .visit-detail, .ticket-view, .tier-card, .wallet-card { padding: clamp(20px,3vw,30px); }
.account-section__title, .visit-detail h2, .ticket-view h2 { color:var(--campaign-ink); font-family:var(--font-display); }
.ticket-row { transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.ticket-row:hover { transform:translateY(-3px); border-color:rgba(213,160,76,.36); box-shadow:var(--campaign-shadow); }
.ticket-msg__bubble { border-radius:17px; }
.ticket-textarea { border-radius:15px; border:1px solid rgba(14,137,126,.15); }

/* Generic detail categories */
.device-detail {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(280px,360px);
    gap: 34px;
    align-items:start;
}
.device-detail__main {
    padding: clamp(24px,3.5vw,42px);
    border: 1px solid rgba(14,137,126,.13);
    border-radius: 28px;
    background: linear-gradient(145deg,#fff,#f8fbfa);
    box-shadow: var(--campaign-shadow-sm);
}
.device-detail__h2 { color:var(--campaign-ink); font-family:var(--font-display); }
.tip-box { border-radius:18px; border:1px solid rgba(213,160,76,.24); background:var(--campaign-gold-soft); }

@media (max-width: 900px) {
    .device-detail { grid-template-columns:1fr; }
    .account-layout { grid-template-columns:1fr; }
    .account-sidebar { position:static; }
}

@media (max-width: 640px) {
    .page-hero__title { font-size:2.35rem; }
    .auth-wrap { padding:20px 16px; border-radius:24px; }
    .account-main { padding:16px; border-radius:22px; }
}