/* =========================================================================
   Radynex Teleradiology — Stylesheet
   Brand: navy #0E2A55 · red #C41E1E · pulled from the Radynex logo
   ========================================================================= */

:root{
    --navy:        #0E2A55;
    --navy-700:    #122F61;
    --navy-500:    #1C4B8C;
    --navy-300:    #3D6FB8;
    --red:         #C41E1E;
    --red-600:     #b01919;
    --red-400:     #e23a2e;
    --ink:         #16233d;
    --muted:       #5b6b86;
    --line:        #e6ecf4;
    --bg:          #ffffff;
    --bg-soft:     #f4f7fc;
    --bg-soft-2:   #eef3fa;
    --white:       #ffffff;
    --radius:      16px;
    --radius-sm:   10px;
    --shadow-sm:   0 2px 10px rgba(14,42,85,.06);
    --shadow:      0 14px 40px rgba(14,42,85,.10);
    --shadow-lg:   0 24px 60px rgba(14,42,85,.16);
    --ring:        0 0 0 4px rgba(28,75,140,.14);
    --grad-navy:   linear-gradient(135deg, #0E2A55 0%, #1C4B8C 100%);
    --grad-red:    linear-gradient(135deg, #e23a2e 0%, #b01919 100%);
    --container:   1180px;
    --t:           .25s cubic-bezier(.4,0,.2,1);
    --font-head:   'Poppins', system-ui, sans-serif;
    --font-body:   'Inter', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
    margin:0; font-family:var(--font-body); color:var(--ink);
    background:var(--bg); line-height:1.65; font-size:16.5px;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--navy); line-height:1.15; margin:0 0 .5em; font-weight:700; }
h1{ font-size:clamp(2.1rem, 4.2vw, 3.4rem); letter-spacing:-.01em; }
h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); letter-spacing:-.01em; }
h3{ font-size:1.25rem; }
p{ margin:0 0 1rem; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 22px; }
section{ position:relative; }

