:root { --bg:#f2f7fa; --white:#fff; --navy:#122039; --navy2:#192a44; --blue:#087dbd; --blue2:#029ad5; --muted:#75849b; --border:#e5eef5; --teal:#05ad83; --green:#079f7c; --font:'Plus Jakarta Sans','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
* {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:26px}
body {margin:0;background:var(--bg);font-family:var(--font);color:var(--navy);-webkit-font-smoothing:antialiased;font-size:15px}
button,input {font:inherit}
button {cursor:pointer}
a {color:inherit;text-decoration:none}
svg {flex-shrink:0}
[hidden] {display:none!important}
::selection {background:#b2ebff}
.container {max-width:1160px;margin:0 auto;padding-left:26px;padding-right:26px}
.site-shell {overflow:hidden}
.hero {background:linear-gradient(120deg,#0378b8 0%,#087fbf 51%,#075888 100%);min-height:440px;position:relative;overflow:hidden;color:white;isolation:isolate}
.hero:before {content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 0%,#77dcff25 0%,transparent 40%),linear-gradient(30deg,#126bb320,transparent 40%);pointer-events:none}
.hero-orb {position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px);opacity:.45}
.orb-one {width:390px;height:390px;top:-240px;right:-90px;border:75px solid #fff1}
.orb-two {width:560px;height:560px;bottom:-480px;left:-170px;background:#24bbfa16}
.hero-content {position:relative;z-index:1}
.nav-bar {display:flex;justify-content:space-between;align-items:center;padding-top:35px}
.brand {display:inline-flex;gap:13px;align-items:center;color:#fff;font-size:25px;font-weight:800;letter-spacing:-.8px}
.brand-mark {display:flex;position:relative;border-radius:15px;background:#fff;padding:3px;box-shadow:0 8px 20px #053a6525}
.brand-mark img {border-radius:12px;display:block}
.brand small {display:block;font-size:9px;letter-spacing:2px;font-weight:700;color:#b9e8ff;margin-top:2px}
.nav-actions {display:flex;gap:11px}
.icon-button {width:43px;height:43px;border-radius:15px;border:1px solid #ffffff30;background:#ffffff1b;color:white;display:grid;place-items:center;transition:.2s}
.icon-button:hover,.icon-button:focus-visible {background:#ffffff35;transform:translateY(-2px)}
.hero-body {padding:54px 0 86px;max-width:850px}
.greeting {display:flex;align-items:center;gap:15px;font-size:16px;font-weight:500;color:#e3f7ff;flex-wrap:wrap}
.year-pill,.highlight-badge {display:inline-flex;align-items:center;gap:9px;color:#7effc9;font-size:10px;font-weight:800;letter-spacing:1.3px;background:#05a77d31;padding:8px 13px;border:1px solid #15cfa27a;border-radius:999px}
.pulse-dot {background:#36eba8;width:7px;height:7px;border-radius:99px;box-shadow:0 0 0 4px #36eba82a;display:inline-block}
.hero h1 {font-size:clamp(37px,5.2vw,66px);line-height:1.15;letter-spacing:-2.8px;max-width:750px;margin:18px 0 14px;font-weight:800}
.hero h1 em {font-style:normal;color:#ffd842}
.hero-description {font-size:17px;line-height:1.75;color:#d4f1ff;max-width:600px;margin:0 0 29px}
.search-field {min-height:78px;background:#fff;border-radius:21px;display:flex;align-items:center;gap:15px;padding:10px;box-shadow:0 16px 32px #004b801b;max-width:755px}
.search-icon {display:grid;place-items:center;color:#7395ad;margin-left:13px}
.search-field input {outline:0;border:0;min-width:0;flex:1;font-size:16px;color:#20354e;background:transparent}
.search-field input::placeholder {color:#8999ad}
.search-field input::-webkit-search-cancel-button {cursor:pointer}
.search-btn {display:flex;justify-content:center;align-items:center;gap:8px;min-height:57px;padding:0 20px;border:0;border-radius:13px;background:linear-gradient(130deg,#13c39b,#00996f);color:white;white-space:nowrap;font-weight:800;box-shadow:0 6px 15px #00a57f2e;transition:.2s}
.search-btn:hover {filter:brightness(1.06);transform:translateY(-2px)}
.trust-strip {display:flex;gap:20px;align-items:center;margin-top:17px;color:#d1efff;font-size:12px;font-weight:600;flex-wrap:wrap}
.trust-strip span {display:flex;align-items:center;gap:7px}
.main-content {position:relative;margin-top:-49px;padding-bottom:105px}
.demo-notice {background:#fff7dc;border:1px solid #ffdd7c;padding:12px 16px;border-radius:13px;font-size:12px;display:flex;align-items:start;gap:10px;color:#714d00;margin-bottom:20px;box-shadow:0 4px 18px #273c4810;line-height:1.55}
.demo-notice strong {font-weight:800}
.highlight-panel {position:relative;background:linear-gradient(120deg,#111b31 0%,#17263e 75%,#1c3d5a 100%);color:#fff;padding:28px 33px 30px;border-radius:23px;box-shadow:0 14px 24px #1a2e4d21;overflow:hidden;margin-bottom:23px}
.highlight-panel::before {content:'';position:absolute;width:260px;height:260px;right:-80px;top:-120px;background:radial-gradient(circle,#63d2ff18,transparent 65%);pointer-events:none}
.highlight-top {display:flex;justify-content:space-between;gap:10px;align-items:center;position:relative;z-index:1}
.section-overline {color:#48cdfc;letter-spacing:3px;font-weight:800;font-size:11px}
.highlight-badge {font-size:10px;color:#78eeb8;background:#0b9c7731;white-space:nowrap}
.highlight-panel h2 {font-size:clamp(25px,3.7vw,38px);letter-spacing:-1.2px;margin:17px 0 11px;position:relative;z-index:1}
.highlight-panel p {font-size:14px;color:#bec9d8;margin:0;line-height:1.8;position:relative;z-index:1}
.highlight-decor {position:absolute;right:25px;bottom:-41px;display:flex;gap:14px;transform:rotate(-24deg);opacity:.13}
.highlight-decor span {display:block;width:42px;height:140px;border-radius:24px;background:#71c9ff}
.content-grid {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(330px,1fr);gap:23px;align-items:start}
.primary-column,.secondary-column {display:flex;flex-direction:column;gap:23px;min-width:0}
.panel {background:#fff;border:1px solid #e8f0f6;border-radius:24px;box-shadow:0 7px 25px #24364b09;overflow:hidden}
.vacancy-card {border:1px solid #d5efff;box-shadow:0 6px 22px #006eb314}
.vacancy-head {display:flex;gap:19px;align-items:center;padding:26px 27px 25px;position:relative}
.vacancy-icon {display:grid;place-items:center;width:67px;height:67px;flex-shrink:0;border-radius:16px;box-shadow:0 9px 14px #0b70aa28}
.vacancy-icon img {width:67px;height:67px}
.vacancy-headline {min-width:0}
.eyebrow {color:#0d93c8;letter-spacing:1.7px;font-weight:800;font-size:10px;margin:0 0 7px}
.vacancy-head h2 {font-size:22px;letter-spacing:-.65px;line-height:1.28;margin:0 0 7px}
.subtle-brand {color:#657994;font-size:12px;font-weight:600}
.dot-divider {color:#88b4c7;padding:0 4px}
.card-corner {margin-left:auto;color:#78a4bf;align-self:start}
.vacancy-body {padding:24px 27px 0;border-top:1px solid var(--border)}
.tags {display:flex;gap:8px;flex-wrap:wrap}
.tag {display:inline-flex;align-items:center;border-radius:9px;font-size:11px;font-weight:750;padding:9px 12px;line-height:1.35}
.tag-green {background:#dafbee;color:#077c59}
.tag-yellow {background:#fff2c5;color:#9c5509}
.tag-muted {background:#eef3f8;color:#536479}
.job-description {line-height:1.8;color:#536378;margin:20px 0 26px;font-size:15px;min-height:75px}
.featured-footer {background:#f6f9fc;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -27px;padding:18px 27px}
.text-muted {display:flex;gap:7px;align-items:center;color:#76879b;font-weight:600;font-size:11px}
.btn {border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;padding:13px 17px;font-size:13px;font-weight:800;transition:transform .2s,box-shadow .2s}
.btn:hover,.btn:focus-visible {transform:translateY(-2px);box-shadow:0 8px 17px #0077ad2b}
.btn-blue {background:linear-gradient(130deg,#0b9ad5,#0379b9);color:white}
.btn-green {background:linear-gradient(115deg,#34c8a9,#00a67b);color:white}
.details-panel {padding:28px 28px 18px}
.section-title {display:flex;align-items:center;gap:13px;margin:0 0 19px}
.title-icon {width:47px;height:47px;border-radius:13px;background:#e0f4ff;color:#0c91ca;display:grid;place-items:center}
.section-title h2,.other-heading h2 {font-size:21px;line-height:1.25;letter-spacing:-.5px;margin:0}
.detail-row {display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}
.detail-row:last-child {border-bottom:0}
.detail-symbol {background:#e3f4ff;color:#0f90c6;border-radius:11px;width:45px;height:45px;display:grid;place-items:center;flex-shrink:0}
.detail-label {display:block;color:#71849e;font-size:11px;font-weight:800;letter-spacing:1px;margin:0 0 6px}
.detail-row strong {display:block;font-weight:750;font-size:14px;line-height:1.5}
.transparency-note {background:#f2f9fd;padding:13px 15px;display:flex;gap:10px;color:#567289;border-radius:12px;line-height:1.65;font-size:11px;margin-top:14px}
.transparency-note svg {color:#059ed2;margin-top:1px}
.recruiter-panel {border-radius:24px;background:linear-gradient(135deg,#101c33,#1c2d48);color:white;padding:26px;box-shadow:0 14px 29px #11213a1b;position:relative;overflow:hidden}
.recruiter-panel:before {content:'';position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(90deg,#09abda,#27d2ad 65%,#ffd94d)}
.recruiter-header {display:flex;align-items:center;gap:13px}
.recruiter-avatar {height:63px;width:63px;border:3px solid #2bbef2;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#065887,#067fac);box-shadow:0 0 0 4px #197ecb27}
.bright {color:#56ceff}
.recruiter-header h2 {font-size:17px;line-height:1.4;margin:0;letter-spacing:-.5px}
.recruiter-text {font-size:14px;color:#cfdbea;line-height:1.85;background:#ffffff0b;padding:18px;border-left:3px solid #37c5f2;border-radius:11px;margin:20px 0}
.recruiter-divider {height:1px;background:#ffffff19;margin-bottom:17px}
.recruiter-note {display:flex;gap:8px;align-items:start;color:#acbfce;font-size:11px;line-height:1.6}
.recruiter-note svg {color:#6fddb9}
.recruiter-cta {margin-top:19px;width:100%;min-height:49px}
.other-roles {padding:25px}
.other-heading {margin-bottom:20px}
.filter-chips {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip {border:1px solid #e3eaf0;border-radius:99px;padding:9px 13px;font-size:11px;font-weight:750;background:#f7f9fc;color:#5c6981;transition:.18s}
.chip.active,.chip:hover {background:#def5fc;color:#0077aa;border-color:#9cdff7}
.role-list {display:flex;flex-direction:column;gap:9px}
.role-option {background:#f9fbfd;width:100%;border:1px solid #e8eff5;border-radius:14px;padding:14px 12px;display:flex;align-items:center;gap:11px;text-align:left;color:var(--navy);transition:.18s}
.role-option:hover,.role-option.selected {background:#e9f7ff;border-color:#a3dff8;transform:translateX(2px)}
.role-small-icon {width:37px;height:37px;display:grid;place-items:center;background:#e2f3fd;color:#0f91bf;border-radius:10px}
.role-copy {flex:1;min-width:0}
.role-copy strong {display:block;font-size:12px;margin-bottom:4px}
.role-copy small {color:#6b8195;font-size:10px}
.role-chevron {color:#8ea5b5}
.no-results {font-size:12px;line-height:1.7;color:#6a7887;background:#f7f9fc;padding:18px;border-radius:12px}
.faq-section {margin-top:23px;padding:29px}
.faq-section details {border-top:1px solid var(--border);padding:18px 0}
.faq-section details:last-child {padding-bottom:0}
.faq-section summary {font-size:14px;font-weight:750;display:flex;justify-content:space-between;gap:8px;align-items:center;cursor:pointer;list-style:none}
.faq-section summary::-webkit-details-marker {display:none}
.faq-section summary span {font-size:24px;color:#1699c5;transition:.2s}
.faq-section details[open] summary span {transform:rotate(45deg)}
.faq-section details p {color:#697d92;line-height:1.85;font-size:13px;margin:11px 25px 1px 0}
.site-footer {display:flex;align-items:center;flex-wrap:wrap;column-gap:20px;row-gap:12px;padding:42px 0 7px;color:#708199;font-size:12px}
.footer-brand {display:flex;align-items:center;gap:10px;color:#132a41;font-size:18px}
.footer-brand img {border-radius:9px}
.site-footer p {margin:0;flex:1;min-width:190px}
.footer-links {display:flex;gap:17px;flex-wrap:wrap;width:100%}
.footer-links a:hover {color:#028fc2}
.site-footer small {font-size:11px}
.sticky-bar {position:fixed;z-index:20;bottom:0;left:0;right:0;padding:15px 26px calc(15px + env(safe-area-inset-bottom));background:#ffffffed;border-top:1px solid #e7f0f4;box-shadow:0 -8px 25px #133b5810;backdrop-filter:blur(18px)}
.sticky-inner {max-width:1108px;display:flex;align-items:center;gap:20px;justify-content:space-between;margin:auto}
.sticky-copy {display:grid;grid-template-columns:8px 1fr;column-gap:12px;align-items:center}
.sticky-copy strong {color:#162d45;font-size:14px}
.sticky-copy small {grid-column:2;color:#7f8fa0;margin-top:2px;font-size:11px}
.sticky-online {background:#0bd8ab;border-radius:99px;width:8px;height:8px}
.sticky-whatsapp {background:linear-gradient(120deg,#48cfad,#00a77a);color:#fff;border:0;border-radius:14px;padding:15px 27px;display:flex;justify-content:center;align-items:center;gap:12px;font-weight:800;box-shadow:0 5px 16px #04a67b2c;transition:.2s;min-height:55px}
.sticky-whatsapp:hover {filter:brightness(1.05);transform:translateY(-2px)}
.modal-overlay {position:fixed;inset:0;background:#12283b9f;z-index:100;display:grid;place-items:center;padding:22px;backdrop-filter:blur(6px)}
.modal-open {overflow:hidden}
.modal {position:relative;max-width:420px;width:100%;background:#fff;padding:29px;border-radius:24px;box-shadow:0 25px 70px #00122132;outline:none}
.modal-close {position:absolute;right:16px;top:16px;display:grid;place-items:center;color:#8495a6;border:0;background:#f1f6f9;border-radius:11px;width:34px;height:34px}
.modal-icon {width:55px;height:55px;background:#e5f6fc;color:#0587bd;display:grid;place-items:center;border-radius:15px;margin-bottom:16px}
.modal h2 {font-size:20px;letter-spacing:-.4px;margin:0 0 12px}
.modal p {font-size:13px;color:#687d90;line-height:1.85;margin:0 0 24px}
.modal-dismiss {width:100%}
.legal-page {background:#f4f8fb}
.legal-container {max-width:780px;margin:40px auto;background:#fff;padding:42px;border-radius:22px;border:1px solid #e4edf3;box-shadow:0 10px 25px #17364d0a}
.legal-container h1 {font-size:30px;letter-spacing:-1px}
.legal-container h2 {font-size:18px;margin:24px 0 10px}
.legal-container p {font-size:14px;color:#5c6c80;line-height:1.85}
.legal-meta {background:#fff4dc;color:#89620f!important;padding:13px;border-radius:11px}
.back-link {color:#067cad;font-weight:750;font-size:13px}
@media (max-width:850px) {
  .content-grid {grid-template-columns:1fr}
  .secondary-column {display:contents}
  .recruiter-panel {order:2}
  .other-roles {order:3}
  .primary-column {display:contents}
  .vacancy-card {order:0}
  .details-panel {order:1}
  .faq-section {order:4}
  .content-grid {display:flex;flex-direction:column}
  .content-grid>* {width:100%}
  .sticky-copy {display:none}
  .sticky-inner {justify-content:center}
  .sticky-whatsapp {width:100%}
}
@media (max-width:550px) {
  body {font-size:14px}
  .container {padding-left:17px;padding-right:17px}
  .hero {min-height:auto}
  .nav-bar {padding-top:20px}
  .brand {font-size:22px;gap:11px}
  .brand-mark img {width:43px;height:43px}
  .brand-mark {border-radius:14px}
  .brand small {font-size:8px;letter-spacing:1.2px}
  .nav-actions {gap:7px}
  .icon-button {height:37px;width:37px;border-radius:12px}
  .hero-body {padding:39px 0 81px}
  .greeting {font-size:14px;gap:10px}
  .year-pill {font-size:9px;padding:6px 10px}
  .hero h1 {font-size:37px;letter-spacing:-1.9px;line-height:1.18;margin:16px 0 11px}
  .hero-description {font-size:13px;line-height:1.75;margin-bottom:23px}
  .search-field {min-height:73px;padding:8px;border-radius:18px;gap:7px}
  .search-field input {font-size:12px}
  .search-icon {margin-left:9px}
  .search-icon svg {width:21px;height:21px}
  .search-btn {padding:0 11px;min-height:52px;border-radius:12px;font-size:11px;gap:6px}
  .search-btn svg {width:16px;height:16px}
  .trust-strip {font-size:10px;gap:12px;line-height:1.5;margin-top:15px}
  .main-content {margin-top:-44px;padding-bottom:95px}
  .demo-notice {font-size:11px;padding:10px 12px}
  .highlight-panel {padding:23px 20px 24px;border-radius:20px;margin-bottom:17px}
  .section-overline {letter-spacing:2px;font-size:9px}
  .highlight-badge {font-size:8px;letter-spacing:1px;padding:7px 9px}
  .highlight-panel h2 {font-size:27px;line-height:1.2;margin:16px 0 11px}
  .highlight-panel p {font-size:12px;line-height:1.7}
  .content-grid,.primary-column,.secondary-column {gap:17px}
  .panel,.recruiter-panel {border-radius:19px}
  .vacancy-head {gap:13px;padding:21px 19px}
  .vacancy-icon,.vacancy-icon img {height:57px;width:57px;border-radius:13px}
  .vacancy-head h2 {font-size:17px;letter-spacing:-.45px}
  .subtle-brand {font-size:11px}
  .card-corner svg {width:17px;height:17px}
  .vacancy-body {padding:20px 19px 0}
  .tag {font-size:10px;padding:8px 9px}
  .tags {gap:6px}
  .job-description {font-size:12px;line-height:1.8;min-height:0;margin:17px 0 22px}
  .featured-footer {margin:0 -19px;padding:16px 19px}
  .text-muted {font-size:10px;max-width:150px}
  .btn {padding:11px 12px;font-size:11px}
  .details-panel {padding:22px 20px 18px}
  .section-title h2,.other-heading h2 {font-size:19px}
  .title-icon {width:43px;height:43px}
  .detail-row {gap:13px;padding:16px 0}
  .detail-symbol {width:42px;height:42px}
  .detail-label {font-size:10px}
  .detail-row strong {font-size:12px}
  .recruiter-panel {padding:24px 20px}
  .recruiter-header h2 {font-size:16px}
  .recruiter-avatar {width:55px;height:55px}
  .recruiter-text {font-size:12px}
  .other-roles {padding:22px 19px}
  .faq-section {padding:22px 19px;margin-top:17px}
  .faq-section summary {font-size:12px}
  .site-footer {padding:30px 0 4px}
  .sticky-bar {padding:11px 17px calc(11px + env(safe-area-inset-bottom))}
  .sticky-whatsapp {min-height:56px;font-size:14px;border-radius:12px}
  .legal-container {margin:18px;padding:24px}
}
@media (max-width:370px) {
 .search-btn span {display:none}
 .search-btn {width:51px;padding:0}
 .hero h1 {font-size:33px}
 .highlight-top {align-items:start}
 .highlight-badge {letter-spacing:0}
 .vacancy-head h2 {font-size:16px}
 .featured-footer {gap:8px}
 .text-muted {max-width:130px}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto} *,*:before,*:after {transition:none!important;animation:none!important}}

/* === Premium 3D upgrade + testimonials & ratings === */
.hero {position:relative; overflow:hidden; background:
 radial-gradient(circle at 15% 15%, rgba(255,255,255,.14), transparent 22%),
 radial-gradient(circle at 80% 0%, rgba(96,229,255,.22), transparent 26%),
 linear-gradient(155deg, #0a7fc6 0%, #0563a8 50%, #083c85 100%);
 box-shadow: 0 28px 60px rgba(6, 72, 123, .28);
}
.hero::after {
 content:""; position:absolute; inset:auto -12% -80px auto; width:320px; height:320px;
 background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
 filter: blur(6px); pointer-events:none;
}
.orb-three {right:28%; top:38%; width:140px; height:140px; background:rgba(255,255,255,.10); filter: blur(2px)}
.panel,
.recruiter-panel,
.highlight-panel,
.faq-section,
.other-roles,
.details-panel,
.vacancy-card {
 box-shadow: 0 18px 50px rgba(15, 37, 73, .11), inset 0 1px 0 rgba(255,255,255,.78);
}
.highlight-panel {
 background: linear-gradient(135deg, rgba(14,30,65,.98), rgba(7,97,158,.95));
}
.vacancy-card.panel {
 background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
}
.tag, .chip, .btn, .icon-button, .brand-mark, .title-icon, .detail-symbol, .recruiter-avatar {
 box-shadow: 0 12px 24px rgba(15, 37, 73, .12), inset 0 1px 0 rgba(255,255,255,.6);
}
.search-field {
 box-shadow: 0 16px 40px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.65);
}
.search-btn, .btn-blue, .btn-green, .sticky-whatsapp {
 box-shadow: 0 16px 26px rgba(0, 92, 191, .22);
}
.section-paragraph {margin:6px 0 0;color:var(--muted);font-size:15px;line-height:1.75}

.testimonials-section,.ratings-section {margin-top:22px;padding:30px 30px 32px;overflow:hidden}
.testimonials-marquee {margin-top:22px;overflow:hidden;mask-image:linear-gradient(to right, transparent, black 7%, black 93%, transparent)}
.testimonials-track {display:flex;gap:18px;min-width:max-content;animation:testimonials-marquee 32s linear infinite}
.testimonials-section:hover .testimonials-track {animation-play-state:paused}
.testimonial-card {
 width:318px;flex:0 0 auto;padding:18px;border-radius:24px;border:1px solid rgba(214,225,241,.95);
 background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,248,255,.98));
 box-shadow:0 20px 45px rgba(16,42,86,.12), inset 0 1px 0 rgba(255,255,255,.8);
}
.testimonial-user {display:flex;align-items:center;gap:14px;margin-bottom:14px}
.testimonial-user img {
 width:62px;height:62px;border-radius:18px;object-fit:cover;flex:0 0 62px;
 border:2px solid rgba(255,255,255,.88); box-shadow:0 10px 25px rgba(10,80,150,.18)
}
.testimonial-user strong {display:block;font-size:16px;color:var(--ink)}
.testimonial-user small {display:block;margin-top:4px;color:var(--muted);font-size:13px}
.testimonial-stars {display:flex;align-items:center;gap:6px;color:#ffb020;margin-bottom:12px}
.testimonial-stars.large svg {width:18px;height:18px}
.testimonial-card p {margin:0;color:var(--ink);line-height:1.8;font-size:14px}

.ratings-summary {
 display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;
 margin-top:22px;padding:20px;border-radius:26px;border:1px solid rgba(214,225,241,.95);
 background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,249,255,.96));
 box-shadow:0 20px 45px rgba(16,42,86,.09), inset 0 1px 0 rgba(255,255,255,.85)
}
.score-orb {
 width:130px;height:130px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
 background:radial-gradient(circle at 30% 30%, #49c2ff, #0c7ed1 65%, #084f9a);
 color:#fff; box-shadow:0 22px 40px rgba(12,126,209,.28), inset 0 1px 0 rgba(255,255,255,.35)
}
.score-orb strong {font-size:42px;line-height:1;font-weight:800;letter-spacing:-.03em}
.score-orb span {margin-top:5px;font-size:15px;color:rgba(255,255,255,.88)}
.score-copy p {margin:7px 0 0;color:var(--muted);font-size:15px;line-height:1.75}
.ratings-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.rating-card {
 padding:18px;border-radius:22px;border:1px solid rgba(214,225,241,.95);
 background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
 box-shadow:0 16px 34px rgba(16,42,86,.08), inset 0 1px 0 rgba(255,255,255,.8)
}
.rating-head {display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.rating-head strong {display:block;font-size:15px;color:var(--ink)}
.rating-head small {display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.mini-score {padding:6px 10px;border-radius:999px;background:rgba(0,135,230,.10);color:#087bd0;font-weight:800;font-size:12px}
.rating-card p {margin:0;color:var(--ink);font-size:14px;line-height:1.7}

@keyframes testimonials-marquee {
 from {transform:translateX(0)}
 to {transform:translateX(calc(-50% - 9px))}
}

@media (max-width: 860px) {
 .testimonials-section,.ratings-section {padding:24px 20px 24px}
 .ratings-summary {grid-template-columns:1fr;justify-items:start}
 .score-orb {width:118px;height:118px}
 .ratings-grid {grid-template-columns:1fr}
}
@media (max-width: 560px) {
 .testimonial-card {width:276px;border-radius:20px;padding:16px}
 .testimonial-user img {width:56px;height:56px;border-radius:16px}
 .section-paragraph {font-size:13px}
 .score-orb strong {font-size:36px}
 .rating-card p,.testimonial-card p {font-size:13px}
}

/* === V3 super premium 3D upgrade === */
:root {
  --premium-shadow: 0 20px 45px rgba(8, 35, 78, .12), 0 6px 18px rgba(40, 88, 151, .08), inset 0 1px 0 rgba(255,255,255,.92);
  --premium-shadow-strong: 0 26px 58px rgba(8, 35, 78, .17), 0 8px 22px rgba(31, 128, 230, .14), inset 0 1px 0 rgba(255,255,255,.92);
}
.other-roles {
  position: relative;
  padding: 28px;
  border: 1px solid rgba(218,228,241,.95);
  background:
    radial-gradient(circle at top left, rgba(96, 221, 255, .16), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,255,.96));
  box-shadow: var(--premium-shadow-strong);
  overflow: hidden;
}
.other-roles::before {
  content:"";
  position:absolute;
  inset:-80px -120px auto auto;
  width:220px; height:220px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(64,210,255,.18), rgba(64,210,255,0) 68%);
  pointer-events:none;
}
.other-heading h2 {
  font-size: 31px;
  letter-spacing: -.03em;
}
.other-heading {position:relative; z-index:1; margin-bottom: 12px}
.filter-chips {gap: 12px; margin-bottom: 20px; position:relative; z-index:1}
.chip {
  position: relative;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(223,231,242,.95);
  background: linear-gradient(180deg, #ffffff 0%, #f2f5fa 100%);
  box-shadow: 0 12px 24px rgba(15, 37, 73, .08), inset 0 1px 0 rgba(255,255,255,.92);
  color: #56657f;
  font-size: 13px;
  font-weight: 800;
}
.chip.active,
.chip:hover {
  background: linear-gradient(180deg, #ecfbff 0%, #dff8ff 100%);
  color: #0a7fc6;
  border-color: #9cdff7;
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(17, 153, 227, .16), inset 0 1px 0 rgba(255,255,255,.95);
}
.role-list {display: grid; gap: 14px; position:relative; z-index:1}
.role-option {
  position: relative;
  overflow: hidden;
  padding: 17px 16px;
  border-radius: 20px;
  border: 1px solid rgba(221,230,240,.95);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(244,248,255,.96) 100%);
  box-shadow: var(--premium-shadow);
  gap: 14px;
  transform-style: preserve-3d;
}
.role-option::before {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(115deg, rgba(255,255,255,.42), rgba(255,255,255,0) 42%);
  pointer-events:none;
}
.role-option::after {
  content:"";
  position:absolute;
  top:-42px; right:-42px;
  width:120px; height:120px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(58,205,255,.17), rgba(58,205,255,0) 72%);
  pointer-events:none;
}
.role-option:hover,
.role-option.selected {
  border-color: rgba(135, 218, 255, .9);
  background: linear-gradient(180deg, #effaff 0%, #ddf5ff 100%);
  transform: translateY(-2px) rotateX(0.6deg);
  box-shadow: 0 24px 48px rgba(13, 128, 202, .18), 0 10px 28px rgba(20, 92, 170, .10), inset 0 1px 0 rgba(255,255,255,.98);
}
.role-small-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, #eef9ff 0%, #dbeefe 100%);
  color: #0b8dd5;
  box-shadow: 0 14px 28px rgba(25,127,215,.16), inset 0 1px 0 rgba(255,255,255,.96);
  flex: 0 0 52px;
}
.role-copy strong {font-size: 18px; letter-spacing: -.02em}
.role-copy small {margin-top: 7px; font-size: 13px; color:#718198}
.role-chevron {
  margin-left:auto;
  color:#8ba0b8;
  transform: translateZ(10px);
}
.role-option.selected .role-chevron,
.role-option:hover .role-chevron {color:#0a7fc6; transform: translateX(3px)}
.no-results {margin-top: 14px}

.premium-glow {
  position: relative;
  overflow: hidden;
}
.premium-glow::before {
  content:"";
  position:absolute;
  inset:-80px auto auto -70px;
  width:220px; height:220px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(79,210,255,.17), rgba(79,210,255,0) 70%);
  pointer-events:none;
}
.ratings-hero {
  display:grid;
  grid-template-columns: 150px 1fr 240px;
  gap: 20px;
  align-items: center;
  margin-top: 22px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(214,225,241,.95);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,248,255,.96));
  box-shadow: var(--premium-shadow-strong);
}
.ratings-float-card {
  padding: 18px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, #0b8bd8 0%, #12c3a4 100%);
  box-shadow: 0 24px 40px rgba(11,139,216,.24), inset 0 1px 0 rgba(255,255,255,.28);
}
.float-label {display:block; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.82}
.ratings-float-card strong {display:block; margin-top:8px; font-size:22px; letter-spacing:-.03em}
.ratings-float-card small {display:block; margin-top:6px; color:rgba(255,255,255,.88); line-height:1.55; font-size:13px}
.ratings-slider {margin-top: 20px; overflow:hidden; mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent)}
.ratings-track {
  display:flex;
  gap:18px;
  min-width:max-content;
  animation: ratings-marquee 36s linear infinite;
}
.ratings-slider:hover .ratings-track {animation-play-state: paused}
.rating-card-animated {
  width: 310px;
  flex: 0 0 auto;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(214,225,241,.96);
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(244,248,255,.98));
  box-shadow: var(--premium-shadow);
}
.rating-card-animated .testimonial-stars {margin-bottom: 14px}
.rating-card-animated p {font-size: 14px; line-height: 1.75}
.score-orb {
  animation: orb-float 4.8s ease-in-out infinite;
}
@keyframes ratings-marquee {
  from {transform: translateX(0)}
  to {transform: translateX(calc(-50% - 9px))}
}
@keyframes orb-float {
  0%,100% {transform: translateY(0)}
  50% {transform: translateY(-7px)}
}

@media (max-width: 980px) {
  .ratings-hero {grid-template-columns: 1fr;}
  .ratings-float-card {max-width: 320px}
}
@media (max-width: 560px) {
  .other-roles {padding: 22px 18px; border-radius: 28px}
  .other-heading h2 {font-size: 24px}
  .chip {padding: 11px 15px; font-size: 12px}
  .role-option {padding: 15px 14px; border-radius: 18px}
  .role-small-icon {width: 46px; height: 46px; border-radius: 14px; flex-basis:46px}
  .role-copy strong {font-size: 16px}
  .role-copy small {font-size: 12px}
  .ratings-hero {padding: 18px}
  .ratings-float-card strong {font-size: 19px}
  .rating-card-animated {width: 280px; padding: 18px; border-radius: 21px}
}