* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--background); color:var(--text-900); font:400 var(--body)/1.85 var(--font-ar); } body[dir="ltr"] { font-family:var(--font-en); } button,input,textarea,select { font:inherit; } a { color:inherit; } :focus-visible { outline:3px solid var(--accent-500); outline-offset:3px; } .skip-link { position:fixed; inset-block-start:-100%; inset-inline-start:16px; z-index:100; padding:12px 18px; background:var(--primary-900); color:#fff; border-radius:var(--radius-sm); } .skip-link:focus { inset-block-start:16px; } .container { width:min(calc(100% - 48px),var(--container)); margin-inline:auto; } .icon { inline-size:1.2em; block-size:1.2em; flex:none; } .directional { transition:transform var(--motion-interaction); } [dir="rtl"] .directional { transform:scaleX(-1); } h1,h2,h3,p { margin-block-start:0; } h1 { font-size:var(--display); line-height:1.24; letter-spacing:-.035em; } h2 { font-size:var(--h2); line-height:1.3; letter-spacing:-.025em; } h3 { font-size:var(--h4); line-height:1.5; } p { color:var(--text-600); } .button { min-block-size:48px; padding:11px 20px; border:1px solid transparent; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:1rem; font-weight:700; line-height:1.35; text-decoration:none; cursor:pointer; transition:transform var(--motion-interaction),background var(--motion-interaction),color var(--motion-interaction),box-shadow var(--motion-interaction); } .button:hover:not(:disabled) { transform:translateY(-2px); } .button--primary { color:#fff; background:var(--primary-700); box-shadow:0 2px 6px rgb(18 59 93 / .18); } .button--primary:hover { background:var(--primary-900); } .button--secondary { color:var(--primary-700); background:#fff; border-color:var(--primary-700); } .button--secondary:hover { background:var(--primary-100); } .eyebrow { margin:0 0 10px; color:var(--accent-600); font-size:var(--caption); font-weight:700; letter-spacing:.06em; } .site-header { position:sticky; inset-block-start:0; z-index:20; background:rgb(255 255 255 / .96); border-block-end:1px solid transparent; backdrop-filter:blur(10px); transition:box-shadow var(--motion-standard),border var(--motion-standard); } .site-header.is-compact { border-color:var(--border); box-shadow:var(--shadow-soft); } .site-header__inner { min-height:80px; display:flex; align-items:center; gap:24px; } .site-logo { display:flex; align-items:center; gap:10px; text-decoration:none; min-width:max-content; } .site-logo img { inline-size:46px; block-size:46px; object-fit:cover; object-position:center top; border-radius:50%; border:1px solid var(--border); } .site-logo b,.site-logo small { display:block; line-height:1.3; } .site-logo b { color:var(--primary-900); font:700 .9rem var(--font-en); } .site-logo small { color:var(--text-600); font-size:.7rem; } .site-nav { display:flex; align-items:center; justify-content:center; gap:16px; flex:1; } .site-nav a,.mobile-nav a { color:var(--text-700); font-size:var(--body-s); text-decoration:none; } .site-nav a:hover,.site-nav a.is-active { color:var(--primary-700); text-decoration:underline; text-underline-offset:6px; } .site-header__actions { display:flex; align-items:center; gap:10px; } .language-toggle { min-block-size:48px; min-inline-size:48px; padding:8px 12px; color:var(--primary-700); background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:var(--caption); font-weight:700; cursor:pointer; } .mobile-trigger { display:none; min-block-size:48px; min-inline-size:48px; padding:12px; color:var(--primary-900); background:none; border:0; } .mobile-nav { display:none; padding:10px 20px 20px; border-block-start:1px solid var(--border); background:#fff; } .mobile-nav.is-open { display:grid; gap:4px; } .mobile-nav a { display:flex; align-items:center; min-block-size:48px; border-block-end:1px solid var(--border); } .mobile-nav__actions { display:grid; grid-template-columns:1fr auto; gap:10px; padding-block-start:12px; } .home-hero { padding-block:80px; background:linear-gradient(110deg,#fff 38%,var(--surface-blue)); } .home-hero__grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(32px,7vw,96px); } .home-hero h1 { max-width:12ch; margin-block-end:24px; } .home-hero p:not(.eyebrow),.page-hero p { max-width:56ch; font-size:var(--body-l); } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-block-start:28px; } .hero-visual { position:relative; min-height:395px; overflow:hidden; border:1px solid #d5e4ed; border-radius:var(--radius-xl); background:linear-gradient(145deg,#e3f1f7,#f8fbfc); box-shadow:var(--shadow-soft); } .visual-orbit { position:absolute; border:1px solid rgb(45 106 150 / .2); border-radius:50%; } .visual-orbit:first-child { inset:36px; } .visual-orbit:nth-child(2) { inset:88px; border-color:rgb(197 42 53 / .22); } .visual-mark { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); inline-size:150px; block-size:150px; display:grid; place-items:center; color:#fff; background:var(--primary-700); border-radius:50%; box-shadow:0 0 0 18px rgb(45 106 150 / .12); } .visual-mark .icon { inline-size:70px; block-size:70px; } .visual-card { position:absolute; inline-size:220px; padding:20px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); } .visual-card--top { inset-block-start:54px; inset-inline-start:30px; } .visual-card--bottom { inset-block-end:42px; inset-inline-end:24px; } .visual-card strong { color:var(--primary-900); font-size:1.1rem; } .visual-card p { margin:4px 0 0; font-size:var(--body-s); } .visual-disclosure { position:absolute; inset-inline:20px; inset-block-end:16px; text-align:center; } .site-section { padding-block:80px; } .site-section--surface { background:var(--surface); } .section-heading { max-width:850px; margin-block-end:40px; } .section-heading p:not(.eyebrow) { max-width:68ch; margin:10px 0 0; font-size:var(--body); line-height:1.85; } .trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .trust-card { display:flex; gap:14px; align-items:flex-start; padding:20px; } .trust-card__icon,.icon-box { display:grid; place-items:center; flex:none; inline-size:48px; block-size:48px; color:var(--primary-700); background:var(--primary-100); border-radius:var(--radius-md); } .trust-card h3 { margin:0; color:var(--primary-900); font-size:1.1rem; } .trust-card p { margin:5px 0 0; font-size:var(--body-s); } .service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); } .service-card { display:flex; flex-direction:column; min-block-size:300px; padding:24px; transition:box-shadow var(--motion-standard),transform var(--motion-standard),border var(--motion-standard); } .service-card:hover { border-color:#b8d2e1; box-shadow:var(--shadow-soft); transform:translateY(-4px); } .service-card__top { display:flex; justify-content:space-between; align-items:flex-start; margin-block-end:20px; } .medical-term { padding:3px 8px; color:var(--primary-700); background:var(--primary-100); border-radius:var(--radius-pill); font:600 .78rem var(--font-en); } .service-card h3,.feature-card h3 { margin:0; color:var(--primary-900); font-size:1.2rem; } .service-card p,.feature-card p { margin:10px 0 20px; font-size:var(--body-s); line-height:1.8; } .text-link { display:inline-flex; align-items:center; gap:8px; min-block-size:44px; margin-block-start:auto; color:var(--primary-700); font-size:var(--body-s); font-weight:700; text-decoration:none; } .text-link:hover { color:var(--primary-900); text-decoration:underline; } .section-action { margin-block-start:32px; } .split-panel { display:grid; grid-template-columns:1fr .82fr; overflow:hidden; border:1px solid #cfe0ea; border-radius:var(--radius-xl); background:#fff; } .split-panel > div { padding:clamp(28px,5vw,64px); } .split-panel > div > p:not(.eyebrow) { max-width:55ch; font-size:var(--body); } .split-panel aside { display:grid; align-content:center; padding:clamp(28px,5vw,64px); color:#fff; background:var(--primary-900); } .split-panel aside h3 { margin:20px 0 8px; } .split-panel aside p { color:#dbeaf2; } .icon-box--light { color:#fff; background:rgb(255 255 255 / .12); } .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .feature-card { padding:24px; } .icon-box--red { color:var(--accent-600); background:var(--accent-100); } .review-marker { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin-block-start:10px; color:var(--accent-600); font-size:var(--caption); font-weight:700; line-height:1.55; } .review-marker::before { content:""; inline-size:8px; block-size:8px; flex:none; background:var(--accent-600); border-radius:50%; } .review-marker small { color:inherit; font:inherit; font-weight:600; } .visual-disclosure .review-marker { justify-content:center; padding:7px 10px; background:rgb(255 255 255 / .92); border:1px solid var(--accent-100); border-radius:var(--radius-sm); } .faq-list { display:grid; max-width:960px; gap:14px; } .faq-item { overflow:hidden; background:#fff; border:1px solid #cbd8df; border-radius:var(--radius-md); } .faq-item.is-open { border-color:var(--primary-500); box-shadow:0 4px 18px rgb(18 59 93 / .07); } .faq-item button { display:flex; align-items:center; justify-content:space-between; gap:16px; inline-size:100%; min-block-size:72px; padding:18px 22px; color:var(--text-900); background:none; border:0; font-weight:700; font-size:1.0625rem; line-height:1.7; text-align:inherit; cursor:pointer; } .faq-item button .icon { color:var(--primary-700); transition:transform var(--motion-standard); } .faq-item.is-open button .icon { transform:rotate(180deg); } .faq-item__answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--motion-standard); } .faq-item.is-open .faq-item__answer { grid-template-rows:1fr; } .faq-item__answer > div { overflow:hidden; } .faq-item__answer p { max-width:68ch; padding:2px 22px 12px; margin:0; color:var(--text-700); font-size:var(--body); line-height:1.9; } .faq-item__answer .review-marker { margin:0 22px 20px; } .contact-cta { padding-block:80px; background:var(--surface); } .contact-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:clamp(28px,6vw,72px); overflow:hidden; color:#fff; background:var(--primary-900); border-radius:var(--radius-xl); } .contact-cta h2 { max-width:20ch; margin:0; } .contact-cta p:not(.eyebrow) { margin:10px 0 0; color:#dbeaf2; max-width:60ch; } .page-hero { padding-block:80px; background:var(--surface-blue); border-block-end:1px solid #d5e4ed; } .page-hero h1 { max-width:18ch; margin-block-end:20px; } .about-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:64px; align-items:start; } .about-grid p { max-width:65ch; font-size:var(--body); } .value-list { display:grid; gap:12px; padding:24px; background:var(--surface); border-radius:var(--radius-lg); } .value-list div { display:flex; align-items:center; gap:12px; min-block-size:48px; color:var(--primary-900); font-weight:700; } .value-list .icon { color:var(--primary-700); } .safe-note { padding:18px; margin:28px 0 0; color:var(--text-700); background:var(--surface-blue); border-inline-start:3px solid var(--accent-600); border-radius:var(--radius-sm); } .benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .benefit-card { padding:28px; } .step-number { display:inline-grid; place-items:center; inline-size:40px; block-size:40px; margin-block-end:20px; color:var(--primary-700); background:var(--primary-100); border-radius:50%; font:700 .9rem var(--font-en); } .benefit-card h3 { margin:0; color:var(--primary-900); font-size:1.2rem; } .steps-list { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0; margin:0; list-style:none; } .steps-list li { display:flex; gap:12px; align-items:center; padding:20px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); font-weight:700; } .steps-list b { display:grid; place-items:center; inline-size:32px; block-size:32px; color:var(--primary-700); background:var(--primary-100); border-radius:50%; font-family:var(--font-en); } .unknown-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .unknown-field { min-block-size:130px; padding:24px; background:var(--surface); border:1px dashed var(--accent-600); border-radius:var(--radius-md); } .unknown-field b { color:var(--primary-900); font-size:1.1rem; } .corporate-process { max-width:850px; } .contact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .contact-card { display:flex; gap:16px; align-items:flex-start; padding:24px; } .contact-card > .icon { inline-size:30px; block-size:30px; color:var(--primary-700); } .contact-card h2 { margin:0 0 6px; color:var(--primary-900); font-size:1.15rem; } .contact-card strong { color:var(--primary-900); font:700 1.08rem var(--font-en); overflow-wrap:anywhere; } .contact-card p { margin:0; font-size:var(--body-s); } .map-placeholder { display:flex; gap:20px; align-items:flex-start; padding:32px; margin-block-start:24px; background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-lg); } .map-placeholder > .icon { inline-size:36px; block-size:36px; color:var(--primary-700); } .map-placeholder h2 { margin:0 0 8px; font-size:1.3rem; color:var(--primary-900); } .empty-state { max-width:680px; padding:40px; background:var(--surface); border-radius:var(--radius-lg); } .empty-state h2 { font-size:1.5rem; color:var(--primary-900); } .site-footer { padding-block:64px 24px; color:#dbeaf2; background:#0e2f49; } .site-footer__grid { display:grid; grid-template-columns:1.4fr .8fr 1.2fr; gap:48px; } .site-footer .site-logo b { color:#fff; } .site-footer .site-logo small,.site-footer p,.site-footer a { color:#bad1df; } .site-footer p { font-size:var(--body-s); } .site-footer h2 { margin-block-end:14px; color:#fff; font-size:1.1rem; } .site-footer nav { display:grid; gap:8px; } .site-footer a { text-decoration:none; } .site-footer a:hover { color:#fff; text-decoration:underline; } .site-footer .review-marker { color:#ffd2d6; } .site-footer .review-marker::before { background:#ffd2d6; } .site-footer .review-marker small { color:#ffd2d6; } .site-footer__legal { display:flex; justify-content:space-between; gap:16px; padding-block-start:20px; margin-block-start:40px; border-block-start:1px solid rgb(255 255 255 / .15); font-size:var(--caption); } @media (max-width:1050px) { .site-nav { display:none; } .mobile-trigger { display:block; } .site-header__inner { justify-content:space-between; } .site-header__actions { margin-inline-start:auto; } .service-grid { grid-template-columns:repeat(2,1fr); } .trust-grid { grid-template-columns:repeat(2,1fr); } .contact-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:720px) { .container { width:min(calc(100% - 32px),var(--container)); } .site-header__inner { min-height:68px; gap:10px; } .site-logo span { display:none; } .site-header__actions .button { display:none; } .home-hero,.page-hero,.site-section,.contact-cta { padding-block:56px; } .home-hero__grid,.split-panel,.about-grid { grid-template-columns:1fr; } .home-hero h1,.page-hero h1 { max-width:none; } .hero-visual { min-block-size:320px; } .visual-card--top { inset-block-start:30px; inset-inline-start:16px; } .visual-card--bottom { inset-block-end:28px; inset-inline-end:12px; } .trust-grid,.service-grid,.feature-grid,.benefit-grid,.steps-list,.unknown-grid,.contact-grid { grid-template-columns:1fr; } .split-panel > div,.split-panel aside { padding:28px; } .contact-cta__inner { display:block; } .contact-cta .button { margin-block-start:24px; } .site-footer__grid { grid-template-columns:1fr; gap:28px; } .site-footer__legal { display:grid; } .faq-item button { min-block-size:68px; padding:17px 18px; font-size:1rem; } .faq-item__answer p { padding-inline:18px; } .faq-item__answer .review-marker { margin-inline:18px; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }