/* 2rtechnologies.com — international site. Navy & gold, animated globe hero, 12 languages (RTL for Arabic). */
:root {
  --bg: #030817; --bg2: #071230; --panel: rgba(14, 28, 64, .62); --line: rgba(140, 170, 235, .16);
  --text: #eaf0ff; --muted: #9eb0d6; --gold: #f6b919; --gold2: #ffd65a; --gold3: #b57a00;
  --cyan: #38d6ff; --violet: #8b5cff; --radius: 20px; --wrap: 1180px;
  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--font); overflow-x: hidden; }
body[dir=rtl] { --font: "Tajawal", "Segoe UI", system-ui, sans-serif; }
body.l-zh { --font: "Noto Sans SC", "Montserrat", system-ui, sans-serif; }
body.l-ja { --font: "Noto Sans JP", "Montserrat", system-ui, sans-serif; }
body.l-hi { --font: "Noto Sans Devanagari", "Montserrat", system-ui, sans-serif; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; z-index: 100; background: var(--gold); color: #1a1200; padding: 8px 14px; border-radius: 8px; }
.skip:focus { inset-inline-start: 8px; }
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; border-radius: 6px; }

/* Header */
.top { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.top.solid { background: rgba(3, 8, 23, .82); backdrop-filter: blur(14px); border-color: var(--line); }
.top-in { display: flex; align-items: center; gap: 18px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; letter-spacing: .5px; }
.brand img { width: 44px; height: 40px; object-fit: contain; }
.brand span b { color: var(--gold); }
.menu { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.menu > a { text-decoration: none; color: #cdd7f2; font-weight: 600; font-size: 14.5px; padding: 8px 12px; border-radius: 10px; }
.menu > a:hover { color: #fff; background: rgba(255,255,255,.06); }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-weight: 700; color: #dbe4ff; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; min-width: 180px; max-height: 70vh; overflow: auto;
  background: #0a1634; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.5); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.lang li a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-size: 14px; color: #cdd7f2; }
.lang li a:hover, .lang li a[aria-current] { background: rgba(246,185,25,.14); color: var(--gold2); }
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 15px; border-radius: 12px; padding: 13px 22px; border: 0; cursor: pointer; font-family: inherit; transition: transform .2s, box-shadow .2s, background .2s; }
.btn.gold { color: #1a1200; background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 4px 0 var(--gold3), 0 12px 30px rgba(246,185,25,.25); }
.btn.gold:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--gold3), 0 18px 40px rgba(246,185,25,.35); }
.btn.ghost { color: #fff; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.04); backdrop-filter: blur(6px); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold2); }
.btn.small { padding: 9px 16px; font-size: 14px; }
.burger { display: none; margin-inline-start: auto; background: none; border: 1px solid var(--line); color: #fff; border-radius: 10px; width: 44px; height: 44px; cursor: pointer; }
.burger svg { margin: auto; }

/* Hero with animated globe */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3;
  background: radial-gradient(900px 600px at 78% 40%, rgba(56,214,255,.16), transparent 60%), radial-gradient(800px 600px at 15% 85%, rgba(139,92,255,.20), transparent 60%),
  radial-gradient(700px 500px at 60% 110%, rgba(246,185,25,.12), transparent 60%), linear-gradient(180deg, #020611, #040b20 60%, #030817); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 180px; z-index: -1; background: linear-gradient(180deg, transparent, var(--bg)); }
.hero-in { padding: 120px 0 90px; max-width: 680px; }
body[dir=rtl] .hero-in { margin-inline-start: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--gold2); font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); }
body[dir=rtl] .eyebrow, body.l-zh .eyebrow, body.l-ja .eyebrow { letter-spacing: 0; }
.hero h1 { margin: 18px 0 18px; font-size: clamp(36px, 6vw, 68px); line-height: 1.08; font-weight: 900; letter-spacing: -.5px; }
.hero h1 em { font-style: normal; display: block; background: linear-gradient(90deg, var(--gold2), var(--gold) 40%, #ffefb0 60%, var(--gold)); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }
.lead { font-size: clamp(16px, 2vw, 19px); color: #c3cfee; max-width: 600px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.scroll-hint { position: absolute; bottom: 26px; inset-inline-start: 50%; translate: -50% 0; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.35); border-radius: 14px; }
.scroll-hint::after { content: ""; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: hint 1.8s infinite; }
@keyframes hint { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* Stats */
.stats { position: relative; margin-top: -40px; z-index: 2; }
.stats-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { padding: 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(12px); }
.stat b { display: block; font-size: 34px; font-weight: 900; color: var(--gold2); line-height: 1.1; }
.stat span { color: var(--muted); font-size: 14px; }

/* Sections */
.section { padding: 110px 0; position: relative; }
.section.alt { background: linear-gradient(180deg, transparent, rgba(10,22,52,.6) 15%, rgba(10,22,52,.6) 85%, transparent); }
.head { max-width: 720px; margin-bottom: 46px; }
.head h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 12px 0 12px; font-weight: 900; }
.head p { color: var(--muted); font-size: 17px; margin: 0; }
.grid { display: grid; gap: 18px; }
.g4 { grid-template-columns: repeat(4, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g2 { grid-template-columns: repeat(2, 1fr); }
.card { position: relative; padding: 26px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); overflow: hidden; transition: transform .3s, border-color .3s; }
.card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(246,185,25,.6), transparent 40%, rgba(56,214,255,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; }
.card:hover { transform: translateY(-6px); }
.card:hover::before { opacity: 1; }
.card h3 { margin: 16px 0 8px; font-size: 19px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--gold2);
  background: linear-gradient(135deg, rgba(246,185,25,.18), rgba(56,214,255,.10)); border: 1px solid rgba(246,185,25,.3); }

/* Process timeline */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.steps::before { content: ""; position: absolute; top: 27px; inset-inline: 8% 8%; height: 2px; background: linear-gradient(90deg, var(--gold), var(--cyan), var(--violet)); opacity: .5; }
.step { position: relative; text-align: center; padding: 0 6px; }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  font-weight: 900; font-size: 20px; color: #1a1200; background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 0 0 6px var(--bg), 0 0 30px rgba(246,185,25,.45); position: relative; }
.step h3 { margin: 0 0 6px; font-size: 18px; }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* Models */
.model { text-align: start; }
.model .n { font-size: 13px; font-weight: 800; color: var(--cyan); letter-spacing: 1px; }

/* Why */
.why { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(10,22,52,.5); }
.why .ic { flex: none; width: 44px; height: 44px; }
.why h3 { margin: 0 0 6px; font-size: 18px; }
.why p { margin: 0; color: var(--muted); font-size: 15px; }

/* Tech marquee */
.tech { margin-top: 56px; }
.tech h3 { text-align: center; color: var(--muted); font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 40s linear infinite; padding: 8px 0; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.chip { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-weight: 700; font-size: 14px; color: #d7e1fb; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
body[dir=rtl] .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

/* Contact */
.contact { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }
.form { padding: 28px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field.full { grid-column: 1 / -1; }
label { display: block; font-size: 13.5px; font-weight: 700; color: #c9d4f2; margin-bottom: 6px; }
input, select, textarea { width: 100%; font: inherit; color: #fff; background: rgba(3,8,23,.7); border: 1px solid rgba(143,166,216,.3); border-radius: 12px; padding: 12px 14px; }
select option { color: #000; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(246,185,25,.18); }
.form-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn.wa { color: #fff; background: #1faa59; } .btn.wa:hover { background: #24c466; }
.form-msg { margin-top: 12px; color: #ffb3bb; font-size: 14px; min-height: 1em; }
.direct { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(10,22,52,.5); }
.direct h3 { margin: 0 0 16px; }
.direct a.row { display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 10px; border-radius: 14px; text-decoration: none; border: 1px solid var(--line); background: rgba(255,255,255,.03); transition: border-color .2s, transform .2s; }
.direct a.row:hover { border-color: var(--gold); transform: translateX(4px); }
body[dir=rtl] .direct a.row:hover { transform: translateX(-4px); }
.direct small { display: block; color: var(--muted); font-size: 12.5px; }
.direct b { font-size: 15.5px; }
.direct .dot { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; }
.dot.wa { background: #1faa59; } .dot.tg { background: #229ed9; } .dot.ml { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1a1200; }
.hq { color: var(--muted); font-size: 14px; margin: 16px 0 0; }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 38px 0 30px; color: var(--muted); font-size: 14px; }
.foot { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
footer a { color: #cdd7f2; }
footer details summary { cursor: pointer; color: #cdd7f2; }
footer details p { max-width: 720px; }

/* Floating contact */
.float { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 40; display: grid; gap: 10px; }
.float a { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.4); transition: transform .2s; }
.float a:hover { transform: scale(1.08); }
.float .wa { background: #1faa59; } .float .tg { background: #229ed9; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .g4, .stats-in { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; text-align: start; }
  .steps::before { display: none; }
  .step { display: grid; grid-template-columns: 56px 1fr; gap: 0 16px; text-align: start; }
  .step::before { grid-row: span 2; margin: 0; }
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .burger { display: grid; }
  .menu { position: fixed; inset: 72px 0 auto; flex-direction: column; align-items: stretch; padding: 16px; background: rgba(3,8,23,.97); border-bottom: 1px solid var(--line); display: none; }
  .menu.open { display: flex; }
  .lang ul { position: static; margin-top: 8px; }
}
@media (max-width: 560px) {
  .g4, .g2, .stats-in, .fields { grid-template-columns: 1fr; }
  .section { padding: 76px 0; }
  .hero-in { padding-top: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* V2: hero composition, readable branding and globe interactions */
.top-in { gap: 12px; }
.brand { flex-shrink: 0; gap: 9px; font-size: 14px; white-space: nowrap; }
.brand img { width: 60px; height: 54px; filter: drop-shadow(0 0 9px rgba(255,210,90,.24)); }
.menu > a { padding-inline: 9px; }
.hero canvas { z-index: 0; touch-action: pan-y; cursor: grab; }
.hero canvas:active { cursor: grabbing; }
.hero > .wrap { position: relative; z-index: 2; pointer-events: none; }
.hero > .wrap a { pointer-events: auto; }
.hero::after { z-index: 1; pointer-events: none; }
.hero-in { width: min(100%, 590px); padding-block: 136px 110px; }
.hero h1 { font-size: clamp(37px, 4.25vw, 62px); letter-spacing: -1.1px; }
.hero .lead { max-width: 535px; }
.scroll-hint { z-index: 3; pointer-events: none; }
@media (min-width: 1350px) { .hero-in { width: 580px; } }
@media (max-width: 1080px) {
  .brand { font-size: 12px; }
  .brand img { width: 50px; height: 48px; }
  .menu > a { font-size: 13px; padding-inline: 6px; }
}
@media (max-width: 999px) {
  .hero { min-height: 980px; min-height: max(920px, 100svh); align-items: flex-start; }
  .hero-in { padding-top: 130px; padding-bottom: 370px; width: min(100%, 700px); }
  .hero h1 { font-size: clamp(34px, 5.8vw, 57px); }
  .hero .lead { max-width: 650px; }
  .scroll-hint { bottom: 12px; }
}
@media (max-width: 560px) {
  .hero { min-height: 940px; }
  .hero-in { padding-top: 120px; padding-bottom: 350px; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .hero-btns .btn { max-width: 100%; font-size: 13px; padding: 12px 14px; }
  .brand { font-size: 12px; }
  .brand img { width: 50px; height: 44px; }
  .stats { margin-top: 0; }
}

/* V3 — approved premium hero: larger official identity and realistic Earth */
:root { --wrap: 1500px; }
.top { border-bottom: 1px solid rgba(88,184,228,.14); background: rgba(2,9,25,.72); backdrop-filter: blur(13px); }
.top-in { height: 86px; gap: 15px; }
.brand { font-size: clamp(17px,1.45vw,22px); letter-spacing: -.35px; gap: 15px; }
.brand img { width: 92px; height: 74px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255,204,86,.24)); }
.brand span { white-space: nowrap; }
.brand span b { color:#ffcc3f; }
.menu { gap: 0; }
.menu > a { font-size: 13px; padding-inline: 9px; white-space:nowrap; }
.hero { min-height: 810px; min-height: max(810px,100svh); }
.hero::before { background: radial-gradient(600px 620px at 76% 48%,rgba(12,130,217,.17),transparent 78%), radial-gradient(650px 500px at 16% 90%,rgba(66,46,145,.15),transparent); }
.hero > .wrap { z-index: 3; }
.hero-in { width: min(52%,720px); padding: 145px 0 110px; }
.hero h1 { font-size: clamp(42px,4.05vw,68px); line-height:1.10; letter-spacing:-1.6px; }
.hero .lead { max-width:630px; }
.earth-scene { position:absolute; top:50%; right: 3.2%; width:min(49vw,780px); aspect-ratio:1/1; transform:translateY(-46%); z-index:1; pointer-events:none; }
.earth-real { position:absolute; inset:8%; width:84%; height:84%; object-fit:contain; filter: drop-shadow(0 0 26px rgba(22,145,255,.54)) drop-shadow(0 0 72px rgba(9,106,204,.23)); animation:earth-breathe 8s ease-in-out infinite alternate; }
.earth-halo { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle,rgba(19,131,224,.17),rgba(7,43,94,.12) 40%,transparent 67%); animation:halo-breathe 7s ease-in-out infinite alternate; }
.earth-scene canvas { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.earth-spark { position:absolute; width:8px; height:8px; background:#fff4cf; border-radius:50%; box-shadow:0 0 15px 6px rgba(255,181,65,.65),0 0 40px rgba(54,187,255,.65); z-index:4; animation:spark 4s ease-in-out infinite alternate; }
.earth-spark.s1 { left:78%;top:12%; } .earth-spark.s2 { left:17%;top:64%; animation-delay:-1.6s; background:#b3f5ff; } .earth-spark.s3 { left:56%;top:90%; animation-delay:-2.5s; }
@keyframes earth-breathe { from { transform:translateY(-4px) scale(.995); } to { transform:translateY(5px) scale(1.01); } }
@keyframes halo-breathe { to { opacity:.62; transform:scale(1.045); } }
@keyframes spark { to { opacity:.35;transform:scale(.45); } }
.hero .scroll-hint { z-index: 5; }
@media(max-width:1260px){ .top-in { height:78px; } .brand img { width:76px;height:65px; } .brand {font-size:17px;} .burger {display:grid;} .menu {position:fixed;top:78px;left:0;right:0;background:rgba(2,9,25,.97);padding:18px 26px;display:none;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line); } .menu.open {display:flex;} .menu>a {padding:11px 13px;font-size:15px;} }
@media(max-width:900px){
  .hero {min-height:950px;align-items:flex-start;}
  .hero-in {width:min(100%,690px);padding-top:142px;padding-bottom:490px;}
  .hero h1 {font-size:clamp(35px,6.7vw,60px);}
  .earth-scene {width:min(84vw,560px);right:50%;top:auto;bottom:15px;transform:translateX(50%);}
}
@media(max-width:560px){
  .top-in {height:72px;} .brand img {width:64px;height:58px;} .brand {font-size:14px;gap:8px;}
  .menu {top:72px;} .hero {min-height:850px;}
  .hero-in {padding-top:120px;padding-bottom:340px;}
  .hero h1 {font-size:clamp(34px,9vw,46px);letter-spacing:-.8px;}
  .earth-scene {width:min(95vw,420px);bottom:15px;}
  .hero .lead {font-size:15px;}
}
@media(prefers-reduced-motion:reduce){.earth-real,.earth-halo,.earth-spark{animation:none;}}

/* V4 — ecosystem cards copied from the official .tn platform set */
.platforms-section { background: #031329; }
.platforms-head { max-width: 850px; text-align:center; margin:0 auto 44px; }
.platforms-head .eyebrow {color:#35b7ff; letter-spacing:.28em;}
.platform-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.platform-card {--accent:#ffc636; display:flex; flex-direction:column; min-height:340px; padding:27px; border:1px solid color-mix(in srgb,var(--accent),transparent 55%); border-radius:22px; background:linear-gradient(155deg,color-mix(in srgb,var(--accent),#04142d 94%),#06142c 73%); transition:transform .28s ease, box-shadow .28s ease;}
.platform-card:hover {transform:translateY(-8px); box-shadow:0 22px 44px rgba(0,0,0,.27),0 0 21px color-mix(in srgb,var(--accent),transparent 90%);}
.platform-card img {width:96px;height:96px;object-fit:contain;border-radius:19px;background:#f8fafc;padding:5px;}
.platform-cat {font-size:12px;font-weight:800;letter-spacing:.10em;color:var(--accent);margin-top:18px;text-transform:uppercase;}
.platform-card h3 {font-size:26px;margin:7px 0;letter-spacing:-.025em;}
.platform-card p {color:#c9d7ef;line-height:1.65;font-size:15px;margin:0 0 22px;flex:1;}
.platform-links {display:flex;gap:17px;flex-wrap:wrap;font-weight:800;font-size:14px;}
.platform-links a:first-child {color:#ffca44;}
.platform-links a:last-child {color:#c4d1e9;}
.platform-links a:hover,.platform-back:hover {text-decoration:underline;}
.platform-view-all {text-align:center;margin:34px auto 0;}
.platform-detail {min-height:70vh;padding-top:145px;}
.platform-back {display:inline-block;color:#ffca44;margin-bottom:32px;}
.platform-detail-head {display:flex;align-items:center;gap:32px;border:1px solid color-mix(in srgb,var(--accent),transparent 60%);border-radius:22px;padding:38px;background:#081a35;}
.platform-detail-head img {width:150px;height:150px;object-fit:contain;background:#fff;border-radius:22px;padding:8px;flex-shrink:0;}
.platform-detail-head h1 {font-size:clamp(35px,5vw,60px);margin:6px 0 12px;}
.platform-detail-head p {color:#c9d7ef;font-size:17px;max-width:720px;line-height:1.8;}
.platform-service-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:38px 0;padding:0;list-style:none;}
.platform-service-list li {background:#081a35;padding:17px 22px;border-radius:12px;border:1px solid #183454;}
@media(max-width:1100px){.platform-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:750px){.platform-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.platform-detail-head{flex-direction:column;align-items:flex-start;}}
@media(max-width:520px){.platform-grid{grid-template-columns:1fr;}.platform-card{min-height:280px;}.platform-service-list{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.platform-card{transition:none;}}