/* RAMS DESIGNS v2 · production CSS for www.rambenamram.com, scoped under #rams-v2 (build_wp.py) */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } #rams-v2 :where(p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,blockquote,figure,figcaption,table,thead,tbody,tr,th,td,q,details,summary,small,strong,b,em,i,hr,label,input,select,textarea,button,img,a,time,code) { all: revert; } #rams-v2 { color-scheme: dark; --bg: #05070A; --surface: #0B0E14; --raised: #12161E; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .16); --text: #F4F6F9; --text-2: rgba(244, 246, 249, .74); --text-3: rgba(244, 246, 249, .5); --dim: rgba(244, 246, 249, .4); --blue: #007AFF; --blue-2: #4DB8FF; --blue-hover: #0A84FF; --accent-text: #5AC8FF; --glow: 85, 85, 204; --gold: #D6A650; --gold-2: #F2D08A; --ok: #30D158; --flag: #F5A524; --ink: #0B0D12; --panel: rgba(5, 7, 10, .55); --panel-2: rgba(5, 7, 10, .72); --panel-line: rgba(255, 255, 255, .08); --page: #1a1b1f; --f-display: "Heebo", "Assistant", system-ui, sans-serif; --f-body: "Heebo", system-ui, sans-serif; --f-ui: "Assistant", "Heebo", system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --ease: cubic-bezier(.2, .7, .2, 1); --wrap: clamp(1440px, 92vw, 2080px); --pad: clamp(16px, calc(13.2vw - 46px), 144px); --hdr: 112px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --sec: clamp(72px, 10.5vw, 150px); --sec-sm: clamp(56px, 7vw, 104px); --gap-eyebrow: clamp(16px, 1.5vw, 24px); --gap-lead: clamp(16px, 1.7vw, 24px); --gap-head: clamp(40px, 4.4vw, 64px); --gap-cta: clamp(28px, 2.8vw, 40px); --gap-after: clamp(24px, 2.2vw, 32px); --grid-gap: clamp(16px, 1.7vw, 24px); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } #rams-v2, #rams-v2 *, #rams-v2 *::before, #rams-v2 *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: var(--page); } #rams-v2 { margin: 0; background-color: var(--page); color: var(--text); font-family: var(--f-body); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; } #rams-v2.site { overflow-x: clip; position: relative; isolation: isolate; min-height: 100vh; } #rams-v2.site::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: #1a1b1f; background-image: radial-gradient(ellipse 140% 120% at 65% 32%, #5555CC 0%, #3838A0 22%, #222268 46%, #121238 63%, transparent 80%), linear-gradient(115deg, #2C2C34 0%, #1C1C28 45%, #0E0E18 100%); background-repeat: no-repeat; background-size: cover; background-position: center; } #rams-v2 img { display: block; max-width: 100%; } #rams-v2 a { color: inherit; text-decoration: none; } #rams-v2 button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0 !important; } #rams-v2 ::selection { background: rgba(0, 122, 255, .45); } #rams-v2 :focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; border-radius: 6px; } #rams-v2 [hidden] { display: none !important; } #rams-v2 .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); } #rams-v2 .sec { padding-block: var(--sec); position: relative; } #rams-v2 [id] { scroll-margin-top: calc(var(--hdr) + 12px); } #rams-v2 .mono { font-family: var(--f-mono); letter-spacing: 0; } #rams-v2 .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } #rams-v2 .nw { white-space: nowrap; } #rams-v2 .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--text-3); margin: 0 0 var(--gap-eyebrow); } #rams-v2 .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--blue); } #rams-v2 .h1, #rams-v2 .h2 { font-family: var(--f-display); font-weight: 900; letter-spacing: -.02em; margin: 0; text-wrap: balance; } #rams-v2 .h1 { font-size: clamp(40px, 6vw, 92px); line-height: 1.03; } #rams-v2 .h2 { font-size: clamp(32px, 4.3vw, 66px); line-height: 1.07; } #rams-v2 .h1 em, #rams-v2 .h2 em { font-style: normal; color: var(--accent-text); } #rams-v2 .dim { color: var(--dim); } #rams-v2 .h-xl { font-size: clamp(46px, 7.4vw, 118px); line-height: .96; letter-spacing: -.04em; } #rams-v2 .h-lg { font-size: clamp(38px, 5.6vw, 90px); line-height: 1.02; letter-spacing: -.035em; } #rams-v2 .h-md { font-size: clamp(30px, 3.3vw, 50px); line-height: 1.12; } #rams-v2 .h-sm { font-size: clamp(26px, 2.5vw, 38px); line-height: 1.18; } #rams-v2 .grad { background: linear-gradient(135deg, #fff 0%, #a0d4ff 20%, #007AFF 50%, #5533ff 80%); background-size: 300% 300%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #a0d4ff; } #rams-v2 .lead { font-size: clamp(17.5px, 1.4vw, 21px); color: var(--text-2); max-width: 44ch; margin: var(--gap-lead) 0 0; line-height: 1.65; } #rams-v2 .muted { color: var(--text-3); } #rams-v2 .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s6) var(--s7); margin-bottom: var(--gap-head); flex-wrap: wrap; } #rams-v2 .sec-head > * { min-width: 0; } #rams-v2 .sec-head .lead { margin-top: var(--gap-lead); } #rams-v2 .sec-head:has(> .lead) { flex-direction: column; align-items: flex-start; row-gap: 0; } #rams-v2 .sec-head > .lead { margin-top: var(--gap-lead); } #rams-v2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 16px; white-space: nowrap; transition: background .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease), transform .6s var(--ease), color .3s; } #rams-v2 .btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 30px -10px rgba(0, 122, 255, .7); } #rams-v2 .btn-primary:hover, #rams-v2 a.btn-primary:hover, #rams-v2 .btn-primary:focus-visible { background: #fff; color: #007AFF !important; box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 14px 36px -12px rgba(0, 122, 255, .7); transform: translateY(-2px); } #rams-v2 .btn-ghost { border: 1px solid var(--line-2); color: var(--text); } #rams-v2 .btn-ghost:hover { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .04); } #rams-v2 .btn-sm { height: 42px; padding: 0 18px; font-size: 15px; } #rams-v2 .wa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(48, 209, 88, .18); flex-shrink: 0; } #rams-v2 .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; border-bottom: 1px solid var(--line-2); padding-bottom: 6px; transition: border-color .6s var(--ease), gap .6s var(--ease); } #rams-v2 .link-arrow:hover { border-color: var(--blue); gap: 14px; } #rams-v2 .rams-global-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--hdr); padding: calc(14px + env(safe-area-inset-top, 0px)) 5% 14px; background: transparent; border-bottom: 1px solid transparent; font-family: var(--f-ui); transition: background .35s, backdrop-filter .35s, border-color .35s; } @media (min-width: 1440px) { #rams-v2 .rams-global-header { padding-inline: calc((100% - min(100%, var(--wrap))) / 2 + var(--pad)); } } #rams-v2 .rams-global-header.rams-scrolled { background: rgba(4, 6, 16, .97); -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%); border-bottom-color: rgba(255, 255, 255, .07); } #rams-v2 .hdr-logo { display: inline-block; line-height: 0; flex-shrink: 0; } #rams-v2 .hdr-logo img { height: 64px; width: auto; } #rams-v2 .rams-desktop-nav { display: flex; align-items: center; gap: clamp(22px, 2.9vw, 44px); } #rams-v2 .rams-desktop-nav > a, #rams-v2 .sr-trigger { font-family: var(--f-ui); font-size: 17px; font-weight: 400; letter-spacing: .06em; color: rgba(255, 255, 255, .82); line-height: 28px; padding-bottom: 2px !important; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } #rams-v2 .rams-desktop-nav > a:hover, #rams-v2 .sr-trigger:hover, #rams-v2 .sr-nav-item.open .sr-trigger { color: #fff; } #rams-v2 .rams-desktop-nav .is-active, #rams-v2 .rams-desktop-nav .is-active > .sr-trigger { color: #fff; font-weight: 600; border-bottom-color: rgba(0, 122, 255, .8); } #rams-v2 .sr-trigger svg { transition: transform .2s; flex-shrink: 0; } #rams-v2 .sr-nav-item { position: relative; } #rams-v2 .sr-nav-item::after { content: ""; position: absolute; top: 100%; left: -10%; right: -10%; height: 20px; } #rams-v2 .sr-dropdown { position: absolute; top: calc(100% + 14px); right: 50%; transform: translateX(50%) translateY(-6px); background: rgba(5, 7, 18, .97); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 8px; min-width: 250px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s, transform .22s, visibility .22s; z-index: 101; box-shadow: 0 8px 32px rgba(0, 0, 0, .4); } #rams-v2 .sr-nav-item:hover .sr-dropdown, #rams-v2 .sr-nav-item.open .sr-dropdown, #rams-v2 .sr-nav-item:focus-within .sr-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(50%) translateY(0); } #rams-v2 .sr-nav-item:hover .sr-trigger svg, #rams-v2 .sr-nav-item.open .sr-trigger svg { transform: rotate(180deg); } #rams-v2 .sr-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 16px; color: rgba(255, 255, 255, .72); letter-spacing: 0; white-space: nowrap; } #rams-v2 .sr-dropdown a:hover { background: rgba(255, 255, 255, .06); color: #fff; } #rams-v2 .sr-dropdown a small { margin-inline-start: auto; color: var(--text-3); font-size: 12px; } #rams-v2 .sr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; } #rams-v2 .hdr-end { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } #rams-v2 .rams-cta-desktop { font-family: var(--f-ui); font-size: 15px; font-weight: 700; background: var(--blue); color: #fff; padding: 10px 24px; border-radius: 999px; white-space: nowrap; transition: background .3s, box-shadow .3s; } #rams-v2 .rams-cta-desktop:hover { background: var(--blue-hover); box-shadow: 0 0 0 5px rgba(0, 122, 255, .16); } #rams-v2 .rams-header-socials { display: flex; align-items: center; gap: 14px; } #rams-v2 .rams-header-socials a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); transition: background .25s, border-color .25s, color .25s; } #rams-v2 .rams-header-socials a:hover { background: rgba(0, 122, 255, .15); border-color: rgba(0, 122, 255, .35); color: var(--accent-text); } #rams-v2 .rams-header-socials svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #rams-v2 .rams-hamburger-gh { display: none; flex-direction: column; gap: 5px; padding: 10px !important; margin-inline-end: -10px; } #rams-v2 .rams-hamburger-gh span { display: block; width: 22px; height: 2px; background: rgba(255, 255, 255, .8); border-radius: 2px; transition: transform .3s, opacity .3s; } #rams-v2 .rams-hamburger-gh[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #rams-v2 .rams-hamburger-gh[aria-expanded="true"] span:nth-child(2) { opacity: 0; } #rams-v2 .rams-hamburger-gh[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } #rams-v2 #rams-mobile-nav-gh { position: fixed; top: calc(84px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 99; max-height: calc(100vh - 84px); overflow-y: auto; background: rgba(6, 8, 18, .98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 8px 24px 24px; border-bottom: 1px solid rgba(255, 255, 255, .07); display: none; flex-direction: column; font-family: var(--f-ui); } #rams-v2 #rams-mobile-nav-gh.open { display: flex; } #rams-v2 #rams-mobile-nav-gh > a { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, .8); padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); text-align: center; } #rams-v2 #rams-mobile-nav-gh > a.is-active { color: #fff; } #rams-v2 #rams-mobile-nav-gh > a.sub { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .6); padding: 10px 0; } #rams-v2 #rams-mobile-nav-gh .mnav-end { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 20px; } #rams-v2 .frame { background: #0D1117; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .02); } #rams-v2 .frame-bar { height: 38px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid var(--line); direction: ltr; } #rams-v2 .frame-dots { display: flex; gap: 6px; flex-shrink: 0; } #rams-v2 .frame-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); } #rams-v2 .frame-url { flex: 1; min-width: 0; max-width: 340px; margin: 0 auto; height: 24px; border-radius: 8px; background: rgba(255, 255, 255, .05); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; font-family: var(--f-mono); font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s, background .2s; } #rams-v2 .frame-url span { overflow: hidden; text-overflow: ellipsis; } #rams-v2 a.frame-url:hover { color: #fff; background: rgba(0, 122, 255, .22); } #rams-v2 .frame-url svg { width: 11px; height: 11px; opacity: .6; flex-shrink: 0; } #rams-v2 .frame-url.is-muted { font-family: var(--f-ui); direction: rtl; color: var(--text-3); } #rams-v2 .frame-screen { position: relative; aspect-ratio: 16 / 10; background: #0D1117; max-width: 100%; } #rams-v2 .frame-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } #rams-v2 .hero { padding-top: calc(var(--hdr) + clamp(40px, 5vw, 76px)); padding-bottom: clamp(40px, 4.5vw, 72px); position: relative; overflow: hidden; } #rams-v2 .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 88px); align-items: center; } #rams-v2 .hero-copy { min-width: 0; } #rams-v2 .hero .h1 { color: #fff; padding-bottom: .06em; } #rams-v2 .hero .h1 em { color: var(--accent-text); -webkit-text-fill-color: var(--accent-text); } @keyframes h1sweep { 0%, 100% { background-position: 100% 0%; } 50% { background-position: 84% 0%; } } #rams-v2 .hero-mesh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 70%, transparent 100%); } #rams-v2 .hero .lead { max-width: 38ch; } #rams-v2 .hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--gap-cta); } #rams-v2 .hero-cta a.hbtn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 36px; border-radius: 9999px; font-family: var(--f-body); font-size: 16px; font-weight: 600; line-height: 1.25; white-space: nowrap; border: 1px solid transparent; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); } #rams-v2 .hero-cta a.hbtn-primary { background: #007AFF; border-color: #007AFF; color: #fff; box-shadow: 0 0 32px rgba(0, 122, 255, .55), 0 6px 24px rgba(0, 0, 0, .35); } #rams-v2 .hero-cta a.hbtn-primary:hover, #rams-v2 .hero-cta a.hbtn-primary:focus-visible { background: #fff; border-color: #fff; color: #007AFF !important; transform: translateY(-2px); } #rams-v2 .hero-cta a.hbtn-ghost { background: transparent; border-color: rgba(255, 255, 255, .2); color: #fff; } #rams-v2 .hero-cta a.hbtn-ghost:hover, #rams-v2 .hero-cta a.hbtn-ghost:focus-visible { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); color: #fff !important; } #rams-v2 .hero-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: var(--s5) 0 0; font-size: 14.5px; color: var(--text-3); } #rams-v2 .hero-meta span + span::before { content: "·"; margin-inline-end: 18px; color: var(--line-2); } #rams-v2 .hero-show { min-width: 0; } #rams-v2 .device { position: relative; padding: 0 0 9% 8%; } #rams-v2 .device .frame { position: relative; z-index: 1; } #rams-v2 .phone { position: absolute; left: 0; bottom: 0; z-index: 2; width: 21%; min-width: 74px; padding: 5px; border-radius: 22px; background: #0B0D12; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 30px 70px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .6); transform: rotate(-3deg); transition: transform .8s var(--ease); } #rams-v2 .phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 28%; height: 5px; margin-left: -14%; border-radius: 4px; background: rgba(0, 0, 0, .85); z-index: 2; } #rams-v2 .phone-screen { position: relative; aspect-ratio: 390 / 844; border-radius: 17px; overflow: hidden; background: #0D1117; } #rams-v2 .phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .9s var(--ease); } #rams-v2 .phone-screen img.on { opacity: 1; } #rams-v2 .hero-show:hover .phone { transform: rotate(0deg) translateY(-6px); } #rams-v2 .show-screen img { opacity: 0; transition: opacity .9s var(--ease); } #rams-v2 .show-screen img.on { opacity: 1; } #rams-v2 .show-bar { height: 2px; background: var(--line); margin-top: 16px; overflow: hidden; border-radius: 2px; } #rams-v2 .show-bar i { display: block; height: 100%; width: 0; background: var(--blue); } #rams-v2 .show-bar i.run { animation: showbar 5s linear forwards; } @keyframes showbar { to { width: 100%; } } #rams-v2 .show-cap { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; } #rams-v2 .show-cap > div:first-child { min-width: 0; } #rams-v2 .show-cap b { font-size: 18px; font-weight: 800; display: block; } #rams-v2 .show-cap small { color: var(--text-3); font-size: 14px; } #rams-v2 .show-ctl { display: flex; align-items: center; gap: 14px; direction: ltr; flex-shrink: 0; } #rams-v2 .show-ctl .mono { font-size: 13px; color: var(--text-3); min-width: 56px; text-align: center; } #rams-v2 .show-ctl button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: border-color .3s, background .3s; } #rams-v2 .show-ctl button:hover { border-color: var(--blue); background: rgba(0, 122, 255, .12); } #rams-v2 .clients { padding-block: clamp(18px, 2.4vw, 34px); } #rams-v2 .clients-row { display: flex; align-items: center; gap: 18px 36px; } #rams-v2 .clients-k { margin: 0; flex-shrink: 0; white-space: nowrap; } #rams-v2 .marquee { flex: 1; min-width: 0; overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } #rams-v2 .marquee-track { display: flex; width: max-content; animation: marq 46s linear infinite; } #rams-v2 .marquee:hover .marquee-track, #rams-v2 .marquee:focus-within .marquee-track { animation-play-state: paused; } #rams-v2 .marquee-group { display: flex; flex-shrink: 0; list-style: none; margin: 0; padding: 0; } #rams-v2 .marquee-group li { display: flex; align-items: center; white-space: nowrap; direction: rtl; unicode-bidi: isolate; font-family: var(--f-display); font-weight: 800; font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -.01em; color: rgba(244, 246, 249, .42); transition: color .6s var(--ease); } #rams-v2 .marquee-group li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 122, 255, .75); margin-inline: clamp(22px, 2.6vw, 40px); flex-shrink: 0; } #rams-v2 .marquee-group li:hover { color: #fff; } @keyframes marq { to { transform: translate3d(-50%, 0, 0); } } #rams-v2 .stats { position: relative; } #rams-v2 .stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } #rams-v2 .stat { padding: clamp(28px, 3.4vw, 46px) clamp(12px, 2vw, 32px); text-align: start; } #rams-v2 .stat:first-child { padding-inline-start: 0; } #rams-v2 .stat + .stat { border-inline-start: 1px solid var(--line); } #rams-v2 .stat b { display: block; font-family: var(--f-display); font-weight: 900; font-size: clamp(40px, 4.4vw, 64px); letter-spacing: -.03em; line-height: 1; } #rams-v2 .stat b .u { color: var(--accent-text); font-size: .6em; vertical-align: .38em; margin-inline: 2px; } #rams-v2 .stat > span { display: block; margin-top: 10px; color: var(--text-3); font-size: 14.5px; line-height: 1.45; } #rams-v2 .wcard-hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; } #rams-v2 .gtile a.cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 9999px; font-family: var(--f-body); font-size: 13px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; border: 0; transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); } #rams-v2 .gtile a.cbtn-case, #rams-v2 .gtile a.cbtn-case:hover { background: var(--blue); color: #fff !important; } #rams-v2 .gtile a.cbtn-live, #rams-v2 .gtile a.cbtn-live:hover { background: #fff; color: #05070A !important; } #rams-v2 .gtile a.cbtn:hover { opacity: .9; transform: translateY(-2px); } #rams-v2 .gtile a.cbtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } #rams-v2 .work-head { margin-bottom: var(--gap-head); } #rams-v2 .work-foot { display: flex; justify-content: flex-start; margin-top: clamp(40px, 4.4vw, 64px); } #rams-v2 .work-foot .link-arrow { font-size: 18px; } #rams-v2 .wl { display: none; } #rams-v2 .works[data-wl="1"] .wl-1, #rams-v2 .works[data-wl="2"] .wl-2 { display: block; } #rams-v2 .tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 3.4vw, 56px) var(--grid-gap); } #rams-v2 .gtile { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-width: 0; position: relative; transition: translate .7s var(--ease); } #rams-v2 .gtile-media { grid-row: 1; grid-column: 1; position: relative; padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .09); transition: border-color .6s var(--ease), background .6s var(--ease); } #rams-v2 .gtile-shot { position: relative; border-radius: 11px; overflow: hidden; aspect-ratio: 16 / 10; background: #0D1117; } #rams-v2 .gtile-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .8s var(--ease); } #rams-v2 .gtile-cap { grid-row: 2; grid-column: 1; display: flex; align-items: baseline; column-gap: 10px; min-width: 0; padding: 14px 4px 0; } #rams-v2 .gtile-cap h3 { margin: 0; font-family: var(--f-display); font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; flex: 0 0 auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #rams-v2 .gtile-type { color: var(--text-3); font-size: 14.5px; line-height: 1.45; flex: 0 100 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #rams-v2 .gtile-type::before { content: "·"; margin-inline-end: 10px; color: var(--line-2); } #rams-v2 .gtile-actions { grid-row: 3; grid-column: 1; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 4px 0; } @media (hover: hover) and (pointer: fine) { #rams-v2 .gtile-shot::after { content: ""; position: absolute; inset: 0; background: rgba(5, 7, 10, .55); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } #rams-v2 .gtile-actions { grid-row: 1; align-self: center; justify-self: center; z-index: 3; position: relative; flex-direction: column; align-items: center; flex-wrap: nowrap; gap: 10px; padding: 0; opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); } #rams-v2 .gtile a.cbtn { width: 170px; height: 42px; font-size: 13.5px; } #rams-v2 .gtile:hover, #rams-v2 .gtile:focus-within { translate: 0 -4px; } #rams-v2 .gtile:hover .gtile-media, #rams-v2 .gtile:focus-within .gtile-media { border-color: rgba(0, 122, 255, .35); background: rgba(0, 122, 255, .06); } #rams-v2 .gtile:hover .gtile-shot img, #rams-v2 .gtile:focus-within .gtile-shot img { transform: scale(1.045); } #rams-v2 .gtile:hover .gtile-shot::after, #rams-v2 .gtile:focus-within .gtile-shot::after { opacity: 1; } #rams-v2 .gtile:hover .gtile-actions, #rams-v2 .gtile:focus-within .gtile-actions { opacity: 1; transform: none; pointer-events: auto; } } #rams-v2 .wall { --wh: clamp(150px, 15vw, 270px); --wg: clamp(12px, 1.3vw, 22px); margin-inline: calc(50% - 50vw); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } #rams-v2 .wall-row { overflow: hidden; direction: ltr; padding-block: 6px; } #rams-v2 .wall-row + .wall-row { margin-top: calc(var(--wg) - 12px); } #rams-v2 .wall-track { display: flex; width: max-content; animation: wall 110s linear infinite; } #rams-v2 .wall-row--2 .wall-track { animation-direction: reverse; animation-duration: 124s; } #rams-v2 .wall-row:hover .wall-track, #rams-v2 .wall-row:focus-within .wall-track { animation-play-state: paused; } @keyframes wall { to { transform: translate3d(-50%, 0, 0); } } #rams-v2 .wall-group { display: flex; flex-shrink: 0; list-style: none; margin: 0; padding: 0; } #rams-v2 .wt { flex-shrink: 0; margin-inline-end: var(--wg); } #rams-v2 .wt a { position: relative; display: block; height: var(--wh); overflow: hidden; } #rams-v2 .wt-pic { display: block; height: 100%; } #rams-v2 .wt-d a { width: calc(var(--wh) * 1.6); border-radius: 14px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .035); } #rams-v2 .wt-d img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .8s var(--ease); } #rams-v2 .wt-m a { width: calc((var(--wh) - 12px) * .4621 + 12px); border-radius: 24px; } #rams-v2 .wt-phone { display: block; height: 100%; padding: 5px; border-radius: 24px; background: #0B0D12; border: 1px solid rgba(255, 255, 255, .2); } #rams-v2 .wt-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 19px; } #rams-v2 .wt-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; direction: rtl; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 40px 14px 12px; background: linear-gradient(to top, rgba(5, 7, 10, .94), rgba(5, 7, 10, .6) 55%, transparent); opacity: 0; translate: 0 8px; transition: opacity .35s var(--ease), translate .35s var(--ease); } #rams-v2 .wt-m .wt-cap { padding: 40px 10px 12px; } #rams-v2 .wt-cap b { min-width: 0; font-family: var(--f-display); font-size: 15px; font-weight: 800; line-height: 1.3; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #rams-v2 .wt-cap i { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-style: normal; font-size: 14px; } #rams-v2 .wt a:hover .wt-cap, #rams-v2 .wt a:focus-visible .wt-cap { opacity: 1; translate: none; } #rams-v2 .wt-d a:hover img, #rams-v2 .wt-d a:focus-visible img { transform: scale(1.04); } #rams-v2 .wt a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } @media (hover: none) { #rams-v2 .wt-cap { opacity: 1; translate: none; padding-top: 28px; } #rams-v2 .wt-cap i { width: 26px; height: 26px; font-size: 12.5px; } } #rams-v2 .incl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: var(--gap-after); padding: 20px 24px; border-radius: 16px; border: 1px solid var(--line); } #rams-v2 .incl b { font-size: 15px; margin-inline-end: 6px; } #rams-v2 .incl span { font-size: 14px; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 14px; } #rams-v2 .incl a { margin-inline-start: auto; font-size: 14.5px; font-weight: 700; color: var(--blue-2); } #rams-v2 .portrait { aspect-ratio: 4 / 5; max-width: 100%; border-radius: 18px; border: 1px dashed var(--line-2); background: var(--panel); display: grid; place-items: center; text-align: center; padding: 30px; color: var(--text-3); font-size: 15px; line-height: 1.6; } #rams-v2 .portrait svg { width: 56px; height: 56px; opacity: .35; margin: 0 auto 16px; } #rams-v2 .portrait b { display: block; color: var(--flag); font-size: 13px; font-weight: 700; margin-bottom: 6px; } #rams-v2 .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #rams-v2 .sq { margin: 0; container-type: inline-size; --sq-max: 64px; --sq-fit: 8.8cqi; } #rams-v2 .sq--sm { --sq-max: 44px; } #rams-v2 .sq p { margin: 0; padding-bottom: .4em; font-family: var(--f-display); font-size: clamp(30px, 8.6vw, var(--sq-max)); font-size: min(var(--sq-fit), var(--sq-max)); line-height: 1.3; letter-spacing: -.02em; text-align: start; color: var(--text); } #rams-v2 .sq-l { display: block; white-space: nowrap; } #rams-v2 .sq-l + .sq-l { margin-top: .08em; } #rams-v2 .sq-dim { font-weight: 400; color: rgba(244, 246, 249, .6); letter-spacing: -.01em; } #rams-v2 .sq b { font-weight: 900; } #rams-v2 .sq .sq-me.sig { position: relative; display: inline-block; width: 2.3em; height: .7em; vertical-align: baseline; margin-inline-start: 0; clip-path: inset(-1.4em -1em -1.6em -1em); } #rams-v2 .sq-me img { position: absolute; left: -.1em; bottom: -1.05em; width: 3.4em; height: auto; max-width: none; clip-path: polygon(0 0, 100% 0, 100% 56%, 40.3% 56%, 40.3% 59.5%, 28.2% 59.5%, 44.3% 100%, 0 100%); transform: rotate(-4deg); transform-origin: 25% 56%; } .js #rams-v2 .sq .sq-me.sig.pre { clip-path: inset(-1.4em calc(100% + 1em) -1.6em -1em); } .js #rams-v2 .sq .sq-me.sig.pre.in { clip-path: inset(-1.4em -1em -1.6em -1em); transition: clip-path 2.2s cubic-bezier(.6, .1, .2, 1) .45s; } #rams-v2 .studio-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 110px); align-items: center; } #rams-v2 .studio-grid > * { min-width: 0; } #rams-v2 .studio-copy > p:not(.eyebrow) { font-size: clamp(17.5px, 1.35vw, 20px); color: var(--text-2); max-width: 46ch; margin: var(--gap-lead) 0 0; } #rams-v2 .studio-copy > p strong { color: var(--text); } #rams-v2 .studio-copy .link-arrow { margin-top: var(--gap-cta); } #rams-v2 .studio-copy blockquote + p { margin-top: var(--s6); } #rams-v2 .studio-art { position: relative; aspect-ratio: 1 / .92; max-width: 560px; width: 100%; margin-inline: auto; } #rams-v2 .stack { position: absolute; inset: 6% 4% 4%; } #rams-v2 .stack-card { position: absolute; margin: 0; width: 64%; border-radius: 12px; overflow: hidden; background: #0D1117; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85); transition: transform .8s var(--ease); } #rams-v2 .stack-card .frame-bar { height: 22px; padding: 0 8px; gap: 8px; } #rams-v2 .stack-card .frame-dots i { width: 6px; height: 6px; } #rams-v2 .stack-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; } #rams-v2 .stack-card.s1 { top: 0; right: 0; transform: rotate(5deg); } #rams-v2 .stack-card.s2 { top: 20%; left: 0; transform: rotate(-6deg); } #rams-v2 .stack-card.s3 { top: 36%; right: 12%; transform: rotate(1.5deg); z-index: 1; } #rams-v2 .studio-art:hover .s1 { transform: rotate(7deg) translate(-8px, -8px); } #rams-v2 .studio-art:hover .s2 { transform: rotate(-8deg) translate(-6px, 4px); } #rams-v2 .studio-art:hover .s3 { transform: rotate(0deg) translateY(-6px); } #rams-v2 .row-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3) var(--s6); flex-wrap: wrap; margin-bottom: var(--gap-head); } #rams-v2 .svc-head { margin-bottom: var(--gap-head); } #rams-v2 .svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } #rams-v2 .svc-card { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 36px 28px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: translate .6s var(--ease), border-color .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease); } #rams-v2 .svc-card:hover, #rams-v2 .svc-card:focus-visible { translate: 0 -8px; background: rgba(0, 122, 255, .06); border-color: rgba(0, 122, 255, .35); box-shadow: 0 24px 64px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 122, 255, .12); } #rams-v2 .svc-icon { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: rgba(0, 122, 255, .28); border: 1px solid rgba(0, 122, 255, .55); } #rams-v2 .svc-icon svg { width: 24px; height: 24px; filter: drop-shadow(0 0 8px rgba(0, 210, 255, .75)); } #rams-v2 .svc-card h3 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; color: #fff; } #rams-v2 .svc-card p { margin: 0; flex: 1; font-size: 17px; line-height: 1.75; color: var(--text-2); } #rams-v2 .svc-price { font-size: 15px; color: var(--text-3); } #rams-v2 .svc-price b { color: var(--text); font-size: 20px; font-weight: 800; } #rams-v2 .svc-more { font-family: var(--f-ui); font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--accent-text); display: inline-flex; gap: 8px; transition: gap .6s var(--ease); } #rams-v2 .svc-card:hover .svc-more { gap: 12px; } #rams-v2 .tl { position: relative; --p: 1; } .js #rams-v2 .tl { --p: 0; } #rams-v2 .tl-line { position: absolute; top: 5px; right: 0; left: 0; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; } #rams-v2 .tl-line i { position: absolute; inset: 0; background: linear-gradient(270deg, var(--blue-2), var(--blue)); transform-origin: right center; transform: scaleX(var(--p)); } #rams-v2 .tl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } #rams-v2 .tl-steps li { position: relative; padding-top: 34px; min-width: 0; } #rams-v2 .tl-dot { position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: #1a1b2e; border: 2px solid var(--line-2); transition: background .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease); } #rams-v2 .tl-steps li.on .tl-dot, html:not(.js) #rams-v2 .tl-dot { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 5px rgba(0, 122, 255, .2); } #rams-v2 .tl-steps .mono { font-size: 12.5px; color: var(--blue-2); } #rams-v2 .tl-steps h3 { margin: 6px 0 8px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 800; line-height: 1.3; } #rams-v2 .tl-steps p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; } #rams-v2 .closing { border-top: 1px solid var(--line); } #rams-v2 .closing-inner { text-align: center; } #rams-v2 .closing .eyebrow { justify-content: center; } #rams-v2 .closing .eyebrow::before { display: none; } #rams-v2 .closing-h { margin: 0 auto; max-width: 16ch; font-family: var(--f-display); font-weight: 900; font-size: clamp(40px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -.045em; color: #fff; text-wrap: balance; } #rams-v2 .closing-h .stroke { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .6); } #rams-v2 .closing-sub { margin: var(--gap-lead) auto 0; max-width: 46ch; font-size: clamp(17px, 1.35vw, 19px); color: var(--text-2); line-height: 1.7; } #rams-v2 .closing .hero-cta { justify-content: center; } #rams-v2 .closing .hbtn-ghost { gap: 10px; } #rams-v2 .closing-note { margin: var(--s5) 0 0; font-size: 14px; color: var(--text-3); } #rams-v2 .sec--tight { padding-block: var(--sec-sm); } #rams-v2 .sec--loose { padding-block: var(--sec-sm) var(--sec); } #rams-v2 .flow-note { margin: var(--gap-after) 0 0; color: var(--text-3); font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; } #rams-v2 .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } #rams-v2 .blog-card { display: flex; flex-direction: column; min-width: 0; border-radius: 20px; overflow: hidden; background: var(--panel); border: 1px solid var(--panel-line); transition: border-color .6s var(--ease), translate .7s var(--ease); } #rams-v2 .blog-card:hover { border-color: rgba(0, 122, 255, .35); translate: 0 -4px; } #rams-v2 .blog-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: rgba(0, 122, 255, .08); max-width: 100%; } #rams-v2 .blog-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; } #rams-v2 .blog-cat { font-family: var(--f-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--blue-2); margin: 0 0 10px; } #rams-v2 .blog-title { font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1.45; margin: 0 0 auto; color: var(--text); text-wrap: balance; } #rams-v2 .blog-date { font-family: var(--f-ui); font-size: 13px; color: var(--text-3); margin-top: 20px; } #rams-v2 .faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); } #rams-v2 .faq-grid .h2 { font-size: clamp(32px, 3.6vw, 54px); } #rams-v2 .faq details { border-top: 1px solid var(--line-2); } #rams-v2 .faq details:last-child { border-bottom: 1px solid var(--line-2); } #rams-v2 .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font-size: 19px; font-weight: 700; } #rams-v2 .faq summary::-webkit-details-marker { display: none; } #rams-v2 .faq summary::after { content: "+"; color: var(--blue-2); font-size: 26px; line-height: 1; font-weight: 300; transition: transform .6s var(--ease); flex-shrink: 0; } #rams-v2 .faq details[open] summary::after { transform: rotate(45deg); } #rams-v2 .faq details p { margin: -6px 0 24px; color: var(--text-2); font-size: 16.5px; max-width: 62ch; } #rams-v2 .contact { overflow: hidden; } #rams-v2 .foot { padding: var(--s8) 0; position: relative; z-index: 2; } #rams-v2 .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s6); } #rams-v2 .foot-grid > * { min-width: 0; } #rams-v2 .foot img { height: 60px; width: auto; } #rams-v2 .foot p { color: var(--text-3); font-size: 14.5px; margin: 16px 0 0; max-width: 32ch; } #rams-v2 .foot h4 { font-size: 13px; letter-spacing: .08em; color: var(--text-3); font-weight: 500; margin: 0 0 16px; } #rams-v2 .foot ul { list-style: none; padding: 0; margin: 0; } #rams-v2 .foot li { margin-bottom: 10px; font-size: 15px; } #rams-v2 .foot li a { color: var(--text-2); transition: color .2s; } #rams-v2 .foot li a:hover { color: var(--text); } #rams-v2 .foot-base { display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--text-3); font-size: 13px; } #rams-v2 .pf-hero { position: relative; padding: calc(var(--hdr) + clamp(48px, 6vw, 90px)) 0 var(--s6); overflow: hidden; } #rams-v2 .pf-hero-in { position: relative; } #rams-v2 .pf-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, .067) 1px, transparent 1px); background-size: 38px 38px; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); } #rams-v2 .pf-backdrop { position: absolute; top: 56%; left: max(0px, calc((100% - var(--wrap)) / 2)); transform: translateY(-50%); font-family: var(--f-display); font-weight: 900; font-size: clamp(76px, 14vw, 200px); letter-spacing: -.04em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(0, 122, 255, .5); text-shadow: 0 0 80px rgba(0, 122, 255, .1); opacity: .08; white-space: nowrap; user-select: none; pointer-events: none; } #rams-v2 .pf-eyebrow { font-family: var(--f-ui); font-size: 12px; font-weight: 700; letter-spacing: .28em; color: var(--blue-2); margin: 0 0 var(--gap-eyebrow); position: relative; z-index: 1; } #rams-v2 .pf-h1 { font-family: var(--f-display); font-size: clamp(40px, 6vw, 82px); font-weight: 900; letter-spacing: -.035em; line-height: 1.06; margin: 0 0 var(--gap-lead); position: relative; z-index: 1; text-wrap: balance; } #rams-v2 .pf-h1 .blue { color: var(--accent-text); } #rams-v2 .pf-hero-sub { font-size: 17px; font-weight: 300; color: rgba(255, 255, 255, .5); line-height: 1.75; max-width: 460px; margin: 0; position: relative; z-index: 1; } #rams-v2 .pf-filter-wrap { position: relative; z-index: 1; padding-top: var(--s5); } #rams-v2 .pf-filter-bar { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; } #rams-v2 .pf-fbtn { font-family: var(--f-body); font-size: 13.5px; font-weight: 600; letter-spacing: .03em; color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; padding: 9px 22px !important; transition: color .22s, background .22s, border-color .22s, box-shadow .22s; } #rams-v2 .pf-fbtn:hover { color: #fff; border-color: rgba(0, 122, 255, .35); background: rgba(0, 122, 255, .07); } #rams-v2 .pf-fbtn.active { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: 0 0 20px rgba(0, 122, 255, .35); } #rams-v2 .pf-count { margin: var(--s4) 0 0; font-size: 13.5px; color: var(--text-3); } #rams-v2 .pf-section { padding-block: var(--s7) var(--sec); } #rams-v2 .ab-hero { position: relative; padding: calc(var(--hdr) + 36px) 0 clamp(80px, 9vw, 140px); } #rams-v2 .ab-hero { --abx: clamp(8px, calc(var(--pad) * .6), 80px); } #rams-v2 .ab-panel { position: relative; z-index: 1; border-radius: 28px; overflow: hidden; margin-inline: calc(-1 * var(--abx)); background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .08); } #rams-v2 .ab-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 48px 48px; } #rams-v2 .ab-inner { position: relative; z-index: 1; padding: clamp(40px, 6vw, 80px) var(--abx) clamp(36px, 5vw, 72px); } #rams-v2 .ab-eyebrow { display: block; font-family: var(--f-ui); font-size: 12px; font-weight: 600; letter-spacing: .22em; color: rgba(140, 185, 255, .95); margin: 0 0 var(--gap-eyebrow); } #rams-v2 .ab-h1 { font-family: var(--f-display); font-weight: 900; font-size: clamp(52px, 8vw, 116px); letter-spacing: -.04em; line-height: 1; margin: 0 0 var(--gap-lead); text-wrap: balance; } #rams-v2 .ab-h1 em { font-style: normal; color: var(--accent-text); } #rams-v2 .ab-lead { font-family: var(--f-ui); font-size: clamp(17.5px, 1.5vw, 21px); line-height: 1.85; color: rgba(255, 255, 255, .88); max-width: 600px; margin: 0 0 var(--gap-cta); } #rams-v2 .ab-cta { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; } #rams-v2 .ab-stats { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 64px); padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .08); } #rams-v2 .ab-stat { padding: 0 clamp(18px, 3vw, 40px); text-align: start; transition: transform .6s var(--ease); } #rams-v2 .ab-stat:first-child { padding-inline-start: 0; } #rams-v2 .ab-stat + .ab-stat { border-inline-start: 1px solid rgba(255, 255, 255, .08); } #rams-v2 .ab-stat:hover { transform: translateY(-4px); } #rams-v2 .ab-stat b { display: block; font-family: var(--f-display); font-size: clamp(32px, 3.5vw, 52px); font-weight: 900; letter-spacing: -.04em; line-height: 1; } #rams-v2 .ab-stat > span { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .55); margin-top: 8px; } #rams-v2 .about-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: clamp(36px, 6vw, 110px); align-items: start; } #rams-v2 .about-grid .portrait { position: sticky; top: calc(var(--hdr) + 16px); } #rams-v2 .about-body p { font-size: clamp(18px, 1.4vw, 20px); color: var(--text-2); margin: var(--gap-lead) 0 0; max-width: 48ch; } #rams-v2 .about-body p strong { color: var(--text); font-weight: 700; } #rams-v2 .facts { list-style: none; padding: 0; margin: clamp(40px, 5vw, 60px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } #rams-v2 .facts li { border-top: 2px solid var(--line-2); padding-top: 20px; position: relative; } #rams-v2 .facts li::before { content: ""; position: absolute; top: -2px; inset-inline-start: 0; width: 36px; height: 2px; background: var(--blue); } #rams-v2 .facts b { display: block; font-size: 18px; font-weight: 800; margin: 0 0 6px; line-height: 1.35; } #rams-v2 .facts span { color: var(--text-3); font-size: 15px; line-height: 1.6; display: block; } #rams-v2 .proc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 110px); align-items: start; } #rams-v2 .proc-sticky { position: sticky; top: calc(var(--hdr) + 16px); } #rams-v2 .proc-sticky .h2 { font-size: clamp(32px, 3.6vw, 54px); } #rams-v2 .steps { list-style: none; margin: 0; padding: 0; } #rams-v2 .step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 18px; padding: 28px 0; border-top: 1px solid var(--line); } #rams-v2 .step:last-child { border-bottom: 1px solid var(--line); } #rams-v2 .step .mono { font-size: 13px; color: var(--text-3); padding-top: 6px; } #rams-v2 .step h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; } #rams-v2 .step p { margin: 8px 0 0; color: var(--text-2); font-size: 16.5px; } #rams-v2 .chip { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--blue-2); border: 1px solid rgba(0, 122, 255, .35); border-radius: 999px; padding: 3px 12px; } #rams-v2 .time-note { margin: var(--gap-after) 0 0; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--panel-line); background: var(--panel); color: var(--text-2); font-size: 15px; line-height: 1.6; } #rams-v2 .time-note b { color: var(--text); } #rams-v2 .sign-off { margin-top: var(--gap-cta); } #rams-v2 .sign-off > p { margin: var(--s5) 0 0; color: var(--text-3); font-size: 15px; line-height: 1.6; } #rams-v2 .sig { width: 190px; height: auto; flex-shrink: 0; clip-path: inset(0 0 0 0); } .js #rams-v2 .sig.pre { clip-path: inset(0 100% 0 0); } .js #rams-v2 .sig.pre.in { clip-path: inset(0 0 0 0); transition: clip-path 2.2s cubic-bezier(.6, .1, .2, 1); } #rams-v2 .quote { border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: var(--panel-2); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9); margin-top: var(--s7); } #rams-v2 .quote-cover { padding: 28px 28px 24px; background: radial-gradient(90% 120% at 90% 0%, rgba(var(--glow), .45), transparent 60%), #0A0D13; position: relative; } #rams-v2 .quote-cover img { height: 40px; width: auto; } #rams-v2 .quote-cover h4 { margin: 24px 0 4px; font-size: 30px; font-weight: 900; letter-spacing: -.02em; } #rams-v2 .quote-cover p { margin: 0; color: var(--text-2); font-size: 15px; } #rams-v2 .quote-cover .mono { display: block; margin-top: 14px; font-size: 12px; color: var(--text-3); } #rams-v2 .tag { position: absolute; top: 18px; inset-inline-end: 18px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--line-2); color: var(--text-3); background: rgba(5, 7, 10, .5); } #rams-v2 .ledger { padding: 10px 28px 4px; } #rams-v2 .lrow { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px dashed var(--line); font-size: 15px; } #rams-v2 .lrow span:first-child { color: var(--text-2); min-width: 0; } #rams-v2 .lrow i { flex: 1; } #rams-v2 .lrow b { font-family: var(--f-mono); font-weight: 500; font-size: 14px; white-space: nowrap; } #rams-v2 .lrow .inc { color: var(--ok); font-family: inherit; font-size: 14px; font-weight: 700; } #rams-v2 .ltotal { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0 6px; font-weight: 800; font-size: 17px; } #rams-v2 .ltotal b { font-size: 26px; font-weight: 900; } #rams-v2 .lterms { color: var(--text-3); font-size: 13px; padding-bottom: 20px; margin: 0; line-height: 1.6; } #rams-v2 .qsign { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 28px 30px; border-top: 1px solid var(--line); } #rams-v2 .qsign-box { flex: 1; height: 64px; border-bottom: 1px solid var(--line-2); position: relative; } #rams-v2 .qsign-box small { position: absolute; bottom: -22px; inset-inline-start: 0; color: var(--text-3); font-size: 12px; } #rams-v2 .qsign-box svg { position: absolute; inset: 4px 10px 6px; width: calc(100% - 20px); height: calc(100% - 10px); } #rams-v2 .qsign-box path { stroke: var(--blue-2); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 0; } .js #rams-v2 .quote.pre .qsign-box path { stroke-dashoffset: 600; } .js #rams-v2 .quote.pre.in .qsign-box path { transition: stroke-dashoffset 2.4s .6s var(--ease); stroke-dashoffset: 0; } #rams-v2 .qsign .btn { pointer-events: none; } #rams-v2 .voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } #rams-v2 .voice { border: 1px dashed rgba(245, 165, 36, .45); border-radius: 18px; padding: 28px 26px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: 26px; color: var(--text-3); background: rgba(245, 165, 36, .02); } #rams-v2 .voice q { font-size: 18px; line-height: 1.6; quotes: "״" "״"; } #rams-v2 .voice div { display: flex; align-items: center; gap: 12px; font-size: 14px; } #rams-v2 .voice div i { width: 38px; height: 38px; border-radius: 50%; border: 1px dashed var(--line-2); flex-shrink: 0; } #rams-v2 .sk-flag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--flag); border: 1px dashed rgba(245, 165, 36, .6); border-radius: 999px; padding: 4px 12px; } #rams-v2 .cta-band { text-align: center; overflow: hidden; } #rams-v2 .cta-band .wrap { position: relative; } #rams-v2 .cta-band .lead { margin-inline: auto; } #rams-v2 .cta-band .h-lg { max-width: 18ch; margin-inline: auto; } #rams-v2 .cta-band .hero-cta { justify-content: center; } #rams-v2 .mk-hero { padding-top: calc(var(--hdr) + clamp(36px, 5vw, 70px)); padding-bottom: clamp(56px, 6vw, 90px); position: relative; overflow: hidden; } #rams-v2 .mk-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; } #rams-v2 .mk-hero-grid > * { min-width: 0; } #rams-v2 .mk-hero .h1 { font-size: clamp(40px, 5.2vw, 80px); max-width: 16ch; } #rams-v2 .mk-hero .lead { max-width: 50ch; } #rams-v2 .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--gap-cta); } #rams-v2 .chips a { font-size: 14.5px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); transition: all .3s; } #rams-v2 .chips a:hover { border-color: var(--blue); color: var(--text); background: rgba(0, 122, 255, .1); } #rams-v2 .robot-stage { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; } #rams-v2 .robot-stage::before { content: ""; position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0, 80, 255, .16) 0%, transparent 66%); } #rams-v2 .robot-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0, 122, 255, .22); } #rams-v2 .robot-ring.r2 { inset: -9%; border-color: rgba(0, 122, 255, .1); } #rams-v2 .robot-disc { position: relative; width: 84%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(ellipse at 48% 48%, rgba(0, 90, 255, .22) 0%, rgba(0, 55, 180, .1) 42%, transparent 75%); display: grid; place-items: center; } #rams-v2 #robot { width: 100%; height: 100%; } #rams-v2 #robot svg { display: block; } #rams-v2 .robot-ph { display: none; padding: 30px; text-align: center; color: var(--flag); font-weight: 700; font-size: 15px; border: 1px dashed rgba(245, 165, 36, .6); border-radius: 50%; width: 100%; height: 100%; place-items: center; } #rams-v2 .robot-stage.failed .robot-ph { display: grid; } #rams-v2 .robot-stage.failed #robot { display: none; } #rams-v2 .robot-pill { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(5, 7, 15, .88); border: 1px solid rgba(255, 255, 255, .08); font-size: 13px; font-weight: 700; direction: ltr; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); animation: bob 5s ease-in-out infinite; } #rams-v2 .robot-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); } #rams-v2 .robot-pill.p1 { top: 8%; right: -2%; } #rams-v2 .robot-pill.p2 { top: 44%; left: -6%; animation-delay: -1.6s; } #rams-v2 .robot-pill.p3 { bottom: 6%; right: 8%; animation-delay: -3.1s; } #rams-v2 .robot-pill.p1 i { background: var(--ok); } #rams-v2 .robot-pill.p3 i { background: var(--gold); } @keyframes bob { 50% { transform: translateY(-8px); } } #rams-v2 .draft { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--flag); border: 1px dashed rgba(245, 165, 36, .6); border-radius: 999px; padding: 4px 12px; } #rams-v2 .seg { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); gap: 4px; } #rams-v2 .seg button { padding: 9px 18px !important; border-radius: 999px; font-size: 14.5px; font-weight: 700; color: var(--text-2); transition: all .3s; white-space: nowrap; } #rams-v2 .seg button.on { background: var(--blue); color: #fff; } #rams-v2 .seg-col { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; } #rams-v2 .sheet-wrap { overflow-x: auto; border: 1px solid var(--panel-line); border-radius: 18px; background: var(--panel); } #rams-v2 .sheet { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; } #rams-v2 .sheet th, #rams-v2 .sheet td { border-bottom: 1px solid var(--line); padding: 0; } #rams-v2 .sheet thead th { font-size: 13px; font-weight: 500; color: var(--text-3); padding: 18px 10px; text-align: center; border-inline-start: 1px solid var(--line); } #rams-v2 .sheet thead th:first-child { text-align: start; padding-inline-start: 24px; border-inline-start: 0; } #rams-v2 .sheet thead th b { display: block; font-size: 20px; font-weight: 900; color: var(--text); font-family: var(--f-mono); } #rams-v2 .sheet .grp td { padding: 14px 24px 8px; font-size: 12.5px; letter-spacing: .06em; color: var(--blue-2); background: rgba(255, 255, 255, .015); } #rams-v2 .sheet td.task { padding: 14px 24px; font-size: 15px; color: var(--text-2); width: 36%; } #rams-v2 .sheet td.task small { display: block; color: var(--text-3); font-size: 12.5px; } #rams-v2 .sheet td.m { border-inline-start: 1px solid var(--line); text-align: center; height: 52px; } #rams-v2 .cell { display: block; margin: 0 8px; height: 22px; border-radius: 6px; } #rams-v2 .cell.x { background: var(--blue); } #rams-v2 .cell.s { background: var(--text); } #rams-v2 .cell.q { border: 1.5px solid var(--blue-2); background: repeating-linear-gradient(135deg, rgba(77, 184, 255, .25) 0 4px, transparent 4px 8px); } #rams-v2 .cell.g { background: var(--gold); } #rams-v2 .sheet tr.plus { display: none; } #rams-v2 .sheet.growth tr.plus { display: table-row; } #rams-v2 .sheet.growth tr.base-only { display: none; } #rams-v2 .legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; font-size: 13.5px; color: var(--text-3); } #rams-v2 .legend span { display: inline-flex; align-items: center; gap: 8px; } #rams-v2 .legend .cell { width: 26px; height: 12px; margin: 0; } #rams-v2 .fineprint { color: var(--text-3); font-size: 14px; margin: 18px 0 0; } #rams-v2 .aeo-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 100px); align-items: start; } #rams-v2 .aeo-grid > * { min-width: 0; } #rams-v2 .checks { list-style: none; padding: 0; margin: var(--s6) 0 0; } #rams-v2 .checks li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--text-2); font-size: 16.5px; line-height: 1.55; } #rams-v2 .checks li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; border: 1.5px solid var(--blue); background: radial-gradient(circle, var(--blue) 35%, transparent 40%); } #rams-v2 .code { border-radius: 16px; border: 1px solid var(--line-2); background: #080A0F; padding: 22px 24px; direction: ltr; text-align: left; font-family: var(--f-mono); font-size: 13px; line-height: 1.75; color: var(--text-2); overflow-x: auto; white-space: pre; margin: 0; } #rams-v2 .code + .code { margin-top: 14px; } #rams-v2 .code .c { color: var(--text-3); } #rams-v2 .code .k { color: var(--blue-2); } #rams-v2 .code .s { color: var(--gold-2); } #rams-v2 .code .he { direction: rtl; unicode-bidi: isolate; font-family: var(--f-body); } #rams-v2 .phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line-2); } #rams-v2 .phase { padding: 26px 20px 30px; border-inline-start: 1px solid var(--line); position: relative; min-width: 0; } #rams-v2 .phase:first-child { border-inline-start: 0; padding-inline-start: 0; } #rams-v2 .phase::before { content: ""; position: absolute; top: -5px; inset-inline-start: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); } #rams-v2 .phase:first-child::before { inset-inline-start: 0; } #rams-v2 .phase .mono { font-size: 12.5px; color: var(--blue-2); } #rams-v2 .phase h3 { margin: 8px 0 12px; font-size: 20px; font-weight: 800; } #rams-v2 .phase ul { margin: 0; padding-inline-start: 16px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; } #rams-v2 .phase li { margin-bottom: 8px; } #rams-v2 .ptable-wrap { overflow-x: auto; margin-top: var(--s7); } #rams-v2 .ptable { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15.5px; } #rams-v2 .ptable th { text-align: start; font-size: 13px; font-weight: 500; color: var(--text-3); padding: 12px 16px; border-bottom: 1px solid var(--line-2); } #rams-v2 .ptable td { padding: 16px; border-bottom: 1px solid var(--line); color: var(--text-2); font-variant-numeric: tabular-nums; } #rams-v2 .ptable td:first-child { color: var(--text); font-weight: 700; padding-inline-start: 0; } #rams-v2 .ptable th:first-child { padding-inline-start: 0; } #rams-v2 .ptable b { color: var(--text); } #rams-v2 .calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border: 1px solid var(--panel-line); border-radius: 20px; overflow: hidden; } #rams-v2 .calc-in { padding: clamp(22px, 3vw, 40px); background: var(--panel); } #rams-v2 .calc-out { padding: clamp(22px, 3vw, 40px); background: var(--panel-2); border-inline-start: 1px solid var(--panel-line); } #rams-v2 .cfield { margin-bottom: 26px; } #rams-v2 .cfield label { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--text-2); margin-bottom: 10px; } #rams-v2 .cfield label b { font-family: var(--f-mono); color: var(--text); font-weight: 500; white-space: nowrap; } #rams-v2 .cfield input[type=range] { width: 100%; accent-color: var(--blue); } #rams-v2 .cfield small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 6px; } #rams-v2 .big-out small { color: var(--text-3); font-size: 14px; } #rams-v2 .big-out b { display: block; font-size: clamp(46px, 5.4vw, 76px); font-weight: 900; letter-spacing: -.03em; line-height: 1; margin: 8px 0 10px; font-variant-numeric: tabular-nums; } #rams-v2 .big-out p { color: var(--text-2); margin: 0; font-size: 15.5px; } #rams-v2 .outs { margin-top: 30px; border-top: 1px solid var(--line-2); } #rams-v2 .outs div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--text-2); } #rams-v2 .outs div b { font-family: var(--f-mono); font-weight: 500; color: var(--text); white-space: nowrap; } #rams-v2 .calc details { margin-top: 18px; font-size: 13.5px; color: var(--text-3); } #rams-v2 .calc summary { cursor: pointer; } #rams-v2 .calc details p { margin: 10px 0 0; line-height: 1.8; } #rams-v2 .report { border-radius: 18px; border: 1px solid var(--panel-line); background: var(--panel-2); overflow: hidden; } #rams-v2 .report-head { padding: 24px 28px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; align-items: flex-start; } #rams-v2 .report-head h4 { margin: 4px 0 0; font-size: 22px; font-weight: 800; } #rams-v2 .report-head small { color: var(--text-3); font-size: 12.5px; letter-spacing: .06em; } #rams-v2 .report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } #rams-v2 .rbox { padding: 24px 28px; border-bottom: 1px solid var(--line); border-inline-start: 1px solid var(--line); min-width: 0; } #rams-v2 .rbox:nth-child(3n+1) { border-inline-start: 0; } #rams-v2 .rbox h5 { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--text-3); letter-spacing: .04em; } #rams-v2 .rbox .kpi { font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } #rams-v2 .rbox .delta { font-family: var(--f-mono); font-size: 13px; color: var(--ok); margin-inline-start: 8px; direction: ltr; unicode-bidi: isolate; display: inline-block; } #rams-v2 .rbox ul { list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--text-2); } #rams-v2 .rbox ul li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); } #rams-v2 .rbox ul li:last-child { border-bottom: 0; } #rams-v2 .rbox ul li b { font-family: var(--f-mono); font-weight: 500; font-size: 13px; } #rams-v2 .rbox.wide { grid-column: span 3; border-inline-start: 0; } #rams-v2 .rbox .health { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 24px; } #rams-v2 .recs { margin: 0; padding-inline-start: 22px; color: var(--text-2); font-size: 15px; line-height: 1.7; } #rams-v2 .bars { display: flex; flex-direction: column; gap: 8px; } #rams-v2 .bars div { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13.5px; color: var(--text-2); } #rams-v2 .bars i { display: block; height: 8px; border-radius: 4px; background: var(--blue); } #rams-v2 .bars b { font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; text-align: left; } #rams-v2 .care-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 110px); align-items: start; } #rams-v2 .price-inline { display: flex; align-items: baseline; gap: 10px; margin-top: 28px; flex-wrap: wrap; } #rams-v2 .price-inline b { font-size: 40px; font-weight: 900; letter-spacing: -.02em; } #rams-v2 .price-inline span { color: var(--text-3); } #rams-v2 .ilist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-2); } #rams-v2 .irow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto 28px; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line-2); transition: background .6s var(--ease), padding .6s var(--ease); } #rams-v2 a.irow:hover { padding-inline: 14px; background: rgba(255, 255, 255, .025); } #rams-v2 .irow h3 { margin: 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; } #rams-v2 .irow p { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.6; } #rams-v2 .irow .pr { font-size: 13px; color: var(--text-3); white-space: nowrap; } #rams-v2 .irow .arr { color: var(--text-3); transition: color .3s, transform .6s var(--ease); } #rams-v2 a.irow:hover .arr { color: var(--blue-2); transform: translate(2px, -2px); } #rams-v2 #cursor-glow { position: fixed; top: 0; left: 0; width: 480px; height: 480px; margin: -240px 0 0 -240px; border-radius: 50%; pointer-events: none; z-index: 1; mix-blend-mode: screen; opacity: 0; transition: opacity .6s; background: radial-gradient(circle, rgba(0, 122, 255, .30), transparent 65%); } @media (pointer: fine) { .glow-on #rams-v2 #cursor-glow { opacity: 1; } } html:not(.glow-on) #rams-v2 #cursor-glow { display: none; } #rams-v2 main { position: relative; z-index: 2; } #rams-v2 #rfb-v2 { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: none; gap: 10px; padding: 10px; background: rgba(11, 14, 20, .96); border: 1px solid var(--line-2); border-radius: 18px; transform: translateY(160%); transition: transform .6s var(--ease); } #rams-v2 #rfb-v2.on { transform: none; } #rams-v2 #rfb-v2 .btn { flex: 1; height: 48px; min-width: 0; padding: 0 12px; } #rams-v2 .sk-dock { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-family: var(--f-body); } #rams-v2 .sk-hv { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 999px; background: #111; border: 1px dashed rgba(245, 165, 36, .7); box-shadow: 0 14px 40px rgba(0, 0, 0, .6); } #rams-v2 .sk-hv span { font-size: 12.5px; font-weight: 700; color: var(--flag); padding-inline: 6px 4px; white-space: nowrap; } #rams-v2 .sk-hv button { width: 30px; height: 30px; border-radius: 50%; font-size: 13.5px; font-weight: 800; color: var(--text-2); font-family: var(--f-mono); } #rams-v2 .sk-hv button[aria-pressed="true"] { background: var(--flag); color: #111; } #rams-v2 .rv-btn { display: flex; align-items: center; gap: 10px; background: #111; border: 1px solid rgba(245, 165, 36, .6); color: #fff; border-radius: 999px; padding: 10px 16px 10px 12px; font-size: 14px; font-weight: 700; box-shadow: 0 14px 40px rgba(0, 0, 0, .6); } #rams-v2 .rv-btn i { font-style: normal; background: var(--flag); color: #111; border-radius: 999px; min-width: 24px; height: 24px; display: grid; place-items: center; font-size: 13px; padding: 0 6px; } #rams-v2 .rv-panel { position: fixed; top: 0; bottom: 0; left: 0; width: min(440px, 100vw); z-index: 110; background: #0B0D12; border-inline-end: 1px solid var(--line-2); transform: translateX(-102%); transition: transform .6s var(--ease); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); } .review #rams-v2 .rv-panel { transform: none; } #rams-v2 .rv-top { padding: 22px 24px 16px; border-bottom: 1px solid var(--line); } #rams-v2 .rv-top h3 { margin: 0; font-size: 20px; font-weight: 900; padding-inline-end: 44px; } #rams-v2 .rv-top p { margin: 6px 0 0; color: var(--text-3); font-size: 13.5px; line-height: 1.55; } #rams-v2 .rv-body { overflow-y: auto; padding: 4px 24px 40px; flex: 1; } #rams-v2 .rv-body ol { margin: 0; padding: 0; list-style: none; counter-reset: d; } #rams-v2 .rv-body li { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--text-2); counter-increment: d; } #rams-v2 .rv-body li b { color: var(--text); display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 4px; } #rams-v2 .rv-body li b::before { content: counter(d); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--flag); color: #111; font-size: 12px; font-weight: 800; flex-shrink: 0; } #rams-v2 .rv-body li a { display: inline-block; color: var(--blue-2); font-size: 13.5px; font-weight: 700; margin-top: 6px; } #rams-v2 .rv-close { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); } .js #rams-v2 .rv.pre { opacity: .3; transform: translateY(26px); } .js #rams-v2 .rv.pre.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease), translate .7s var(--ease), box-shadow .7s var(--ease), border-color .6s var(--ease); } .js #rams-v2 .rv.pre.in.d1 { transition-delay: .08s; } .js #rams-v2 .rv.pre.in.d2 { transition-delay: .16s; } .js #rams-v2 .rv.pre.in.d3 { transition-delay: .24s; } #rams-v2 .load-in { animation: loadIn .8s var(--ease) both; } #rams-v2 .load-in.d1 { animation-delay: .08s; } #rams-v2 .load-in.d2 { animation-delay: .16s; } #rams-v2 .load-in.d3 { animation-delay: .24s; } @keyframes loadIn { from { opacity: .001; transform: translateY(22px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js #rams-v2 .rv.pre { opacity: 1; transform: none; } #rams-v2 .load-in, #rams-v2 .robot-pill { animation: none; } .js #rams-v2 .sig.pre { clip-path: none; } .js #rams-v2 .sq .sq-me.sig.pre { clip-path: inset(-1.4em -1em -1.6em -1em); } #rams-v2 .show-screen img { transition: none; } #rams-v2 .show-bar i.run { animation: none; } #rams-v2 .hero .h1.load-in { animation: none; } #rams-v2 .phone-screen img { transition: none; } #rams-v2 .marquee-track { animation: none; width: auto; } #rams-v2 .marquee { -webkit-mask-image: none; mask-image: none; } #rams-v2 .marquee-group { flex-wrap: wrap; flex-shrink: 1; row-gap: 6px; direction: rtl; } #rams-v2 .marquee-group[aria-hidden="true"] { display: none; } #rams-v2 .gtile, #rams-v2 .gtile-shot img, #rams-v2 .blog-card, #rams-v2 .stack-card, #rams-v2 .phone, #rams-v2 .svc-card, #rams-v2 .btn { transition: none; } #rams-v2 .gtile:hover .gtile-shot img, #rams-v2 .gtile:focus-within .gtile-shot img { transform: none; } #rams-v2 .wall-track { animation: none; width: auto; } #rams-v2 .wall-group[aria-hidden="true"], #rams-v2 .wall-row--2 { display: none; } #rams-v2 .wall { -webkit-mask-image: none; mask-image: none; margin-inline: 0; } #rams-v2 .wall-row { overflow-x: auto; direction: rtl; scrollbar-width: thin; } #rams-v2 .wt-cap, #rams-v2 .wt-d img { transition: none; } #rams-v2 .wt-d a:hover img, #rams-v2 .wt-d a:focus-visible img { transform: none; } #rams-v2 .tl-line i { transform: none; } } @media (max-width: 1280px) { #rams-v2 .rams-desktop-nav > a, #rams-v2 .sr-trigger { font-size: 16px; letter-spacing: .03em; } #rams-v2 .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; } #rams-v2 .phase:nth-child(4) { border-inline-start: 0; padding-inline-start: 0; } #rams-v2 .phase:nth-child(4)::before { inset-inline-start: 0; } } @media (max-width: 1080px) { #rams-v2 { --hdr: 84px; } #rams-v2 .rams-global-header { padding: calc(12px + env(safe-area-inset-top, 0px)) var(--pad) 12px; min-height: var(--hdr); } #rams-v2 .hdr-logo img { height: 52px; } #rams-v2 .rams-desktop-nav, #rams-v2 .rams-global-header .rams-header-socials, #rams-v2 .rams-cta-desktop { display: none; } #rams-v2 .rams-hamburger-gh { display: flex; } #rams-v2 .hero-grid, #rams-v2 .about-grid, #rams-v2 .proc-grid, #rams-v2 .care-grid, #rams-v2 .faq-grid, #rams-v2 .aeo-grid, #rams-v2 .calc, #rams-v2 .studio-grid, #rams-v2 .mk-hero-grid { grid-template-columns: minmax(0, 1fr); } #rams-v2 .hero-mesh { display: none; } #rams-v2 .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #rams-v2 .foot { padding-bottom: 120px; } #rams-v2 .svc-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; } #rams-v2 .studio-art { max-width: 480px; } #rams-v2 .tl-line { top: 0; bottom: 0; left: auto; right: 5px; width: 2px; height: auto; } #rams-v2 .tl-line i { transform-origin: center top; transform: scaleY(var(--p)); background: linear-gradient(180deg, var(--blue), var(--blue-2)); } #rams-v2 .tl-steps { grid-template-columns: minmax(0, 1fr); gap: 0; } #rams-v2 .tl-steps li { padding: 0 34px 26px 0; } #rams-v2 .tl-steps li:last-child { padding-bottom: 0; } #rams-v2 .tl-dot { top: 4px; } #rams-v2 .calc-out { border-inline-start: 0; border-top: 1px solid var(--line-2); } #rams-v2 .about-grid .portrait, #rams-v2 .proc-sticky { position: static; } #rams-v2 .portrait { aspect-ratio: 16 / 10; } #rams-v2 .blog-body { padding: 18px; } #rams-v2 .blog-title { font-size: 16.5px; } #rams-v2 .facts { grid-template-columns: minmax(0, 1fr); gap: 0; } #rams-v2 .facts li { padding-bottom: 20px; } #rams-v2 .voices { grid-template-columns: minmax(0, 1fr); } #rams-v2 .voice { min-height: 0; } #rams-v2 .report-grid { grid-template-columns: minmax(0, 1fr); } #rams-v2 .rbox, #rams-v2 .rbox:nth-child(3n+1) { border-inline-start: 0; } #rams-v2 .rbox.wide { grid-column: auto; } #rams-v2 .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #rams-v2 #rfb-v2 { display: flex; } #rams-v2 .sk-dock { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; flex-direction: row; flex-wrap: wrap-reverse; align-items: center; gap: 6px; pointer-events: none; } #rams-v2 .sk-dock > * { pointer-events: auto; } #rams-v2 .sk-hv { padding: 2px 2px 2px 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } #rams-v2 .sk-hv span { font-size: 11.5px; padding-inline: 4px 2px; } #rams-v2 .sk-hv button { width: 26px; height: 26px; font-size: 12.5px; } #rams-v2 .rv-btn { padding: 6px 10px 6px 8px; font-size: 12.5px; gap: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } #rams-v2 .rv-btn i { min-width: 20px; height: 20px; font-size: 11.5px; } #rams-v2 .mk-hero .robot-stage { width: min(100%, 360px); } #rams-v2 .seg-col { align-items: flex-start; } } @media (max-width: 768px) { #rams-v2 .device { padding: 0; display: flex; justify-content: center; } #rams-v2 .device .frame { display: none; } #rams-v2 .phone { position: relative; left: auto; bottom: auto; width: min(64vw, 270px); min-width: 0; padding: 7px; border-radius: 36px; transform: none; box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 7px rgba(255, 255, 255, .04); } #rams-v2 .hero-show:hover .phone { transform: none; } #rams-v2 .phone-screen { border-radius: 29px; } #rams-v2 .phone::before { top: 15px; width: 30%; margin-left: -15%; height: 7px; } #rams-v2 .show-cap { text-align: center; align-items: center !important; } } @media (max-width: 639.98px) { #rams-v2 .tgrid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { #rams-v2 { font-size: 16px; } #rams-v2 .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } #rams-v2 .blog-grid { grid-template-columns: minmax(0, 1fr); } #rams-v2 .stat:nth-child(3) { border-inline-start: 0; } #rams-v2 .clients-row { flex-direction: column; align-items: flex-start; gap: 10px; } #rams-v2 .marquee { width: 100%; } #rams-v2 .svc-card { padding: 28px 22px; } #rams-v2 .svc-card p { font-size: 16px; } #rams-v2 .studio-art { aspect-ratio: 1 / 1; } #rams-v2 .stat:nth-child(n+3) { border-top: 1px solid var(--panel-line); } #rams-v2 .phases { grid-template-columns: minmax(0, 1fr); border-top: 0; } #rams-v2 .phase, #rams-v2 .phase:first-child, #rams-v2 .phase:nth-child(4) { border-inline-start: 2px solid var(--line-2); padding: 0 20px 26px; } #rams-v2 .phase::before, #rams-v2 .phase:first-child::before, #rams-v2 .phase:nth-child(4)::before { top: 2px; inset-inline-start: -6px; } #rams-v2 .show-cap { flex-direction: column; align-items: flex-start; } #rams-v2 .hero-meta span + span::before { display: none; } #rams-v2 .hero-meta { flex-direction: column; gap: 4px; } #rams-v2 .hero-cta .btn, #rams-v2 .hero-cta a.hbtn { flex: 1 1 auto; padding-inline: 22px; } #rams-v2 .foot-grid { grid-template-columns: minmax(0, 1fr); } #rams-v2 .quote-cover, #rams-v2 .ledger, #rams-v2 .qsign { padding-inline: 18px; } #rams-v2 .qsign { flex-direction: column; align-items: stretch; gap: 34px; } #rams-v2 .ab-stats { flex-direction: column; align-items: stretch; } #rams-v2 .ab-stat { width: 100%; max-width: 280px; padding: 16px 0; } #rams-v2 .ab-stat + .ab-stat { border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .08); } #rams-v2 .ab-cta .btn { width: 100%; } #rams-v2 .irow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 22px 0; } #rams-v2 .irow p { grid-column: 1 / -1; grid-row: 2; } #rams-v2 .irow .arr { display: none; } #rams-v2 .incl a { margin-inline-start: 0; } #rams-v2 .robot-pill { font-size: 12px; padding: 6px 11px; } #rams-v2 .robot-pill.p2 { left: -2%; } #rams-v2 .sheet-wrap { border-radius: 14px; } #rams-v2 .ptable { min-width: 0; font-size: 14px; } #rams-v2 .ptable th, #rams-v2 .ptable td { padding: 12px 6px; } #rams-v2 .ptable th { font-size: 12px; } #rams-v2 .sk-hv span { display: none; } #rams-v2 .sk-hv::before { content: "עבודות"; font-size: 11.5px; font-weight: 700; color: var(--flag); padding-inline: 4px 2px; } #rams-v2 .step { grid-template-columns: 40px minmax(0, 1fr); } } @media (min-width: 1800px) { #rams-v2 { --hdr: 124px; --sec: clamp(150px, calc(5vw + 54px), 190px); --sec-sm: clamp(104px, calc(3.4vw + 40px), 130px); --gap-eyebrow: 26px; --gap-lead: clamp(24px, calc(.9vw + 8px), 32px); --gap-head: clamp(64px, calc(2.5vw + 18px), 84px); --gap-cta: clamp(40px, calc(1.2vw + 18px), 50px); --gap-after: clamp(32px, calc(.9vw + 16px), 40px); --grid-gap: clamp(24px, calc(1.2vw + 2px), 32px); } #rams-v2 { font-size: 18px; } #rams-v2 .eyebrow { font-size: 14.5px; } #rams-v2 .h1 { font-size: clamp(92px, calc(3.125vw + 44px), 124px); } #rams-v2 .h2 { font-size: clamp(66px, calc(2.2vw + 34px), 90px); } #rams-v2 .h-xl { font-size: clamp(118px, calc(3.4vw + 64px), 150px); } #rams-v2 .h-lg { font-size: clamp(90px, calc(2.6vw + 44px), 116px); } #rams-v2 .h-md { font-size: clamp(50px, calc(1.5vw + 26px), 64px); } #rams-v2 .h-sm { font-size: clamp(38px, calc(1vw + 20px), 46px); } #rams-v2 .lead { font-size: clamp(21px, calc(.5vw + 12px), 25px); } #rams-v2 .hdr-logo img { height: 72px; } #rams-v2 .rams-desktop-nav > a, #rams-v2 .sr-trigger { font-size: 18.5px; } #rams-v2 .rams-desktop-nav { gap: clamp(44px, 2.6vw, 60px); } #rams-v2 .rams-cta-desktop { font-size: 16.5px; padding: 12px 28px; } #rams-v2 .rams-header-socials a { width: 38px; height: 38px; } #rams-v2 .hero-grid { gap: clamp(88px, 5.4vw, 140px); } #rams-v2 .hero-cta a.hbtn { font-size: 17.5px; padding: 18px 40px; } #rams-v2 .hero-meta { font-size: 16px; } #rams-v2 .show-cap b { font-size: 20px; } #rams-v2 .show-cap small { font-size: 15.5px; } #rams-v2 .frame-bar { height: 42px; } #rams-v2 .frame-url { font-size: 13px; height: 26px; max-width: 400px; } #rams-v2 .marquee-group li { font-size: clamp(25px, calc(.9vw + 10px), 33px); } #rams-v2 .stat b { font-size: clamp(64px, calc(2vw + 28px), 84px); } #rams-v2 .stat > span { font-size: 16px; } #rams-v2 .work-foot .link-arrow { font-size: 20px; } #rams-v2 .gtile-cap h3 { font-size: 22px; } #rams-v2 .gtile-type { font-size: 16px; } #rams-v2 .gtile a.cbtn { width: 190px; height: 46px; font-size: 14.5px; } #rams-v2 .wt-cap b { font-size: 17px; } #rams-v2 .sq { --sq-max: 84px; } #rams-v2 .sq--sm { --sq-max: 54px; } #rams-v2 .studio-copy > p:not(.eyebrow) { font-size: 21px; } #rams-v2 .studio-art { max-width: 680px; } #rams-v2 .svc-card { padding: 44px 36px; gap: 22px; } #rams-v2 .svc-icon { width: 56px; height: 56px; border-radius: 14px; } #rams-v2 .svc-card h3 { font-size: 26px; } #rams-v2 .svc-card p { font-size: 18.5px; } #rams-v2 .svc-price { font-size: 16px; } #rams-v2 .svc-price b { font-size: 23px; } #rams-v2 .incl span { font-size: 15.5px; } #rams-v2 .incl b, #rams-v2 .incl a { font-size: 16px; } #rams-v2 .tl-steps h3 { font-size: 24px; } #rams-v2 .tl-steps p, #rams-v2 .flow-note { font-size: 16.5px; } #rams-v2 .blog-title { font-size: 21px; } #rams-v2 .blog-body { padding: 28px 30px 30px; } #rams-v2 .blog-cat, #rams-v2 .blog-date { font-size: 13.5px; } #rams-v2 .faq-grid .h2 { font-size: clamp(54px, calc(1.6vw + 26px), 68px); } #rams-v2 .faq summary { font-size: 22px; padding: 28px 0; } #rams-v2 .faq details p { font-size: 18px; } #rams-v2 .closing-h { font-size: clamp(96px, calc(3vw + 44px), 124px); } #rams-v2 .closing-sub { font-size: 21px; } #rams-v2 .closing-note { font-size: 15.5px; } #rams-v2 .foot img { height: 68px; } #rams-v2 .foot p, #rams-v2 .foot li { font-size: 16.5px; } #rams-v2 .foot h4 { font-size: 14px; } #rams-v2 .foot-base { font-size: 14px; } #rams-v2 .pf-h1 { font-size: clamp(82px, calc(2.6vw + 32px), 104px); } #rams-v2 .pf-hero-sub { font-size: 19px; max-width: 540px; } #rams-v2 .pf-fbtn { font-size: 15px; padding: 11px 26px !important; } #rams-v2 .pf-count { font-size: 15px; } #rams-v2 .ab-h1 { font-size: clamp(116px, calc(3vw + 58px), 142px); } #rams-v2 .ab-lead { font-size: 23px; max-width: 700px; } #rams-v2 .ab-stat b { font-size: clamp(52px, calc(1.6vw + 22px), 66px); } #rams-v2 .ab-stat > span { font-size: 15px; } #rams-v2 .about-body p { font-size: 21.5px; } #rams-v2 .facts b { font-size: 20px; } #rams-v2 .facts span { font-size: 16.5px; } #rams-v2 .step h3 { font-size: 25px; } #rams-v2 .step p { font-size: 18px; } #rams-v2 .time-note, #rams-v2 .sign-off > p { font-size: 16.5px; } #rams-v2 .voice q { font-size: 20px; } #rams-v2 .mk-hero .h1 { font-size: clamp(80px, calc(2.6vw + 30px), 100px); } #rams-v2 .robot-stage { width: min(100%, 560px); } #rams-v2 .chips a { font-size: 16px; padding: 10px 20px; } #rams-v2 .checks li { font-size: 18px; } #rams-v2 .irow h3 { font-size: clamp(32px, calc(1vw + 14px), 40px); } #rams-v2 .irow p { font-size: 17px; } #rams-v2 .sheet { font-size: 16px; } #rams-v2 .sheet td.task { font-size: 16px; } #rams-v2 .phase h3 { font-size: 22px; } #rams-v2 .phase ul { font-size: 16px; } #rams-v2 .ptable { font-size: 17px; } #rams-v2 .cfield label, #rams-v2 .outs div { font-size: 16.5px; } #rams-v2 .big-out b { font-size: clamp(76px, calc(2vw + 40px), 96px); } #rams-v2 .rbox .kpi { font-size: 40px; } #rams-v2 .rbox ul, #rams-v2 .recs { font-size: 16px; } } @media (min-width: 2300px) { #rams-v2 { --pad: 160px; } #rams-v2 { font-size: 19px; } #rams-v2 .tl-steps p, #rams-v2 .flow-note, #rams-v2 .foot p, #rams-v2 .foot li { font-size: 17.5px; } #rams-v2 .svc-card p, #rams-v2 .faq details p, #rams-v2 .step p { font-size: 19.5px; } #rams-v2 .blog-title { font-size: 23px; } #rams-v2 .gtile-cap h3 { font-size: 24px; } } /* ---- production (WordPress) additions ---- */ #rams-v2 .portrait.has-photo { border-style: solid; padding: 0; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(85, 85, 204, .35), rgba(5, 7, 10, .55) 70%); } #rams-v2 .portrait-img { width: min(78%, 380px); height: auto; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; margin: auto; } #rams-v2 #work a:hover { box-shadow: none !important; } /* the sketch's blog images take their height from the HTML attribute (405); the UA-restore layer drops attribute hints */ #rams-v2 .blog-img { height: 405px; } @media (max-width: 768px) { #rams-v2 button { min-height: 0; min-width: 0; } }