/* ---- Icons -------------------------------------------------------------- */
.icon{ width:24px; height:24px; flex:none; }
.icon--sm{ width:18px; height:18px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn{
    display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
    font-family:var(--font-head); font-weight:600; font-size:.98rem;
    padding:.85em 1.5em; border-radius:50px; border:1.5px solid transparent;
    transition:var(--t); white-space:nowrap; line-height:1;
}
.btn .icon{ width:18px; height:18px; }
.btn--primary{ background:var(--grad-red); color:#fff; box-shadow:0 10px 24px rgba(196,30,30,.28); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(196,30,30,.36); }
.btn--navy{ background:var(--grad-navy); color:#fff; box-shadow:0 10px 24px rgba(14,42,85,.25); }
.btn--navy:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(14,42,85,.32); }
.btn--white{ background:#fff; color:var(--navy); box-shadow:var(--shadow); }
.btn--white:hover{ transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line); color:var(--navy); background:#fff; }
.btn--ghost:hover{ border-color:var(--navy-300); color:var(--navy); background:var(--bg-soft); }
.btn--ghost-light{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn--ghost-light:hover{ background:rgba(255,255,255,.12); }
.btn--outline{ border-color:var(--red); color:var(--red); }
.btn--outline:hover{ background:var(--red); color:#fff; }
.btn--sm{ padding:.62em 1.1em; font-size:.9rem; }
.btn--lg{ padding:1em 1.8em; font-size:1.05rem; }

/* ---- Top bar ------------------------------------------------------------ */
.topbar{ background:var(--navy); color:#cdd8ec; font-size:.85rem; }
.topbar__inner{ display:flex; justify-content:space-between; align-items:center; min-height:42px; gap:18px; flex-wrap:wrap; }
.topbar a{ display:inline-flex; align-items:center; gap:.4em; color:#cdd8ec; transition:var(--t); }
.topbar a:hover{ color:#fff; }
.topbar__contact{ display:flex; gap:22px; flex-wrap:wrap; }
.topbar__actions{ display:flex; gap:18px; align-items:center; }
.topbar__avail{ display:inline-flex; align-items:center; gap:.5em; color:#9fb4d6; }
.topbar__link{ font-weight:600; color:#fff !important; }
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 0 rgba(61,220,132,.7); animation:pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(61,220,132,0);} 100%{ box-shadow:0 0 0 0 rgba(61,220,132,0);} }

/* ---- Header / nav ------------------------------------------------------- */
.header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow var(--t); }
.header.scrolled{ box-shadow:var(--shadow-sm); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:20px; }
.brand__logo{ height:46px; width:auto; }
.nav{ display:flex; align-items:center; gap:8px; }
.nav__action{
    display:inline-flex; align-items:center; gap:.45em; padding:.6em .8em;
    font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--navy);
    border-radius:8px; transition:var(--t);
}
.nav__action .icon{ color:var(--red); }
.nav__action:hover{ color:var(--red); background:var(--bg-soft); }
.nav__action--phone{ color:var(--navy); }
.nav__action--register{ color:var(--muted); }
.nav__divider{ width:1px; height:24px; background:var(--line); margin:0 6px; }

.hamburger{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; border:0; background:transparent; cursor:pointer; padding:10px; }
.hamburger span{ height:2.5px; width:100%; background:var(--navy); border-radius:2px; transition:var(--t); }
.hamburger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
.nav-overlay{ position:fixed; inset:0; background:rgba(14,42,85,.5); opacity:0; visibility:hidden; transition:var(--t); z-index:90; }
.nav-overlay.open{ opacity:1; visibility:visible; }

/* ---- Hero --------------------------------------------------------------- */
.hero{
    position:relative; overflow:hidden; padding:84px 0 96px; color:#fff;
    /* Falls back to the navy gradient until assets/img/hero-bg.jpg is added. */
    background-color:var(--navy);
    background-image:
        linear-gradient(120deg, rgba(9,22,48,.93) 0%, rgba(13,34,70,.80) 45%, rgba(9,22,48,.88) 100%),
        url('../img/hero-bg.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.hero::before{ content:""; position:absolute; inset:0; background:
    radial-gradient(60% 60% at 85% 15%, rgba(226,58,46,.32) 0%, transparent 60%),
    radial-gradient(45% 55% at 12% 90%, rgba(61,111,184,.38) 0%, transparent 60%);
}
.hero__grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.hero h1{ color:#fff; }
.hero .accent{ color:#ff8a7a; }
.hero__eyebrow{
    display:inline-flex; align-items:center; gap:.5em; padding:.45em 1em; margin-bottom:1.2rem;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:50px;
    font-size:.82rem; font-weight:600; letter-spacing:.02em; backdrop-filter:blur(6px);
}
.hero__lead{ font-size:1.18rem; color:#d4deef; max-width:42ch; margin-bottom:1.8rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:2.2rem; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:26px; }
.hero__trust div{ display:flex; flex-direction:column; }
.hero__trust b{ font-family:var(--font-head); font-size:1.7rem; line-height:1; color:#fff; }
.hero__trust span{ font-size:.84rem; color:#a9bcdc; margin-top:.25rem; }

/* hero visual — device image */
.hero__visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero__glow{ position:absolute; inset:8% 0 8% 4%; z-index:0; border-radius:40px; filter:blur(10px);
    background:radial-gradient(circle at 52% 50%, rgba(61,111,184,.55) 0%, rgba(226,58,46,.22) 50%, transparent 72%); }
.hero__device{ position:relative; z-index:1; width:100%; max-width:580px; display:block;
    filter:drop-shadow(0 28px 46px rgba(0,0,0,.55)); }
.hero__card{
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:24px;
    padding:22px; backdrop-filter:blur(8px); box-shadow:var(--shadow-lg);
}
.scan{
    position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3;
    background:
      radial-gradient(circle at 50% 45%, #1b3f73 0%, #0a1f40 70%),
      #0a1f40;
    display:grid; place-items:center;
}
.scan__pulse{ width:78%; height:2px; }
.scan__pulse svg{ width:100%; height:64px; overflow:visible; }
.scan__line{ stroke:#ff8a7a; stroke-width:2.4; fill:none; filter:drop-shadow(0 0 6px rgba(255,138,122,.8)); stroke-dasharray:600; stroke-dashoffset:600; animation:draw 3.2s ease-in-out infinite; }
@keyframes draw{ 0%{stroke-dashoffset:600;} 55%{stroke-dashoffset:0;} 100%{stroke-dashoffset:-600;} }
.scan__sweep{ position:absolute; inset:0; background:linear-gradient(90deg,transparent, rgba(120,170,255,.18), transparent); width:35%; animation:sweep 3.5s linear infinite; }
@keyframes sweep{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(360%);} }
.hero__chip{
    position:absolute; display:flex; align-items:center; gap:.55em; background:#fff; color:var(--navy);
    padding:.7em 1em; border-radius:12px; box-shadow:var(--shadow); font-weight:600; font-size:.85rem;
}
.hero__chip .icon{ color:var(--red); }
.hero__chip--tl{ top:6px; left:-22px; animation:float 4s ease-in-out infinite; }
.hero__chip--br{ bottom:18px; right:-18px; animation:float 4s ease-in-out infinite .8s; }
.hero__chip small{ display:block; color:var(--muted); font-weight:500; font-size:.74rem; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }

/* wave divider */
.hero__wave{ position:absolute; bottom:-1px; left:0; width:100%; line-height:0; }
.hero__wave svg{ width:100%; height:60px; display:block; }

/* ---- Section scaffolding ------------------------------------------------ */
.section{ padding:84px 0; }
.section--soft{ background:var(--bg-soft); }
.section__head{ text-align:center; max-width:680px; margin:0 auto 52px; }
.section__head.left{ text-align:left; margin-left:0; }
.eyebrow{
    display:inline-flex; align-items:center; gap:.5em; color:var(--red); font-family:var(--font-head);
    font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.8rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--red); border-radius:2px; }
.section__head.left .eyebrow{ justify-content:flex-start; }
.section__sub{ color:var(--muted); font-size:1.05rem; }

/* ---- Card grids --------------------------------------------------------- */
.grid{ display:grid; gap:24px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px;
    transition:var(--t); position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.card__icon{
    width:58px; height:58px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px;
    background:linear-gradient(135deg, #fdeceb, #fbe0de); color:var(--red);
}
.card__icon .icon{ width:28px; height:28px; }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--muted); font-size:.97rem; margin:0; }
.card__link{ display:inline-flex; align-items:center; gap:.4em; margin-top:16px; color:var(--red); font-weight:600; font-size:.92rem; }
.card__link .icon{ transition:var(--t); }
.card:hover .card__link .icon{ transform:translateX(4px); }
.card--navy .card__icon{ background:linear-gradient(135deg,#e7eef9,#dbe6f6); color:var(--navy-500); }

/* ---- Stats -------------------------------------------------------------- */
.stats{ background:var(--grad-navy); color:#fff; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stat b{ font-family:var(--font-head); font-size:clamp(2rem,4vw,2.9rem); display:block; line-height:1; }
.stat .stat__suffix{ color:#ff8a7a; }
.stat span{ color:#a9bcdc; font-size:.95rem; }
.stat{ padding:14px; position:relative; }
.stat:not(:last-child)::after{ content:""; position:absolute; right:0; top:20%; height:60%; width:1px; background:rgba(255,255,255,.14); }

/* ---- Split / feature rows ---------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split__media{ position:relative; }
.media-card{
    border-radius:22px; background:var(--navy); aspect-ratio:5/4; position:relative; overflow:hidden;
    box-shadow:var(--shadow-lg);
}
.media-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.media-card::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(8,18,40,0) 42%, rgba(8,18,40,.62) 100%); }
.media-card .big-icon{ width:120px; height:120px; color:rgba(255,255,255,.9); position:relative; }
.media-card .big-icon .icon{ width:100%; height:100%; }
.media-badge{ position:absolute; z-index:2; bottom:18px; left:18px; right:18px; background:rgba(255,255,255,.95); border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow); }
.media-badge .icon{ color:var(--red); width:34px; height:34px; }
.media-badge b{ display:block; font-family:var(--font-head); color:var(--navy); font-size:.98rem; }
.media-badge span{ font-size:.82rem; color:var(--muted); }

.feature-list{ display:flex; flex-direction:column; gap:18px; margin-top:8px; }
.feature-list li{ display:flex; gap:14px; align-items:flex-start; }
.feature-list .tick{ width:30px; height:30px; flex:none; border-radius:9px; background:#eafaf0; color:#1aa05a; display:grid; place-items:center; margin-top:2px; }
.feature-list .tick .icon{ width:18px; height:18px; }
.feature-list b{ font-family:var(--font-head); color:var(--navy); display:block; }
.feature-list p{ margin:0; color:var(--muted); font-size:.95rem; }

/* ---- Workflow steps ----------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.steps::before{ content:""; position:absolute; top:34px; left:12%; right:12%; height:2px; background:repeating-linear-gradient(90deg,var(--line) 0 10px, transparent 10px 18px); z-index:0; }
.step{ text-align:center; position:relative; z-index:1; }
.step__num{ width:70px; height:70px; margin:0 auto 18px; border-radius:50%; background:#fff; border:2px solid var(--line); display:grid; place-items:center; color:var(--navy); position:relative; transition:var(--t); }
.step__num .icon{ width:30px; height:30px; }
.step:hover .step__num{ border-color:var(--red); color:var(--red); transform:translateY(-4px); }
.step__num b{ position:absolute; top:-8px; right:-8px; width:26px; height:26px; border-radius:50%; background:var(--red); color:#fff; font-family:var(--font-head); font-size:.8rem; display:grid; place-items:center; }
.step h3{ font-size:1.1rem; margin-bottom:.35rem; }
.step p{ color:var(--muted); font-size:.92rem; margin:0; }

/* ---- Modalities chips --------------------------------------------------- */
.modalities{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.modality{
    display:flex; align-items:center; gap:.7em; padding:.85em 1.3em; background:#fff;
    border:1px solid var(--line); border-radius:50px; font-family:var(--font-head); font-weight:600;
    color:var(--navy); transition:var(--t); box-shadow:var(--shadow-sm);
}
.modality:hover{ border-color:var(--red); color:var(--red); transform:translateY(-3px); }
.modality .icon{ color:var(--red); }

/* ---- Testimonials ------------------------------------------------------- */
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; transition:var(--t); }
.quote:hover{ box-shadow:var(--shadow); transform:translateY(-5px); }
.quote__stars{ display:flex; gap:3px; color:#f6b01e; margin-bottom:14px; }
.quote__stars .icon{ width:18px; height:18px; fill:#f6b01e; }
.quote p{ font-size:1rem; color:var(--ink); }
.quote__by{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.quote__avatar{ width:46px; height:46px; border-radius:50%; background:var(--grad-navy); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:700; }
.quote__by b{ font-family:var(--font-head); color:var(--navy); display:block; font-size:.95rem; }
.quote__by span{ color:var(--muted); font-size:.84rem; }

/* ---- CTA band ----------------------------------------------------------- */
.cta-band{ background:var(--grad-red); color:#fff; }
.cta-band__inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:54px 0; flex-wrap:wrap; }
.cta-band h2{ color:#fff; margin-bottom:.3rem; }
.cta-band p{ color:rgba(255,255,255,.9); margin:0; }
.cta-band__actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---- Footer ------------------------------------------------------------- */
.footer{ background:var(--navy); color:#aebfdb; font-size:.94rem; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:40px; padding:64px 22px 44px; }
.footer__logo{ height:46px; background:#fff; padding:8px 12px; border-radius:10px; margin-bottom:16px; }
.footer__tagline{ font-family:var(--font-head); color:#ff8a7a; font-weight:600; margin-bottom:.6rem; }
.footer__about{ color:#94a8cc; font-size:.92rem; max-width:42ch; }
.footer__social{ display:flex; gap:10px; margin-top:18px; }
.footer__social a{ width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#cdd8ec; transition:var(--t); }
.footer__social a:hover{ background:var(--red); color:#fff; transform:translateY(-3px); }
.footer__col h4{ color:#fff; font-size:1.02rem; margin-bottom:1.1rem; }
.footer__col ul li{ margin-bottom:.7rem; transition:var(--t); display:flex; align-items:center; gap:.7em; }
.footer__col a{ color:#aebfdb; transition:var(--t); }
.footer__col ul .icon{ color:#7f92b4; transition:var(--t); }
.footer__col li:hover .icon{ color:var(--red); }
.footer__col a:hover{ color:#fff; }
.footer__col ul li:hover{ transform:translateX(4px); }
.footer__contact li{ display:flex; align-items:center; gap:.7em; }
.footer__contact .icon{ color:#ff8a7a; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.1); }
.footer__bottom-inner{ display:flex; justify-content:space-between; align-items:center; padding:18px 0 24px; flex-wrap:wrap; gap:10px; font-size:.86rem; }
@media (min-width:861px){ .footer__legal{ padding-right:76px; } }
@media (max-width:860px){ .footer__bottom-inner{ padding-bottom:84px; } }
.footer__legal{ display:flex; gap:22px; }
.footer__legal a:hover{ color:#fff; }

/* ---- Floating WhatsApp -------------------------------------------------- */
.wa-float{
    position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%;
    background:#25d366; color:#fff; display:grid; place-items:center; z-index:120;
    box-shadow:0 12px 28px rgba(37,211,102,.45); animation:float 3.5s ease-in-out infinite;
}
.wa-float .icon{ width:30px; height:30px; }
.wa-float:hover{ transform:scale(1.08); }

/* ---- Inner page hero ---------------------------------------------------- */
.page-hero{ background:var(--grad-navy); color:#fff; padding:64px 0 72px; position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 70% at 88% 10%, rgba(226,58,46,.28),transparent 60%); }
.page-hero__inner{ position:relative; max-width:720px; }
.page-hero h1{ color:#fff; margin-bottom:.5rem; }
.page-hero p{ color:#cdd8ec; font-size:1.1rem; margin:0; }
.crumb{ display:flex; gap:.5em; align-items:center; font-size:.86rem; color:#a9bcdc; margin-bottom:1.1rem; }
.crumb a:hover{ color:#fff; }
.crumb span{ color:#ff8a7a; }

/* ---- Content prose (legal pages) --------------------------------------- */
.prose{ max-width:820px; margin:0 auto; }
.prose h2{ font-size:1.5rem; margin-top:2.2rem; }
.prose h3{ margin-top:1.6rem; color:var(--navy-500); }
.prose p,.prose li{ color:var(--muted); }
.prose ul{ list-style:disc; padding-left:1.3rem; margin-bottom:1rem; }
.prose li{ margin-bottom:.5rem; }
.prose .updated{ color:var(--muted); font-size:.9rem; font-style:italic; }

/* ---- Contact ------------------------------------------------------------ */
.contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:44px; align-items:start; }
.info-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; gap:16px; align-items:flex-start; transition:var(--t); margin-bottom:18px; }
.info-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.info-card__icon{ width:50px; height:50px; flex:none; border-radius:12px; background:linear-gradient(135deg,#fdeceb,#fbe0de); color:var(--red); display:grid; place-items:center; }
.info-card h4{ margin:0 0 .2rem; font-size:1.05rem; }
.info-card a,.info-card p{ color:var(--muted); margin:0; transition:var(--t); }
.info-card a:hover{ color:var(--red); }

.form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow-sm); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:600; font-size:.9rem; color:var(--navy); margin-bottom:.45rem; font-family:var(--font-head); }
.field input,.field select,.field textarea{
    width:100%; padding:.85em 1em; border:1.5px solid var(--line); border-radius:10px; font:inherit;
    color:var(--ink); background:#fdfefe; transition:var(--t);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--navy-300); box-shadow:var(--ring); background:#fff; }
.field textarea{ resize:vertical; min-height:130px; }
.form__note{ font-size:.85rem; color:var(--muted); margin-top:6px; }
.form-success{ display:flex; gap:14px; align-items:flex-start; background:#eafaf0; border:1px solid #bfe9cf; color:#16693c; border-radius:12px; padding:16px 18px; margin-bottom:22px; }
.form-success .icon{ color:#1aa05a; flex:none; }

/* ---- Blog --------------------------------------------------------------- */
.post{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:var(--t); display:flex; flex-direction:column; }
.post:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.post__cover{ aspect-ratio:16/9; background:var(--grad-navy); position:relative; display:grid; place-items:center; }
.post__cover::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 75% 20%, rgba(226,58,46,.32),transparent 60%); }
.post__cover .icon{ width:64px; height:64px; color:rgba(255,255,255,.85); position:relative; }
.post__tag{ position:absolute; top:14px; left:14px; background:#fff; color:var(--red); font-family:var(--font-head); font-weight:600; font-size:.74rem; padding:.35em .8em; border-radius:50px; z-index:1; }
.post__body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post__meta{ font-size:.82rem; color:var(--muted); margin-bottom:.6rem; display:flex; gap:.6em; align-items:center; }
.post h3{ font-size:1.15rem; line-height:1.3; }
.post p{ color:var(--muted); font-size:.93rem; flex:1; }
.post__link{ color:var(--red); font-weight:600; font-size:.9rem; display:inline-flex; gap:.4em; align-items:center; }

/* ---- Value / about items ----------------------------------------------- */
.value{ display:flex; gap:16px; }
.value__icon{ width:54px; height:54px; flex:none; border-radius:14px; background:var(--grad-navy); color:#fff; display:grid; place-items:center; }
.value__icon .icon{ width:26px; height:26px; }
.value h3{ font-size:1.12rem; margin-bottom:.3rem; }
.value p{ color:var(--muted); margin:0; font-size:.95rem; }

/* ---- Service detail blocks --------------------------------------------- */
.svc{ scroll-margin-top:120px; }
.svc + .svc{ margin-top:64px; }

/* ---- Reveal animation --------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:980px){
    .hero__grid{ grid-template-columns:1fr; gap:40px; }
    .hero__visual{ max-width:460px; margin:0 auto; width:100%; }
    .split{ grid-template-columns:1fr; gap:34px; }
    .grid--4{ grid-template-columns:repeat(2,1fr); }
    .contact-grid{ grid-template-columns:1fr; }
    .steps{ grid-template-columns:repeat(2,1fr); }
    .steps::before{ display:none; }
    .footer__grid{ grid-template-columns:1fr 1fr; }
    .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:860px){
    .topbar__contact .icon + span{ }
    .nav{
        position:fixed; top:0; right:0; height:100dvh; width:min(340px,86vw); background:#fff;
        flex-direction:column; align-items:stretch; gap:0; padding:88px 22px 30px;
        transform:translateX(100%); transition:transform var(--t); z-index:95; overflow-y:auto;
        box-shadow:var(--shadow-lg);
    }
    .nav.open{ transform:translateX(0); }
    .nav__action{ padding:.95em .4em; font-size:1.05rem; border-bottom:1px solid var(--line); border-radius:0; }
    .nav__action:hover{ background:transparent; }
    .nav__divider{ display:none; }
    .nav .btn{ justify-content:center; margin-top:18px; }
    .hamburger{ display:flex; }
    .grid--3,.grid--2{ grid-template-columns:1fr; }
    .stats__grid{ grid-template-columns:repeat(2,1fr); gap:28px; }
    .stat:nth-child(2)::after{ display:none; }
    .cta-band__inner{ flex-direction:column; text-align:center; align-items:center; }
}
@media (max-width:560px){
    .section{ padding:60px 0; }
    .hero{ padding:60px 0 72px; }
    .grid--4{ grid-template-columns:1fr; }
    .steps{ grid-template-columns:1fr; }
    .footer__grid{ grid-template-columns:1fr; }
    .form__row{ grid-template-columns:1fr; }
    .hero__chip--tl{ left:6px; }
    .hero__chip--br{ right:6px; }
    .btn{ width:auto; }
}

/* =========================================================================
   Single-page section components (reference-aligned)
   ========================================================================= */

/* Hero kicker + stat row */
.kicker{ font-family:var(--font-head); font-weight:600; color:#ff8a7a; font-size:1.05rem; letter-spacing:.02em; margin:0 0 .5rem; }
.hero__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; max-width:540px; margin-top:6px; }
.hero__stats b{ display:inline; font-family:var(--font-head); font-weight:700; font-size:1.85rem; line-height:1; color:#fff; }
.hero__stats .sfx{ font-family:var(--font-head); font-weight:700; font-size:1.4rem; color:#ff8a7a; }
.hero__stats small{ display:block; margin-top:.35rem; font-size:.8rem; color:#a9bcdc; }

/* Numbered workflow list */
.numlist{ display:flex; flex-direction:column; gap:20px; margin:8px 0 0; padding:0; }
.numlist__item{ display:flex; gap:16px; align-items:flex-start; }
.numlist__num{ flex:none; width:48px; height:48px; border-radius:13px; background:var(--grad-navy); color:#fff; font-family:var(--font-head); font-weight:700; display:grid; place-items:center; font-size:1.02rem; box-shadow:var(--shadow-sm); }
.numlist__item b{ font-family:var(--font-head); color:var(--navy); display:block; margin-bottom:.2rem; }
.numlist__item p{ margin:0; color:var(--muted); font-size:.95rem; }

/* Capability tag chips */
.tags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.tag{ display:inline-flex; align-items:center; gap:.5em; padding:.62em 1.15em; background:#fff; border:1px solid var(--line); border-radius:50px; font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--navy); box-shadow:var(--shadow-sm); transition:var(--t); }
.tag:hover{ border-color:var(--red); transform:translateY(-2px); }
.tag .icon{ color:var(--red); }

/* Dark feature band (PACS cloud + security) */
.band-dark{ color:#fff; padding:84px 0; position:relative; overflow:hidden;
    background-color:var(--navy);
    background-image:
        linear-gradient(90deg, rgba(9,22,48,.97) 32%, rgba(11,28,60,.72) 100%),
        url('../img/security.png');
    background-size:cover; background-position:center right; background-repeat:no-repeat; }
.band-dark::before{ content:""; position:absolute; inset:0; background:radial-gradient(52% 60% at 86% 8%, rgba(226,58,46,.22), transparent 60%); }
.band-dark .container{ position:relative; }
.feature-block{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:34px 30px; transition:var(--t); }
.feature-block:hover{ background:rgba(255,255,255,.1); transform:translateY(-4px); }
.feature-block__icon{ width:60px; height:60px; border-radius:15px; background:var(--grad-red); color:#fff; display:grid; place-items:center; margin-bottom:18px; box-shadow:0 10px 22px rgba(196,30,30,.35); }
.feature-block__icon .icon{ width:30px; height:30px; }
.feature-block h3{ color:#fff; font-size:1.3rem; }
.feature-block p{ color:#c4d2ea; margin:0; }
.subcards{ margin-top:24px; }
.subcard{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:28px 24px; transition:var(--t); }
.subcard:hover{ transform:translateY(-5px); border-color:rgba(255,138,122,.5); background:rgba(255,255,255,.08); }
.subcard__icon{ width:50px; height:50px; border-radius:13px; background:rgba(255,255,255,.1); color:#ff8a7a; display:grid; place-items:center; margin-bottom:15px; }
.subcard__icon .icon{ width:26px; height:26px; }
.subcard h4{ color:#fff; font-family:var(--font-head); font-size:1.1rem; margin:0 0 .45rem; }
.subcard p{ color:#b9c8e2; font-size:.92rem; margin:0; }

/* Unified management mini-grid */
.mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; margin-top:20px; }
.mini{ display:flex; gap:14px; align-items:flex-start; }
.mini__icon{ width:48px; height:48px; flex:none; border-radius:12px; background:linear-gradient(135deg,#fdeceb,#fbe0de); color:var(--red); display:grid; place-items:center; }
.mini__icon .icon{ width:25px; height:25px; }
.mini b{ font-family:var(--font-head); color:var(--navy); display:block; margin-bottom:.15rem; font-size:.99rem; }
.mini p{ margin:0; color:var(--muted); font-size:.88rem; line-height:1.55; }

@media (max-width:860px){
    .mini-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
    .hero__stats{ grid-template-columns:1fr 1fr; gap:18px; }
}

/* =========================================================================
   Auth pages (login / signup) — split-screen layout
   ========================================================================= */
.auth{ min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; }

/* Brand panel */
.auth__brand{
    position:relative; color:#fff; padding:48px 56px; overflow:hidden;
    display:flex; flex-direction:column; justify-content:space-between; gap:30px;
    background-color:var(--navy);
    background-image:linear-gradient(150deg, rgba(9,22,48,.93) 0%, rgba(13,34,70,.86) 100%), url('../img/hero-bg.png');
    background-size:cover; background-position:center;
}
.auth__brand::before{ content:""; position:absolute; inset:0; background:radial-gradient(48% 50% at 88% 12%, rgba(226,58,46,.30), transparent 60%); }
.auth__brand > *{ position:relative; z-index:1; }
.auth__logo{ height:50px; background:#fff; padding:9px 13px; border-radius:11px; display:inline-block; }
.auth__brand h2{ color:#fff; font-size:clamp(1.7rem,2.6vw,2.3rem); margin:0 0 .5rem; }
.auth__brand .lead{ color:#cdd8ec; max-width:40ch; margin:0; }
.auth__points{ display:flex; flex-direction:column; gap:16px; }
.auth__points li{ display:flex; gap:13px; align-items:center; }
.auth__points .tick{ width:34px; height:34px; flex:none; border-radius:10px; background:rgba(255,255,255,.12); color:#7CF0AC; display:grid; place-items:center; }
.auth__points .tick .icon{ width:19px; height:19px; }
.auth__points b{ font-family:var(--font-head); color:#fff; font-weight:600; font-size:.98rem; }
.auth__foot{ color:#9fb4d6; font-size:.85rem; display:flex; gap:18px; flex-wrap:wrap; }
.auth__foot a{ color:#cdd8ec; }
.auth__foot a:hover{ color:#fff; }

/* Form side */
.auth__form-wrap{ display:flex; align-items:center; justify-content:center; padding:44px 26px; background:var(--bg-soft); }
.auth__card{ width:100%; max-width:438px; }
.auth__card--wide{ max-width:548px; }
.auth__back{ display:inline-flex; align-items:center; gap:.45em; color:var(--muted); font-weight:600; font-size:.88rem; margin-bottom:22px; transition:var(--t); }
.auth__back .icon{ transform:rotate(180deg); }
.auth__back:hover{ color:var(--red); }
.auth__card h1{ font-size:clamp(1.6rem,2.4vw,2rem); margin:0 0 .3rem; }
.auth__card .sub{ color:var(--muted); margin:0 0 26px; }
.auth__row-between{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:4px 0 22px; font-size:.9rem; flex-wrap:wrap; }
.checkbox{ display:inline-flex; align-items:center; gap:.55em; color:var(--muted); cursor:pointer; user-select:none; }
.checkbox input{ width:17px; height:17px; accent-color:var(--red); }
.auth__forgot{ color:var(--red); font-weight:600; }
.auth__submit{ width:100%; justify-content:center; }
.auth__alt{ text-align:center; margin-top:24px; color:var(--muted); font-size:.93rem; }
.auth__alt a{ color:var(--red); font-weight:700; }
.auth__terms{ font-size:.82rem; color:var(--muted); margin:2px 0 0; }
.auth__terms a{ color:var(--red); }

@media (max-width:860px){
    .auth{ grid-template-columns:1fr; }
    .auth__brand{ padding:34px 28px; gap:20px; }
    .auth__points, .auth__foot{ display:none; }
    .auth__form-wrap{ padding:34px 22px 60px; }
}