{"id":367,"date":"2026-05-10T12:39:59","date_gmt":"2026-05-10T12:39:59","guid":{"rendered":"https:\/\/gem-media.com\/?page_id=367"},"modified":"2026-05-10T12:39:59","modified_gmt":"2026-05-10T12:39:59","slug":"home","status":"publish","type":"page","link":"https:\/\/gem-media.com\/","title":{"rendered":"home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nGem Media \u2014 \u0646\u0635\u0646\u0639 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644 \u0627\u0644\u0631\u0642\u0645\u064a<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;600;700;900&family=Syne:wght@700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n GEM MEDIA \u2014 Design System\n \u0627\u062a\u062c\u0627\u0647: luxury tech \/ crystalline geometry\n \u0644\u0648\u0646 \u0623\u0633\u0627\u0633\u064a: \u0623\u0628\u064a\u0636 \u0646\u0627\u0635\u0639 + \u0623\u0633\u0648\u062f \u0639\u0645\u064a\u0642 + \u0643\u0631\u064a\u0633\u062a\u0627\u0644 \u0623\u062e\u0636\u0631 \u0632\u0645\u0631\u062f\u064a\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n:root {\n --gem: #00E5A0;\n --gem2: #00C8E0;\n --gem-dim: rgba(0,229,160,0.08);\n --gem-glow: rgba(0,229,160,0.25);\n --ink: #060810;\n --ink2: #0D1120;\n --ink3: #141829;\n --card: #111526;\n --border: rgba(0,229,160,0.12);\n --border2: rgba(255,255,255,0.06);\n --text: #EEF2FF;\n --text2: #7B82A8;\n --text3: #3D4260;\n --white: #FFFFFF;\n --r: 18px;\n --font-display: 'Syne', sans-serif;\n --font-body: 'Cairo', sans-serif;\n}\n\n*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\nhtml { scroll-behavior: smooth; }\n\nbody {\n font-family: var(--font-body);\n background: var(--ink);\n color: var(--text);\n overflow-x: hidden;\n cursor: none;\n}\n\n\/* \u2500\u2500 CUSTOM CURSOR \u2500\u2500 *\/\n.cursor {\n width: 10px; height: 10px;\n background: var(--gem);\n border-radius: 50%;\n position: fixed;\n pointer-events: none;\n z-index: 9999;\n transform: translate(-50%,-50%);\n transition: width 0.2s, height 0.2s, background 0.2s;\n mix-blend-mode: screen;\n}\n.cursor-ring {\n width: 36px; height: 36px;\n border: 1.5px solid rgba(0,229,160,0.5);\n border-radius: 50%;\n position: fixed;\n pointer-events: none;\n z-index: 9998;\n transform: translate(-50%,-50%);\n transition: transform 0.12s ease, width 0.25s, height 0.25s;\n}\nbody:hover .cursor { width: 10px; height: 10px; }\na:hover ~ .cursor, button:hover ~ .cursor { width: 18px; height: 18px; }\n\n\/* \u2500\u2500 NOISE TEXTURE \u2500\u2500 *\/\nbody::after {\n content:'';\n position:fixed; inset:0;\n background-image:url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'\/%3E%3C\/svg%3E\");\n pointer-events:none; z-index:1; opacity:0.5;\n}\n\n\/* \u2500\u2500 ANIMATED GRID BG \u2500\u2500 *\/\n.grid-bg {\n position:fixed; inset:0; z-index:0;\n background-image:\n linear-gradient(rgba(0,229,160,0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0,229,160,0.04) 1px, transparent 1px);\n background-size: 60px 60px;\n animation: gridShift 20s linear infinite;\n}\n@keyframes gridShift { from{background-position:0 0} to{background-position:60px 60px} }\n\n\/* \u2500\u2500 NAV \u2500\u2500 *\/\nnav {\n position:fixed; top:0; left:0; right:0; z-index:100;\n padding: 18px 48px;\n display:flex; align-items:center; justify-content:space-between;\n background: rgba(6,8,16,0.75);\n backdrop-filter: blur(24px);\n border-bottom: 1px solid var(--border);\n}\n\n.nav-logo {\n display:flex; align-items:center; gap:10px;\n text-decoration:none;\n}\n.nav-logo-gem {\n width: 36px; height: 36px;\n position: relative;\n}\n.nav-logo-gem svg { width:100%; height:100%; }\n.nav-logo-text {\n font-family: var(--font-display);\n font-size: 20px;\n font-weight: 800;\n color: var(--white);\n letter-spacing: 2px;\n text-transform: uppercase;\n}\n.nav-logo-text span { color: var(--gem); }\n\n.nav-links {\n display:flex; gap:36px; list-style:none;\n}\n.nav-links a {\n color: var(--text2);\n text-decoration:none;\n font-size:14px;\n font-weight:600;\n transition: color 0.2s;\n letter-spacing:0.5px;\n}\n.nav-links a:hover { color: var(--gem); }\n\n.nav-cta {\n background: transparent;\n border: 1.5px solid var(--gem);\n color: var(--gem);\n padding: 10px 26px;\n border-radius: 50px;\n font-size: 14px;\n font-weight: 700;\n text-decoration:none;\n font-family:var(--font-body);\n transition: all 0.25s;\n position:relative;\n overflow:hidden;\n}\n.nav-cta::before {\n content:'';\n position:absolute; inset:0;\n background:var(--gem);\n transform:scaleX(0);\n transform-origin:right;\n transition: transform 0.3s ease;\n z-index:-1;\n}\n.nav-cta:hover { color: var(--ink); }\n.nav-cta:hover::before { transform:scaleX(1); transform-origin:left; }\n\n\/* \u2500\u2500 HERO \u2500\u2500 *\/\n.hero {\n min-height: 100vh;\n display:flex; align-items:center; justify-content:center;\n padding: 140px 48px 100px;\n position:relative; z-index:2;\n text-align:center;\n overflow:hidden;\n}\n\n\/* Floating gem shapes *\/\n.gem-shape {\n position:absolute;\n pointer-events:none;\n}\n.gem-shape-1 {\n top:15%; right:8%;\n width:120px; height:120px;\n border:1px solid rgba(0,229,160,0.2);\n transform: rotate(45deg);\n animation: floatGem 6s ease-in-out infinite;\n}\n.gem-shape-2 {\n bottom:20%; left:6%;\n width:80px; height:80px;\n border:1px solid rgba(0,200,224,0.15);\n transform: rotate(30deg);\n animation: floatGem 8s ease-in-out infinite reverse;\n}\n.gem-shape-3 {\n top:30%; left:10%;\n width:40px; height:40px;\n background: rgba(0,229,160,0.05);\n border:1px solid rgba(0,229,160,0.25);\n transform:rotate(45deg);\n animation: floatGem 5s ease-in-out infinite 1s;\n}\n@keyframes floatGem {\n 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(-20px)}\n}\n\n\/* Orb glow *\/\n.hero-orb {\n position:absolute;\n top:50%; left:50%;\n transform:translate(-50%,-50%);\n width:600px; height:600px;\n background: radial-gradient(ellipse, rgba(0,229,160,0.1) 0%, rgba(0,200,224,0.05) 35%, transparent 70%);\n animation: orbPulse 4s ease-in-out infinite;\n pointer-events:none;\n}\n@keyframes orbPulse { 0%,100%{opacity:0.7;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)} }\n\n.hero-eyebrow {\n display:inline-flex; align-items:center; gap:10px;\n font-size:11px; letter-spacing:3px; text-transform:uppercase;\n color:var(--gem); font-weight:700;\n margin-bottom:28px;\n animation: fadeUp 0.7s ease both;\n}\n.hero-eyebrow::before, .hero-eyebrow::after {\n content:'';\n width:30px; height:1px;\n background:var(--gem);\n opacity:0.5;\n}\n\n.hero-headline {\n font-family: var(--font-display);\n font-size: clamp(44px, 8.5vw, 100px);\n font-weight: 800;\n line-height: 0.95;\n letter-spacing: -2px;\n margin-bottom: 28px;\n animation: fadeUp 0.7s 0.1s ease both;\n}\n.hero-headline .w1 { color: var(--white); display:block; }\n.hero-headline .w2 {\n display:block;\n background: linear-gradient(90deg, var(--gem), var(--gem2));\n -webkit-background-clip:text; -webkit-text-fill-color:transparent;\n background-clip:text;\n filter: drop-shadow(0 0 40px rgba(0,229,160,0.3));\n}\n.hero-headline .w3 { color: var(--white); display:block; opacity:0.35; }\n\n.hero-sub {\n font-size: clamp(14px, 2vw, 17px);\n color: var(--text2);\n max-width: 540px;\n margin: 0 auto 48px;\n line-height: 1.8;\n animation: fadeUp 0.7s 0.2s ease both;\n}\n\n.hero-btns {\n display:flex; gap:14px; justify-content:center; flex-wrap:wrap;\n animation: fadeUp 0.7s 0.3s ease both;\n}\n\n.btn-gem {\n background: linear-gradient(135deg, var(--gem), var(--gem2));\n color: var(--ink);\n padding: 15px 36px;\n border-radius: 50px;\n font-size:15px; font-weight:800;\n text-decoration:none; border:none; cursor:none;\n font-family:var(--font-body);\n transition: all 0.25s;\n box-shadow: 0 0 40px rgba(0,229,160,0.3);\n display:inline-flex; align-items:center; gap:8px;\n position:relative; overflow:hidden;\n}\n.btn-gem::after {\n content:'';\n position:absolute; inset:0;\n background:linear-gradient(135deg,rgba(255,255,255,0.2),transparent);\n}\n.btn-gem:hover { transform:translateY(-3px); box-shadow:0 8px 50px rgba(0,229,160,0.4); }\n\n.btn-ghost {\n background:transparent;\n color:var(--text);\n padding:15px 36px;\n border-radius:50px;\n font-size:15px; font-weight:700;\n text-decoration:none;\n border:1.5px solid var(--border2);\n font-family:var(--font-body);\n transition:all 0.25s;\n display:inline-flex; align-items:center; gap:8px;\n cursor:none;\n}\n.btn-ghost:hover { border-color:var(--gem); color:var(--gem); }\n\n\/* HERO METRICS *\/\n.hero-metrics {\n display:flex; justify-content:center; gap:56px;\n margin-top:72px;\n padding-top:40px;\n border-top:1px solid var(--border2);\n animation: fadeUp 0.7s 0.4s ease both;\n flex-wrap:wrap;\n}\n.metric { text-align:center; }\n.metric-val {\n font-family:var(--font-display);\n font-size:38px; font-weight:800;\n background:linear-gradient(135deg,var(--gem),var(--gem2));\n -webkit-background-clip:text; -webkit-text-fill-color:transparent;\n background-clip:text;\n}\n.metric-label { font-size:12px; color:var(--text3); letter-spacing:1px; text-transform:uppercase; margin-top:4px; }\n\n\/* \u2500\u2500 SERVICES \u2500\u2500 *\/\n.services {\n padding:120px 48px;\n max-width:1300px;\n margin:0 auto;\n position:relative; z-index:2;\n}\n\n.section-header {\n text-align:center;\n margin-bottom:72px;\n}\n\n.section-eyebrow {\n font-size:11px; letter-spacing:3px; text-transform:uppercase;\n color:var(--gem); font-weight:700;\n margin-bottom:16px;\n display:block;\n}\n\n.section-title {\n font-family:var(--font-display);\n font-size:clamp(32px, 5vw, 56px);\n font-weight:800;\n line-height:1.1;\n letter-spacing:-1px;\n color:var(--white);\n margin-bottom:16px;\n}\n.section-title span {\n background:linear-gradient(90deg,var(--gem),var(--gem2));\n -webkit-background-clip:text; -webkit-text-fill-color:transparent;\n background-clip:text;\n}\n\n.section-sub {\n font-size:16px; color:var(--text2);\n max-width:500px; margin:0 auto;\n line-height:1.7;\n}\n\n\/* Services bento grid *\/\n.services-grid {\n display:grid;\n grid-template-columns: 1.5fr 1fr 1fr;\n grid-template-rows: auto auto;\n gap:16px;\n}\n\n.service-card {\n background:var(--card);\n border:1px solid var(--border2);\n border-radius:var(--r);\n padding:36px;\n position:relative;\n overflow:hidden;\n transition:border-color 0.3s, transform 0.3s;\n cursor:none;\n}\n.service-card:hover { border-color:var(--gem); transform:translateY(-4px); }\n.service-card:hover .service-glow { opacity:1; }\n\n.service-glow {\n position:absolute;\n top:-60px; right:-60px;\n width:200px; height:200px;\n background:radial-gradient(circle,var(--gem-glow),transparent 70%);\n opacity:0;\n transition:opacity 0.4s;\n pointer-events:none;\n}\n\n\/* Card sizes *\/\n.service-card.large { grid-column:1; grid-row:1\/3; padding:48px; }\n.service-card.medium { grid-column:2; }\n.service-card.medium2 { grid-column:3; }\n.service-card.wide { grid-column:2\/4; }\n\n.service-num {\n font-family:var(--font-display);\n font-size:13px; font-weight:800;\n color:var(--text3); letter-spacing:2px;\n margin-bottom:24px;\n}\n\n.service-icon-wrap {\n width:60px; height:60px;\n border-radius:16px;\n background:var(--gem-dim);\n border:1px solid var(--border);\n display:flex; align-items:center; justify-content:center;\n font-size:26px;\n margin-bottom:24px;\n transition:background 0.3s, transform 0.3s;\n}\n.service-card:hover .service-icon-wrap {\n background:rgba(0,229,160,0.15);\n transform:scale(1.1);\n}\n\n.service-name {\n font-family:var(--font-display);\n font-size:22px; font-weight:800;\n color:var(--white);\n margin-bottom:12px;\n letter-spacing:-0.5px;\n}\n.service-card.large .service-name { font-size:30px; }\n\n.service-desc {\n font-size:14px; color:var(--text2);\n line-height:1.7; margin-bottom:28px;\n}\n\n.service-tags {\n display:flex; gap:8px; flex-wrap:wrap;\n}\n.service-tag {\n background:var(--gem-dim);\n border:1px solid var(--border);\n color:var(--gem);\n font-size:11px; font-weight:600;\n padding:4px 12px; border-radius:50px;\n letter-spacing:0.5px;\n}\n\n.service-arrow {\n position:absolute; bottom:28px; left:28px;\n width:36px; height:36px;\n border:1.5px solid var(--border2);\n border-radius:50%;\n display:flex; align-items:center; justify-content:center;\n color:var(--text3);\n transition:all 0.3s;\n}\n.service-card:hover .service-arrow {\n border-color:var(--gem); color:var(--gem);\n background:var(--gem-dim);\n transform:rotate(-45deg);\n}\n\n\/* \u2500\u2500 PROCESS \u2500\u2500 *\/\n.process {\n padding:120px 48px;\n background:var(--ink2);\n border-top:1px solid var(--border2);\n border-bottom:1px solid var(--border2);\n position:relative; z-index:2;\n}\n\n.process-inner { max-width:1100px; margin:0 auto; }\n\n.process-steps {\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:0;\n margin-top:72px;\n position:relative;\n}\n\n.process-steps::before {\n content:'';\n position:absolute;\n top:30px; right:12.5%; left:12.5%;\n height:1px;\n background:linear-gradient(90deg,transparent,var(--gem),var(--gem2),transparent);\n}\n\n.process-step {\n padding:0 24px;\n text-align:center;\n position:relative;\n}\n\n.process-dot {\n width:60px; height:60px;\n border-radius:50%;\n background:var(--card);\n border:2px solid var(--border);\n display:flex; align-items:center; justify-content:center;\n margin:0 auto 24px;\n font-size:22px;\n position:relative; z-index:1;\n transition:all 0.3s;\n}\n.process-step:hover .process-dot {\n border-color:var(--gem);\n background:var(--gem-dim);\n transform:scale(1.1);\n}\n\n.process-step-num {\n font-family:var(--font-display);\n font-size:11px; font-weight:800;\n color:var(--gem); letter-spacing:2px;\n margin-bottom:8px;\n}\n\n.process-step-title {\n font-size:16px; font-weight:700;\n color:var(--white); margin-bottom:8px;\n}\n\n.process-step-desc { font-size:13px; color:var(--text2); line-height:1.6; }\n\n\/* \u2500\u2500 WHY US \u2500\u2500 *\/\n.why {\n padding:120px 48px;\n max-width:1100px;\n margin:0 auto;\n position:relative; z-index:2;\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:80px;\n align-items:center;\n}\n\n.why-visual {\n position:relative;\n}\n\n.why-card-main {\n background:var(--card);\n border:1px solid var(--border);\n border-radius:24px;\n padding:40px;\n position:relative;\n overflow:hidden;\n}\n\n.why-card-main::before {\n content:'';\n position:absolute; bottom:-40px; right:-40px;\n width:250px; height:250px;\n background:radial-gradient(circle,rgba(0,229,160,0.12),transparent 65%);\n}\n\n.why-gem-grid {\n display:grid; grid-template-columns:1fr 1fr; gap:12px;\n margin-bottom:24px;\n}\n\n.why-gem-item {\n background:var(--ink3);\n border:1px solid var(--border2);\n border-radius:12px;\n padding:16px;\n text-align:center;\n}\n.why-gem-val {\n font-family:var(--font-display);\n font-size:28px; font-weight:800;\n background:linear-gradient(135deg,var(--gem),var(--gem2));\n -webkit-background-clip:text; -webkit-text-fill-color:transparent;\n background-clip:text;\n}\n.why-gem-lbl { font-size:11px; color:var(--text3); margin-top:2px; }\n\n.why-floating {\n position:absolute;\n top:-20px; left:-20px;\n background:var(--ink2);\n border:1px solid var(--border);\n border-radius:14px;\n padding:14px 18px;\n display:flex; align-items:center; gap:10px;\n font-size:13px; font-weight:600;\n}\n.why-floating-dot {\n width:8px; height:8px; border-radius:50%;\n background:var(--gem);\n animation:pulse 2s infinite;\n}\n\n@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }\n\n.why-content { }\n\n.why-points { list-style:none; margin-top:32px; display:flex; flex-direction:column; gap:20px; }\n.why-point {\n display:flex; align-items:flex-start; gap:16px;\n}\n.why-point-icon {\n width:40px; height:40px;\n background:var(--gem-dim);\n border:1px solid var(--border);\n border-radius:10px;\n display:flex; align-items:center; justify-content:center;\n font-size:18px;\n flex-shrink:0; margin-top:2px;\n}\n.why-point-title { font-size:15px; font-weight:700; color:var(--white); margin-bottom:4px; }\n.why-point-desc { font-size:13px; color:var(--text2); line-height:1.6; }\n\n\/* \u2500\u2500 CONTACT \u2500\u2500 *\/\n.contact {\n padding:120px 48px;\n background:var(--ink2);\n border-top:1px solid var(--border2);\n position:relative; z-index:2;\n}\n\n.contact-inner {\n max-width:700px;\n margin:0 auto;\n text-align:center;\n}\n\n.contact-card {\n background:var(--card);\n border:1px solid var(--border);\n border-radius:24px;\n padding:48px 40px;\n margin-top:48px;\n text-align:right;\n position:relative;\n overflow:hidden;\n}\n.contact-card::before {\n content:'';\n position:absolute; top:-80px; right:-80px;\n width:300px; height:300px;\n background:radial-gradient(circle,rgba(0,229,160,0.08),transparent 65%);\n}\n\n.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }\n.form-group { display:flex; flex-direction:column; gap:8px; }\n.form-group.full { grid-column:1\/-1; }\n.form-label { font-size:12px; font-weight:700; color:var(--text2); letter-spacing:0.5px; text-transform:uppercase; }\n\n.form-input, .form-select, .form-textarea {\n background:var(--ink3);\n border:1px solid var(--border2);\n border-radius:12px;\n padding:13px 16px;\n color:var(--text);\n font-family:var(--font-body);\n font-size:14px;\n outline:none;\n transition:border-color 0.2s, box-shadow 0.2s;\n width:100%;\n}\n.form-input:focus, .form-select:focus, .form-textarea:focus {\n border-color:var(--gem);\n box-shadow:0 0 0 3px rgba(0,229,160,0.1);\n}\n.form-input::placeholder { color:var(--text3); }\n.form-select option { background:var(--ink3); }\n.form-textarea { resize:vertical; min-height:100px; }\n\n.btn-submit-gem {\n width:100%;\n padding:16px;\n background:linear-gradient(135deg,var(--gem),var(--gem2));\n color:var(--ink);\n border:none;\n border-radius:12px;\n font-family:var(--font-body);\n font-size:16px; font-weight:800;\n cursor:none;\n transition:all 0.25s;\n box-shadow:0 0 40px rgba(0,229,160,0.2);\n display:flex; align-items:center; justify-content:center; gap:8px;\n margin-top:8px;\n letter-spacing:0.5px;\n}\n.btn-submit-gem:hover { transform:translateY(-2px); box-shadow:0 8px 50px rgba(0,229,160,0.35); }\n\n\/* \u2500\u2500 FOOTER \u2500\u2500 *\/\nfooter {\n background:var(--ink);\n border-top:1px solid var(--border2);\n padding:60px 48px 32px;\n position:relative; z-index:2;\n}\n\n.footer-inner {\n max-width:1100px; margin:0 auto;\n display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;\n margin-bottom:48px;\n}\n\n.footer-brand-name {\n font-family:var(--font-display);\n font-size:22px; font-weight:800;\n color:var(--white); letter-spacing:2px;\n text-transform:uppercase; margin-bottom:12px;\n}\n.footer-brand-name span { color:var(--gem); }\n.footer-brand-desc { font-size:13px; color:var(--text3); line-height:1.7; }\n\n.footer-col-title { font-size:12px; font-weight:700; color:var(--text2); letter-spacing:2px; text-transform:uppercase; margin-bottom:16px; }\n.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }\n.footer-links a { font-size:14px; color:var(--text3); text-decoration:none; transition:color 0.2s; }\n.footer-links a:hover { color:var(--gem); }\n\n.footer-bottom {\n border-top:1px solid var(--border2);\n padding-top:24px;\n display:flex; justify-content:space-between; align-items:center;\n font-size:12px; color:var(--text3);\n}\n\n.footer-gem-badge {\n display:flex; align-items:center; gap:6px;\n font-weight:600; color:var(--gem);\n}\n\n\/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\n@keyframes fadeUp {\n from{opacity:0;transform:translateY(30px)}\n to{opacity:1;transform:translateY(0)}\n}\n\n.reveal {\n opacity:0; transform:translateY(40px);\n transition:opacity 0.7s ease, transform 0.7s ease;\n}\n.reveal.visible { opacity:1; transform:translateY(0); }\n.reveal-delay-1 { transition-delay:0.1s; }\n.reveal-delay-2 { transition-delay:0.2s; }\n.reveal-delay-3 { transition-delay:0.3s; }\n.reveal-delay-4 { transition-delay:0.4s; }\n\n\/* \u2500\u2500 MOBILE \u2500\u2500 *\/\n@media(max-width:768px){\n nav { padding:14px 20px; }\n .nav-links { display:none; }\n\n .hero { padding:110px 20px 80px; }\n .hero-metrics { gap:28px; }\n .metric-val { font-size:28px; }\n\n .services { padding:80px 20px; }\n .services-grid { grid-template-columns:1fr; }\n .service-card.large, .service-card.medium, .service-card.medium2, .service-card.wide {\n grid-column:1; grid-row:auto;\n }\n\n .process { padding:80px 20px; }\n .process-steps { grid-template-columns:1fr 1fr; gap:32px; }\n .process-steps::before { display:none; }\n\n .why { grid-template-columns:1fr; gap:40px; padding:80px 20px; }\n .why-visual { order:-1; }\n\n .contact { padding:80px 20px; }\n .contact-card { padding:28px 20px; }\n .form-row { grid-template-columns:1fr; }\n\n footer { padding:40px 20px 24px; }\n .footer-inner { grid-template-columns:1fr 1fr; gap:32px; }\n .footer-bottom { flex-direction:column; gap:12px; text-align:center; }\n\n .gem-shape { display:none; }\n body { cursor:auto; }\n .cursor, .cursor-ring { display:none; }\n}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"grid-bg\"><\/div>\n<div class=\"cursor\" id=\"cursor\"><\/div>\n<div class=\"cursor-ring\" id=\"cursor-ring\"><\/div>\n\n<!-- \u2550\u2550 NAV \u2550\u2550 -->\n<nav>\n <a href=\"#\" class=\"nav-logo\">\n <div class=\"nav-logo-gem\">\n <svg viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <polygon points=\"20,2 38,14 38,26 20,38 2,26 2,14\" stroke=\"#00E5A0\" stroke-width=\"1.5\" fill=\"rgba(0,229,160,0.05)\"\/>\n <polygon points=\"20,8 32,16 32,24 20,32 8,24 8,16\" stroke=\"#00C8E0\" stroke-width=\"1\" fill=\"rgba(0,200,224,0.05)\"\/>\n <circle cx=\"20\" cy=\"20\" r=\"4\" fill=\"#00E5A0\" opacity=\"0.8\"\/>\n <\/svg>\n <\/div>\n <span class=\"nav-logo-text\">GEM<span> MEDIA<\/span><\/span>\n <\/a>\n\n <ul class=\"nav-links\">\n <li><a href=\"#services\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/a><\/li>\n <li><a href=\"#process\">\u0643\u064a\u0641 \u0646\u0639\u0645\u0644<\/a><\/li>\n <li><a href=\"#why\">\u0644\u0645\u0627\u0630\u0627 \u0646\u062d\u0646<\/a><\/li>\n <li><a href=\"#contact\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/a><\/li>\n <\/ul>\n\n <a href=\"#contact\" class=\"nav-cta\">\u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643<\/a>\n<\/nav>\n\n<!-- \u2550\u2550 HERO \u2550\u2550 -->\n<section class=\"hero\">\n <div class=\"hero-orb\"><\/div>\n <div class=\"gem-shape gem-shape-1\"><\/div>\n <div class=\"gem-shape gem-shape-2\"><\/div>\n <div class=\"gem-shape gem-shape-3\"><\/div>\n\n <div style=\"position:relative;z-index:2;\">\n <div class=\"hero-eyebrow\">\u0648\u0643\u0627\u0644\u0629 \u0631\u0642\u0645\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629<\/div>\n\n <h1 class=\"hero-headline\">\n <span class=\"w1\">\u0646\u0635\u0646\u0639<\/span>\n <span class=\"w2\">\u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644<\/span>\n <span class=\"w3\">\u0627\u0644\u0631\u0642\u0645\u064a<\/span>\n <\/h1>\n\n <p class=\"hero-sub\">\n \u0645\u0646 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0625\u0644\u0649 \u0627\u0644\u0645\u062a\u0627\u062c\u0631\u060c \u0627\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u0627\u0644\u0623\u0644\u0639\u0627\u0628 \u2014 \u0646\u0628\u0646\u064a \u062a\u062c\u0627\u0631\u0628 \u0631\u0642\u0645\u064a\u0629 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629 \u062a\u0636\u0639 \u0639\u0644\u0627\u0645\u062a\u0643 \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0645\u0629.\n <\/p>\n\n <div class=\"hero-btns\">\n <a href=\"#services\" class=\"btn-gem\">\n \u0627\u0643\u062a\u0634\u0641 \u062e\u062f\u0645\u0627\u062a\u0646\u0627\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/a>\n <a href=\"#contact\" class=\"btn-ghost\">\n \u062a\u062d\u062f\u062b \u0645\u0639\u0646\u0627\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>\n <\/a>\n <\/div>\n\n <div class=\"hero-metrics\">\n <div class=\"metric\"><div class=\"metric-val\">200+<\/div><div class=\"metric-label\">\u0645\u0634\u0631\u0648\u0639 \u0645\u0646\u062c\u0632<\/div><\/div>\n <div class=\"metric\"><div class=\"metric-val\">98%<\/div><div class=\"metric-label\">\u0631\u0636\u0627 \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/div><\/div>\n <div class=\"metric\"><div class=\"metric-val\">5+<\/div><div class=\"metric-label\">\u0633\u0646\u0648\u0627\u062a \u062e\u0628\u0631\u0629<\/div><\/div>\n <div class=\"metric\"><div class=\"metric-val\">24\/7<\/div><div class=\"metric-label\">\u062f\u0639\u0645 \u0645\u0633\u062a\u0645\u0631<\/div><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550 SERVICES \u2550\u2550 -->\n<section class=\"services\" id=\"services\">\n <div class=\"section-header reveal\">\n <span class=\"section-eyebrow\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/span>\n <h2 class=\"section-title\">\u0643\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c\u0647<br><span>\u062a\u062d\u062a \u0633\u0642\u0641 \u0648\u0627\u062d\u062f<\/span><\/h2>\n <p class=\"section-sub\">\u0646\u0642\u062f\u0645 \u062d\u0644\u0648\u0644\u0627\u064b \u0631\u0642\u0645\u064a\u0629 \u0634\u0627\u0645\u0644\u0629 \u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u0627\u064b \u0644\u062a\u062d\u0642\u064a\u0642 \u0623\u0647\u062f\u0627\u0641\u0643<\/p>\n <\/div>\n\n <div class=\"services-grid\">\n\n <!-- Large card: Website Design -->\n <div class=\"service-card large reveal\">\n <div class=\"service-glow\"><\/div>\n <div class=\"service-num\">01<\/div>\n <div class=\"service-icon-wrap\">\ud83c\udf10<\/div>\n <div class=\"service-name\">\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639<\/div>\n <div class=\"service-desc\">\n \u0646\u0635\u0646\u0639 \u0645\u0648\u0627\u0642\u0639 \u0648\u064a\u0628 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629 \u062a\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u062c\u0645\u0627\u0644\u064a\u0627\u062a \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629 \u0648\u0627\u0644\u0623\u062f\u0627\u0621 \u0627\u0644\u0639\u0627\u0644\u064a. \u0643\u0644 \u0645\u0648\u0642\u0639 \u064a\u064f\u0635\u0645\u0645 \u0645\u0646 \u0627\u0644\u0635\u0641\u0631 \u0644\u064a\u0639\u0643\u0633 \u0647\u0648\u064a\u0629 \u0639\u0644\u0627\u0645\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0648\u064a\u062d\u0648\u0644 \u0627\u0644\u0632\u0648\u0627\u0631 \u0625\u0644\u0649 \u0639\u0645\u0644\u0627\u0621.\n <\/div>\n <div class=\"service-tags\">\n <span class=\"service-tag\">UI\/UX<\/span>\n <span class=\"service-tag\">Responsive<\/span>\n <span class=\"service-tag\">SEO<\/span>\n <span class=\"service-tag\">WordPress<\/span>\n <span class=\"service-tag\">React<\/span>\n <\/div>\n <div class=\"service-arrow\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n\n <!-- E-commerce -->\n <div class=\"service-card medium reveal reveal-delay-1\">\n <div class=\"service-glow\"><\/div>\n <div class=\"service-num\">02<\/div>\n <div class=\"service-icon-wrap\">\ud83d\uded2<\/div>\n <div class=\"service-name\">\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/div>\n <div class=\"service-desc\">\u0645\u062a\u0627\u062c\u0631 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0628\u062a\u062c\u0631\u0628\u0629 \u062a\u0633\u0648\u0642 \u0633\u0644\u0633\u0629 \u0648\u0645\u062d\u0631\u0643 \u0645\u0628\u064a\u0639\u0627\u062a \u0642\u0648\u064a.<\/div>\n <div class=\"service-tags\">\n <span class=\"service-tag\">Shopify<\/span>\n <span class=\"service-tag\">WooCommerce<\/span>\n <\/div>\n <div class=\"service-arrow\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n\n <!-- Apps -->\n <div class=\"service-card medium2 reveal reveal-delay-2\">\n <div class=\"service-glow\"><\/div>\n <div class=\"service-num\">03<\/div>\n <div class=\"service-icon-wrap\">\ud83d\udcf1<\/div>\n <div class=\"service-name\">\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u062c\u0648\u0627\u0644<\/div>\n <div class=\"service-desc\">\u062a\u0637\u0628\u064a\u0642\u0627\u062a iOS \u0648Android \u0628\u0623\u062f\u0627\u0621 \u0646\u064a\u062a\u064a\u0641 \u0648\u062a\u062c\u0631\u0628\u0629 \u0645\u0633\u062a\u062e\u062f\u0645 \u0641\u0627\u0626\u0642\u0629.<\/div>\n <div class=\"service-tags\">\n <span class=\"service-tag\">iOS<\/span>\n <span class=\"service-tag\">Android<\/span>\n <\/div>\n <div class=\"service-arrow\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n\n <!-- Games + CRM side by side -->\n <div class=\"service-card medium reveal reveal-delay-1\">\n <div class=\"service-glow\"><\/div>\n <div class=\"service-num\">04<\/div>\n <div class=\"service-icon-wrap\">\ud83c\udfae<\/div>\n <div class=\"service-name\">\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0623\u0644\u0639\u0627\u0628<\/div>\n <div class=\"service-desc\">\u0623\u0644\u0639\u0627\u0628 \u0648\u064a\u0628 \u0648\u0645\u0648\u0628\u0627\u064a\u0644 \u0628\u0645\u062d\u0631\u0643\u0627\u062a \u0645\u062a\u0637\u0648\u0631\u0629 \u0648\u062a\u062c\u0631\u0628\u0629 \u0644\u0639\u0628 \u0644\u0627 \u062a\u064f\u0646\u0633\u0649.<\/div>\n <div class=\"service-tags\">\n <span class=\"service-tag\">Unity<\/span>\n <span class=\"service-tag\">WebGL<\/span>\n <\/div>\n <div class=\"service-arrow\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"service-card medium2 reveal reveal-delay-2\">\n <div class=\"service-glow\"><\/div>\n <div class=\"service-num\">05<\/div>\n <div class=\"service-icon-wrap\">\u2699\ufe0f<\/div>\n <div class=\"service-name\">\u0628\u0631\u0627\u0645\u062c CRM<\/div>\n <div class=\"service-desc\">\u0623\u0646\u0638\u0645\u0629 \u0625\u062f\u0627\u0631\u0629 \u0639\u0644\u0627\u0642\u0627\u062a \u0639\u0645\u0644\u0627\u0621 \u0645\u062e\u0635\u0635\u0629 \u0644\u062a\u0646\u0638\u064a\u0645 \u0623\u0639\u0645\u0627\u0644\u0643 \u0648\u062a\u0636\u062e\u064a\u0645 \u0623\u0631\u0628\u0627\u062d\u0643.<\/div>\n <div class=\"service-tags\">\n <span class=\"service-tag\">Custom<\/span>\n <span class=\"service-tag\">Dashboard<\/span>\n <\/div>\n <div class=\"service-arrow\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550 PROCESS \u2550\u2550 -->\n<section class=\"process\" id=\"process\">\n <div class=\"process-inner\">\n <div class=\"section-header reveal\">\n <span class=\"section-eyebrow\">\u0637\u0631\u064a\u0642\u0629 \u0639\u0645\u0644\u0646\u0627<\/span>\n <h2 class=\"section-title\">\u0645\u0646 \u0627\u0644\u0641\u0643\u0631\u0629 \u0625\u0644\u0649<br><span>\u0627\u0644\u0625\u0637\u0644\u0627\u0642<\/span><\/h2>\n <p class=\"section-sub\">\u0639\u0645\u0644\u064a\u0629 \u0645\u062d\u0643\u0645\u0629 \u062a\u0636\u0645\u0646 \u062a\u0633\u0644\u064a\u0645 \u0645\u0634\u0631\u0648\u0639\u0643 \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u0645\u062d\u062f\u062f \u0628\u062c\u0648\u062f\u0629 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629<\/p>\n <\/div>\n\n <div class=\"process-steps\">\n <div class=\"process-step reveal\">\n <div class=\"process-dot\">\ud83d\udca1<\/div>\n <div class=\"process-step-num\">01<\/div>\n <div class=\"process-step-title\">\u0627\u0644\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0648\u0627\u0644\u062a\u062e\u0637\u064a\u0637<\/div>\n <div class=\"process-step-desc\">\u0646\u0641\u0647\u0645 \u0623\u0647\u062f\u0627\u0641\u0643 \u0648\u0646\u0636\u0639 \u062e\u0627\u0631\u0637\u0629 \u0637\u0631\u064a\u0642 \u0648\u0627\u0636\u062d\u0629 \u0644\u0645\u0634\u0631\u0648\u0639\u0643<\/div>\n <\/div>\n <div class=\"process-step reveal reveal-delay-1\">\n <div class=\"process-dot\">\ud83c\udfa8<\/div>\n <div class=\"process-step-num\">02<\/div>\n <div class=\"process-step-title\">\u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0625\u0628\u062f\u0627\u0639\u064a<\/div>\n <div class=\"process-step-desc\">\u0646\u0635\u0645\u0645 \u0648\u0627\u062c\u0647\u0627\u062a \u0628\u0635\u0631\u064a\u0629 \u0645\u0630\u0647\u0644\u0629 \u062a\u0639\u0643\u0633 \u0647\u0648\u064a\u0629 \u0639\u0644\u0627\u0645\u062a\u0643<\/div>\n <\/div>\n <div class=\"process-step reveal reveal-delay-2\">\n <div class=\"process-dot\">\u26a1<\/div>\n <div class=\"process-step-num\">03<\/div>\n <div class=\"process-step-title\">\u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0648\u0627\u0644\u0628\u0631\u0645\u062c\u0629<\/div>\n <div class=\"process-step-desc\">\u0646\u0628\u0646\u064a \u0645\u0634\u0631\u0648\u0639\u0643 \u0628\u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0648\u0623\u0639\u0644\u0649 \u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u0623\u062f\u0627\u0621<\/div>\n <\/div>\n <div class=\"process-step reveal reveal-delay-3\">\n <div class=\"process-dot\">\ud83d\ude80<\/div>\n <div class=\"process-step-num\">04<\/div>\n <div class=\"process-step-title\">\u0627\u0644\u0625\u0637\u0644\u0627\u0642 \u0648\u0627\u0644\u062f\u0639\u0645<\/div>\n <div class=\"process-step-desc\">\u0646\u0637\u0644\u0642 \u0645\u0634\u0631\u0648\u0639\u0643 \u0648\u0646\u062a\u0627\u0628\u0639\u0647 \u0628\u062f\u0639\u0645 \u0645\u0633\u062a\u0645\u0631 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550 WHY US \u2550\u2550 -->\n<section id=\"why\" style=\"padding:0;\">\n <div class=\"why\">\n <div class=\"why-visual reveal\">\n <div class=\"why-card-main\">\n <div class=\"why-gem-grid\">\n <div class=\"why-gem-item\">\n <div class=\"why-gem-val\">200+<\/div>\n <div class=\"why-gem-lbl\">\u0645\u0634\u0631\u0648\u0639<\/div>\n <\/div>\n <div class=\"why-gem-item\">\n <div class=\"why-gem-val\">98%<\/div>\n <div class=\"why-gem-lbl\">\u0631\u0636\u0627<\/div>\n <\/div>\n <div class=\"why-gem-item\">\n <div class=\"why-gem-val\">5\u2605<\/div>\n <div class=\"why-gem-lbl\">\u062a\u0642\u064a\u064a\u0645<\/div>\n <\/div>\n <div class=\"why-gem-item\">\n <div class=\"why-gem-val\">24h<\/div>\n <div class=\"why-gem-lbl\">\u0627\u0633\u062a\u062c\u0627\u0628\u0629<\/div>\n <\/div>\n <\/div>\n <div style=\"text-align:center;padding:20px 0;\">\n <div style=\"font-size:40px;margin-bottom:8px;\">\ud83d\udc8e<\/div>\n <div style=\"font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--white);\">GEM MEDIA<\/div>\n <div style=\"font-size:12px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-top:4px;\">\u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0631\u0642\u0645\u064a \u0627\u0644\u0645\u0648\u062b\u0648\u0642<\/div>\n <\/div>\n <\/div>\n <div class=\"why-floating\">\n <div class=\"why-floating-dot\"><\/div>\n <span style=\"font-size:13px;font-weight:600;\">\u0645\u062a\u0627\u062d\u0648\u0646 \u0627\u0644\u0622\u0646 \u0644\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062c\u062f\u064a\u062f\u0629<\/span>\n <\/div>\n <\/div>\n\n <div class=\"why-content reveal reveal-delay-1\">\n <span class=\"section-eyebrow\">\u0644\u0645\u0627\u0630\u0627 \u0646\u062d\u0646<\/span>\n <h2 class=\"section-title\">\u0627\u0644\u0641\u0631\u0642 \u0627\u0644\u0630\u064a<br><span>\u062a\u0634\u0639\u0631 \u0628\u0647<\/span><\/h2>\n <p class=\"section-sub\" style=\"margin:0;\">\u0644\u0633\u0646\u0627 \u0645\u062c\u0631\u062f \u0634\u0631\u0643\u0629 \u0628\u0631\u0645\u062c\u0629 \u2014 \u0646\u062d\u0646 \u0634\u0631\u064a\u0643\u0643 \u0627\u0644\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a \u0641\u064a \u0627\u0644\u0646\u0645\u0648 \u0627\u0644\u0631\u0642\u0645\u064a.<\/p>\n\n <ul class=\"why-points\">\n <li class=\"why-point\">\n <div class=\"why-point-icon\">\u26a1<\/div>\n <div>\n <div class=\"why-point-title\">\u062a\u0633\u0644\u064a\u0645 \u0641\u064a \u0627\u0644\u0645\u0648\u0639\u062f \u062f\u0627\u0626\u0645\u0627\u064b<\/div>\n <div class=\"why-point-desc\">\u0646\u0644\u062a\u0632\u0645 \u0628\u0627\u0644\u0645\u0648\u0627\u0639\u064a\u062f \u0648\u0644\u0627 \u0646\u062a\u0623\u062e\u0631 \u2014 \u0645\u0634\u0631\u0648\u0639\u0643 \u064a\u064f\u0633\u0644\u064e\u0651\u0645 \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u0645\u062d\u062f\u062f \u0623\u0648 \u0642\u0628\u0644\u0647.<\/div>\n <\/div>\n <\/li>\n <li class=\"why-point\">\n <div class=\"why-point-icon\">\ud83c\udfaf<\/div>\n <div>\n <div class=\"why-point-title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u062c\u0647 \u0644\u0644\u0646\u062a\u0627\u0626\u062c<\/div>\n <div class=\"why-point-desc\">\u0643\u0644 \u0642\u0631\u0627\u0631 \u062a\u0635\u0645\u064a\u0645\u064a \u0645\u0628\u0646\u064a \u0639\u0644\u0649 \u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0623\u0647\u062f\u0627\u0641 \u062a\u062c\u0627\u0631\u064a\u0629 \u0648\u0627\u0636\u062d\u0629.<\/div>\n <\/div>\n <\/li>\n <li class=\"why-point\">\n <div class=\"why-point-icon\">\ud83d\udd12<\/div>\n <div>\n <div class=\"why-point-title\">\u0634\u0641\u0627\u0641\u064a\u0629 \u0643\u0627\u0645\u0644\u0629<\/div>\n <div class=\"why-point-desc\">\u062a\u062a\u0627\u0628\u0639 \u0645\u0634\u0631\u0648\u0639\u0643 \u0644\u062d\u0638\u0629 \u0628\u0644\u062d\u0638\u0629 \u0645\u0639 \u062a\u0642\u0627\u0631\u064a\u0631 \u0623\u0633\u0628\u0648\u0639\u064a\u0629 \u0648\u0627\u0636\u062d\u0629.<\/div>\n <\/div>\n <\/li>\n <li class=\"why-point\">\n <div class=\"why-point-icon\">\ud83c\udf31<\/div>\n <div>\n <div class=\"why-point-title\">\u062f\u0639\u0645 \u0645\u0627 \u0628\u0639\u062f \u0627\u0644\u062a\u0633\u0644\u064a\u0645<\/div>\n <div class=\"why-point-desc\">\u0639\u0644\u0627\u0642\u062a\u0646\u0627 \u0644\u0627 \u062a\u0646\u062a\u0647\u064a \u0628\u0627\u0644\u062a\u0633\u0644\u064a\u0645 \u2014 \u0646\u0648\u0627\u0635\u0644 \u062f\u0639\u0645\u0643 \u0648\u062a\u0637\u0648\u064a\u0631 \u0645\u0634\u0631\u0648\u0639\u0643.<\/div>\n <\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550 CONTACT \u2550\u2550 -->\n<section class=\"contact\" id=\"contact\">\n <div class=\"contact-inner\">\n <div class=\"reveal\">\n <span class=\"section-eyebrow\">\u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643<\/span>\n <h2 class=\"section-title\">\u0644\u0646\u0628\u0646\u064a \u0634\u064a\u0626\u0627\u064b<br><span>\u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0627\u064b<\/span><\/h2>\n <p class=\"section-sub\" style=\"margin:0 auto;\">\u0623\u062e\u0628\u0631\u0646\u0627 \u0639\u0646 \u0645\u0634\u0631\u0648\u0639\u0643 \u0648\u0633\u064a\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643 \u0641\u0631\u064a\u0642\u0646\u0627 \u062e\u0644\u0627\u0644 24 \u0633\u0627\u0639\u0629 \u0628\u0639\u0631\u0636 \u0645\u062e\u0635\u0635.<\/p>\n <\/div>\n\n <div class=\"contact-card reveal\">\n <form id=\"contact-form\" onsubmit=\"submitContact(event)\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label class=\"form-label\">\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644<\/label>\n <input class=\"form-input\" type=\"text\" placeholder=\"\u0627\u0633\u0645\u0643\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/label>\n <input class=\"form-input\" type=\"email\" placeholder=\"email@example.com\" required>\n <\/div>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label class=\"form-label\">\u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641<\/label>\n <input class=\"form-input\" type=\"tel\" placeholder=\"+972 5XX XXX XXX\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">\u0646\u0648\u0639 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/label>\n <select class=\"form-select\">\n <option value=\"\">\u0627\u062e\u062a\u0631 \u0627\u0644\u062e\u062f\u0645\u0629...<\/option>\n <option>\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0648\u064a\u0628<\/option>\n <option>\u0645\u062a\u062c\u0631 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/option>\n <option>\u062a\u0637\u0628\u064a\u0642 \u062c\u0648\u0627\u0644<\/option>\n <option>\u062a\u0635\u0645\u064a\u0645 \u0644\u0639\u0628\u0629<\/option>\n <option>\u0646\u0638\u0627\u0645 CRM<\/option>\n <option>\u0645\u0634\u0631\u0648\u0639 \u0645\u062a\u0643\u0627\u0645\u0644<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"form-group full\" style=\"margin-bottom:20px;\">\n <label class=\"form-label\">\u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/label>\n <textarea class=\"form-textarea\" placeholder=\"\u0623\u062e\u0628\u0631\u0646\u0627 \u0639\u0646 \u0641\u0643\u0631\u062a\u0643\u060c \u0645\u064a\u0632\u0627\u0646\u064a\u062a\u0643\u060c \u0648\u0627\u0644\u0645\u0648\u0639\u062f \u0627\u0644\u0645\u0637\u0644\u0648\u0628...\" required><\/textarea>\n <\/div>\n\n <button type=\"submit\" class=\"btn-submit-gem\">\n <span>\u0623\u0631\u0633\u0644 \u0637\u0644\u0628\u0643 \u0627\u0644\u0622\u0646<\/span>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/button>\n <\/form>\n\n <div id=\"contact-success\" style=\"display:none;text-align:center;padding:40px 20px;\">\n <div style=\"font-size:56px;margin-bottom:16px;\">\u2728<\/div>\n <div style=\"font-family:var(--font-display);font-size:24px;font-weight:800;color:var(--gem);margin-bottom:8px;\">\u062a\u0645 \u0627\u0644\u0625\u0631\u0633\u0627\u0644!<\/div>\n <div style=\"font-size:15px;color:var(--text2);\">\u0633\u064a\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643 \u0641\u0631\u064a\u0642 Gem Media \u062e\u0644\u0627\u0644 24 \u0633\u0627\u0639\u0629. \u0634\u0643\u0631\u0627\u064b \u0644\u0627\u062e\u062a\u064a\u0627\u0631\u0643 \u0627\u0644\u0623\u0641\u0636\u0644.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550 FOOTER \u2550\u2550 -->\n<footer>\n <div class=\"footer-inner\">\n <div>\n <div class=\"footer-brand-name\">GEM<span> MEDIA<\/span><\/div>\n <div class=\"footer-brand-desc\">\u0648\u0643\u0627\u0644\u0629 \u0631\u0642\u0645\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 \u0641\u064a \u0628\u0646\u0627\u0621 \u062a\u062c\u0627\u0631\u0628 \u0631\u0642\u0645\u064a\u0629 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629. \u0646\u062d\u0648\u0644 \u0623\u0641\u0643\u0627\u0631\u0643 \u0625\u0644\u0649 \u0648\u0627\u0642\u0639 \u0631\u0642\u0645\u064a \u0645\u0630\u0647\u0644.<\/div>\n <\/div>\n <div>\n <div class=\"footer-col-title\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#\">\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639<\/a><\/li>\n <li><a href=\"#\">\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/a><\/li>\n <li><a href=\"#\">\u0627\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a<\/a><\/li>\n <li><a href=\"#\">\u0627\u0644\u0623\u0644\u0639\u0627\u0628<\/a><\/li>\n <li><a href=\"#\">CRM<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer-col-title\">\u0627\u0644\u0634\u0631\u0643\u0629<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#\">\u0645\u0646 \u0646\u062d\u0646<\/a><\/li>\n <li><a href=\"#\">\u0623\u0639\u0645\u0627\u0644\u0646\u0627<\/a><\/li>\n <li><a href=\"#\">\u0627\u0644\u0645\u062f\u0648\u0646\u0629<\/a><\/li>\n <li><a href=\"#\">\u0648\u0638\u0627\u0626\u0641<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer-col-title\">\u062a\u0648\u0627\u0635\u0644<\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#\">\u0648\u0627\u062a\u0633\u0627\u0628<\/a><\/li>\n <li><a href=\"#\">\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645<\/a><\/li>\n <li><a href=\"#\">\u0644\u064a\u0646\u0643\u062f \u0625\u0646<\/a><\/li>\n <li><a href=\"mailto:info@gemmedia.com\">info@gemmedia.com<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"footer-bottom\">\n <span>\u00a9 2025 Gem Media. \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629.<\/span>\n <div class=\"footer-gem-badge\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 40 40\" fill=\"none\"><polygon points=\"20,2 38,14 38,26 20,38 2,26 2,14\" stroke=\"#00E5A0\" stroke-width=\"2\" fill=\"rgba(0,229,160,0.1)\"\/><\/svg>\n \u0635\u064f\u0646\u0639 \u0628\u0625\u062a\u0642\u0627\u0646 \u0641\u064a Gem Media\n <\/div>\n <\/div>\n<\/footer>\n\n<script>\n\/\/ \u2500\u2500 CUSTOM CURSOR \u2500\u2500\nconst cursor = document.getElementById('cursor');\nconst ring = document.getElementById('cursor-ring');\nlet mx=0, my=0, rx=0, ry=0;\n\ndocument.addEventListener('mousemove', e => {\n mx = e.clientX; my = e.clientY;\n cursor.style.left = mx+'px';\n cursor.style.top = my+'px';\n});\n\nfunction animateRing() {\n rx += (mx - rx) * 0.12;\n ry += (my - ry) * 0.12;\n ring.style.left = rx+'px';\n ring.style.top = ry+'px';\n requestAnimationFrame(animateRing);\n}\nanimateRing();\n\ndocument.querySelectorAll('a,button,.service-card').forEach(el => {\n el.addEventListener('mouseenter', () => {\n cursor.style.transform = 'translate(-50%,-50%) scale(2)';\n ring.style.transform = 'translate(-50%,-50%) scale(1.5)';\n });\n el.addEventListener('mouseleave', () => {\n cursor.style.transform = 'translate(-50%,-50%) scale(1)';\n ring.style.transform = 'translate(-50%,-50%) scale(1)';\n });\n});\n\n\/\/ \u2500\u2500 SCROLL REVEAL \u2500\u2500\nconst obs = new IntersectionObserver(entries => {\n entries.forEach((e,i) => {\n if (e.isIntersecting) {\n setTimeout(() => e.target.classList.add('visible'), i * 100);\n obs.unobserve(e.target);\n }\n });\n}, { threshold: 0.1 });\n\ndocument.querySelectorAll('.reveal').forEach(el => obs.observe(el));\n\n\/\/ \u2500\u2500 SMOOTH SCROLL \u2500\u2500\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(a => {\n a.addEventListener('click', e => {\n const t = document.querySelector(a.getAttribute('href'));\n if (t) { e.preventDefault(); t.scrollIntoView({behavior:'smooth',block:'start'}); }\n });\n});\n\n\/\/ \u2500\u2500 FORM SUBMIT \u2500\u2500\nfunction submitContact(e) {\n e.preventDefault();\n const btn = e.target.querySelector('.btn-submit-gem');\n btn.innerHTML = '<div style=\"width:22px;height:22px;border:2px solid rgba(0,0,0,0.3);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite\"><\/div>';\n btn.disabled = true;\n setTimeout(() => {\n document.getElementById('contact-form').style.display='none';\n document.getElementById('contact-success').style.display='block';\n }, 1600);\n}\n\nconst s = document.createElement('style');\ns.textContent = '@keyframes spin{to{transform:rotate(360deg)}}';\ndocument.head.appendChild(s);\n\n\/\/ \u2500\u2500 NAV SCROLL EFFECT \u2500\u2500\nwindow.addEventListener('scroll', () => {\n const nav = document.querySelector('nav');\n if (window.scrollY > 50) nav.style.borderBottomColor = 'rgba(0,229,160,0.2)';\n else nav.style.borderBottomColor = 'rgba(0,229,160,0.12)';\n});\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gem Media \u2014 \u0646\u0635\u0646\u0639 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644 \u0627\u0644\u0631\u0642\u0645\u064a GEM MEDIA \u062e\u062f\u0645\u0627\u062a\u0646\u0627 \u0643\u064a\u0641 \u0646\u0639\u0645\u0644 \u0644\u0645\u0627\u0630\u0627 \u0646\u062d\u0646 \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u0648\u0643\u0627\u0644\u0629 \u0631\u0642\u0645\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-367","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gem-media.com\/index.php\/wp-json\/wp\/v2\/pages\/367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gem-media.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gem-media.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gem-media.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gem-media.com\/index.php\/wp-json\/wp\/v2\/comments?post=367"}],"version-history":[{"count":2,"href":"https:\/\/gem-media.com\/index.php\/wp-json\/wp\/v2\/pages\/367\/revisions"}],"predecessor-version":[{"id":370,"href":"https:\/\/gem-media.com\/index.php\/wp-json\/wp\/v2\/pages\/367\/revisions\/370"}],"wp:attachment":[{"href":"https:\/\/gem-media.com\/index.php\/wp-json\/wp\/v2\/media?parent=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}