NEXORA \u2014 Digital Business Agency<\/title>\n <link rel=\"icon\" href=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%2306070c'\/%3E%3Cpath d='M16 18h11a9 9 0 0 1 0 18h-5v10h-6z' fill='%234f7cff'\/%3E%3Ccircle cx='46' cy='44' r='5' fill='%2338e1ff'\/%3E%3C\/svg%3E\" \/>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap\" rel=\"stylesheet\" \/>\n\n <style>\n \/* ============================================================\n NEXORA \u2014 DESIGN SYSTEM\n Palette: deep charcoal \/ electric blue \/ white\n ============================================================ *\/\n\n \/* ---------- 01. TOKENS & RESET ---------- *\/\n :root{\n --bg: #05060a;\n --bg-2: #0a0c14;\n --surface: rgba(255,255,255,.03);\n --border: rgba(255,255,255,.08);\n --blue: #4f7cff;\n --blue-deep: #2e5bff;\n --cyan: #38e1ff;\n --white: #f5f7ff;\n --muted: #9aa1b4;\n --danger: #ff6b8a;\n --display: 'Space Grotesk', sans-serif;\n --sans: 'Inter', sans-serif;\n --mono: 'JetBrains Mono', monospace;\n --serif: 'Instrument Serif', serif;\n --ease: cubic-bezier(.22,1,.36,1);\n }\n\n *,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }\n html{ scroll-behavior:smooth; scroll-padding-top:110px; }\n body{\n background:var(--bg);\n color:var(--white);\n font:400 16px\/1.7 var(--sans);\n -webkit-font-smoothing:antialiased;\n overflow-x:hidden;\n }\n body.no-scroll{ overflow:hidden; }\n ::selection{ background:rgba(79,124,255,.4); color:#fff; }\n ::-webkit-scrollbar{ width:9px; }\n ::-webkit-scrollbar-track{ background:#07080d; }\n ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#2e5bff,#1b2c66); border-radius:99px; }\n img,svg{ display:block; }\n a{ color:inherit; text-decoration:none; }\n button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }\n ul{ list-style:none; }\n :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }\n\n \/* ---------- 02. BASE LAYOUT & TYPOGRAPHY ---------- *\/\n .container{ max-width:1320px; margin-inline:auto; padding-inline:clamp(20px,4vw,48px); }\n .section{ position:relative; padding-block:clamp(96px,11vw,170px); }\n\n .label{\n display:inline-flex; align-items:center; gap:14px;\n font:500 11px\/1 var(--mono); letter-spacing:.34em; text-transform:uppercase; color:var(--muted);\n }\n .label::before{ content:''; width:36px; height:1px; background:linear-gradient(90deg,var(--blue),var(--cyan)); }\n .label.center::after{ content:''; width:36px; height:1px; background:linear-gradient(90deg,var(--cyan),var(--blue)); }\n\n .h2{\n font:600 clamp(2rem,4.3vw,3.6rem)\/1.08 var(--display);\n letter-spacing:-.02em; margin-top:20px;\n }\n .sec-head{ margin-bottom:clamp(48px,6vw,84px); max-width:760px; }\n .sec-head.row{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; max-width:none; flex-wrap:wrap; }\n .sec-head p{ color:var(--muted); margin-top:18px; font-size:15.5px; }\n\n .link-btn{\n position:relative; display:inline-flex; align-items:center; gap:10px;\n font:600 14px var(--sans); color:#fff; padding-bottom:6px;\n }\n .link-btn::after{\n content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;\n background:linear-gradient(90deg,var(--blue),var(--cyan)); transform:scaleX(.35); transform-origin:left;\n transition:transform .5s var(--ease);\n }\n .link-btn:hover::after{ transform:scaleX(1); }\n .link-btn svg{ transition:transform .4s var(--ease); }\n .link-btn:hover svg{ transform:translateX(6px); }\n\n \/* Buttons *\/\n .btn{\n position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;\n padding:18px 32px; border-radius:999px; overflow:hidden;\n font:600 14px\/1 var(--sans); letter-spacing:.02em; white-space:nowrap;\n transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s, background .45s;\n }\n .btn svg{ transition:transform .4s var(--ease); }\n .btn:hover svg{ transform:translateX(5px); }\n .btn-solid{\n background:linear-gradient(135deg,#5b85ff,var(--blue-deep) 55%,#2a8cff);\n color:#fff; box-shadow:0 14px 38px rgba(47,91,255,.32);\n }\n .btn-solid::after{\n content:''; position:absolute; inset:0;\n background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);\n transform:translateX(-130%); transition:transform .8s var(--ease);\n }\n .btn-solid:hover{ transform:translateY(-3px); box-shadow:0 22px 55px rgba(47,91,255,.5); }\n .btn-solid:hover::after{ transform:translateX(130%); }\n .btn-ghost{\n border:1px solid rgba(255,255,255,.16); color:var(--white);\n background:rgba(255,255,255,.03); backdrop-filter:blur(8px);\n }\n .btn-ghost:hover{\n border-color:rgba(79,124,255,.7); color:#fff; transform:translateY(-3px);\n box-shadow:0 0 0 1px rgba(79,124,255,.35), 0 16px 44px rgba(47,91,255,.2);\n }\n .btn-sm{ padding:13px 24px; font-size:13px; }\n\n \/* Scroll-reveal animation states *\/\n .reveal{ opacity:0; transform:translateY(38px); transition:opacity .9s var(--ease), transform .9s var(--ease); }\n .reveal.in{ opacity:1; transform:none; }\n .reveal-scale{ opacity:0; transform:scale(.92) translateY(20px); transition:opacity 1s var(--ease), transform 1s var(--ease); }\n .reveal-scale.in{ opacity:1; transform:none; }\n\n \/* Word-level text reveal *\/\n .split .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }\n .split .w-inner{\n display:inline-block; transform:translateY(118%);\n transition:transform 1.05s var(--ease);\n transition-delay:calc(var(--i,0) * 55ms);\n }\n .split.in .w-inner{ transform:none; }\n\n \/* ---------- 03. GLOBAL DECOR ---------- *\/\n .scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none; }\n .scroll-progress span{\n display:block; height:100%; transform:scaleX(0); transform-origin:left;\n background:linear-gradient(90deg,var(--blue),var(--cyan));\n box-shadow:0 0 14px rgba(79,124,255,.7);\n }\n .noise{\n position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.045;\n background-image:url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n }\n\n \/* ---------- 04. NAVIGATION ---------- *\/\n #site-header{ position:fixed; inset:0 0 auto 0; z-index:100; }\n .nav-inner{\n max-width:1320px; margin:16px auto 0; padding:14px 16px 14px 26px;\n display:flex; align-items:center; justify-content:space-between; gap:20px;\n border:1px solid transparent; border-radius:20px;\n transition:background .5s var(--ease), border-color .5s, box-shadow .5s, margin .5s var(--ease), padding .5s var(--ease);\n }\n #site-header.scrolled .nav-inner{\n background:rgba(7,9,15,.72); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);\n border-color:rgba(255,255,255,.09); box-shadow:0 18px 55px rgba(0,0,0,.45);\n margin-top:10px; padding-block:10px;\n }\n .logo{\n font:700 22px var(--display); letter-spacing:.04em; color:#fff;\n display:inline-flex; align-items:center; z-index:110;\n }\n .logo b{ background:linear-gradient(135deg,#6f93ff,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }\n .logo i{\n width:6px; height:6px; border-radius:50%; background:var(--cyan);\n box-shadow:0 0 12px var(--cyan); margin-left:4px; margin-bottom:5px;\n }\n .nav-links{ display:flex; align-items:center; gap:2px; }\n .nav-link{\n position:relative; padding:10px 13px; font:500 13.5px var(--sans); color:var(--muted);\n transition:color .3s;\n }\n .nav-link::after{\n content:''; position:absolute; left:13px; right:13px; bottom:5px; height:1.5px;\n background:linear-gradient(90deg,var(--blue),var(--cyan));\n transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);\n }\n .nav-link:hover{ color:#fff; }\n .nav-link.active{ color:#fff; }\n .nav-link.active::after{ transform:scaleX(1); }\n .nav-cta{ margin-left:10px; }\n\n \/* Hamburger *\/\n .burger{\n display:none; position:relative; z-index:110; width:46px; height:46px; border-radius:14px;\n border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);\n flex-direction:column; align-items:center; justify-content:center; gap:6px;\n }\n .burger span{ width:20px; height:1.5px; background:#fff; border-radius:2px; transition:transform .45s var(--ease), opacity .3s; }\n .burger.active span:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }\n .burger.active span:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }\n\n \/* Mobile fullscreen menu *\/\n .mobile-menu{\n position:fixed; inset:0; z-index:95; visibility:hidden;\n background:rgba(5,6,10,.92); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);\n clip-path:circle(0% at calc(100% - 56px) 46px);\n transition:clip-path .85s var(--ease), visibility .85s;\n display:flex; flex-direction:column; justify-content:center; padding:130px 8vw 40px;\n }\n .mobile-menu.open{ clip-path:circle(150% at calc(100% - 56px) 46px); visibility:visible; }\n .m-link{\n font:600 clamp(1.7rem,6vw,2.3rem)\/1.15 var(--display); color:#fff;\n padding:12px 0; display:flex; align-items:baseline; gap:18px;\n opacity:0; transform:translateY(26px); transition:opacity .6s var(--ease), transform .6s var(--ease);\n border-bottom:1px solid rgba(255,255,255,.06);\n }\n .m-link i{ font:400 11px var(--mono); font-style:normal; color:var(--blue); }\n .mobile-menu.open .m-link{ opacity:1; transform:none; transition-delay:calc(var(--d,0)*70ms + 180ms); }\n .mobile-menu:not(.open) .m-link{ transition-delay:0ms; }\n .m-cta{ margin-top:34px; align-self:flex-start; opacity:0; transform:translateY(26px); transition:.6s var(--ease); }\n .mobile-menu.open .m-cta{ opacity:1; transform:none; transition-delay:620ms; }\n .m-social{ display:flex; gap:12px; margin-top:38px; opacity:0; transition:.6s var(--ease); }\n .mobile-menu.open .m-social{ opacity:1; transition-delay:700ms; }\n\n \/* ---------- 05. HERO ---------- *\/\n .hero{ position:relative; overflow:hidden; min-height:100svh; display:flex; align-items:center; }\n .hero::before{\n content:''; position:absolute; inset:0; pointer-events:none;\n background:\n radial-gradient(900px 520px at 16% 32%, rgba(79,124,255,.14), transparent 62%),\n radial-gradient(760px 520px at 88% 82%, rgba(56,225,255,.07), transparent 62%);\n }\n .hero-grid{\n position:relative; display:grid; grid-template-columns:1.04fr .96fr;\n gap:clamp(44px,5vw,84px); align-items:center;\n padding-top:150px; padding-bottom:110px;\n }\n .hero-badge{\n display:inline-flex; align-items:center; gap:11px; margin-bottom:28px;\n border:1px solid rgba(79,124,255,.35); background:rgba(79,124,255,.08);\n color:#aebfff; font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase;\n padding:9px 16px; border-radius:999px;\n }\n .pulse-dot{ width:7px; height:7px; border-radius:50%; background:#34d399; position:relative; flex:none; }\n .pulse-dot::after{\n content:''; position:absolute; inset:-4px; border-radius:50%;\n border:1px solid rgba(52,211,153,.55); animation:pulse 2.2s infinite;\n }\n @keyframes pulse{ 0%{ transform:scale(.5); opacity:1; } 100%{ transform:scale(1.7); opacity:0; } }\n\n .hero-title{\n font:700 clamp(2.55rem,5.4vw,4.75rem)\/1.05 var(--display);\n letter-spacing:-.02em; text-transform:uppercase; margin:0 0 26px;\n }\n .hero-title em{\n font:italic 400 1.04em var(--serif); text-transform:none;\n background:linear-gradient(100deg,#8fb0ff,var(--cyan));\n -webkit-background-clip:text; background-clip:text; color:transparent;\n }\n .hero-desc{ max-width:540px; color:var(--muted); font-size:clamp(15px,1.25vw,17px); margin-bottom:40px; }\n .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }\n .hero-trust{ display:flex; align-items:center; gap:14px; margin-top:38px; flex-wrap:wrap; }\n .stars{ color:#f6c453; letter-spacing:4px; font-size:13px; }\n .hero-trust span{ font-size:12.5px; color:var(--muted); }\n\n \/* Hero \u2014 futuristic visual *\/\n .hero-visual{ position:relative; padding-bottom:80px; }\n .core-scene{\n position:relative; width:min(540px,100%); aspect-ratio:1; margin-inline:auto;\n transform-style:preserve-3d; transition:transform .2s linear;\n }\n .visual-glow{\n position:absolute; inset:20%; border-radius:50%; pointer-events:none;\n background:radial-gradient(circle, rgba(79,124,255,.42), transparent 66%);\n filter:blur(46px); animation:glowPulse 6s ease-in-out infinite;\n }\n @keyframes glowPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }\n .ring{ position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.08); }\n .ring-a{ inset:5%; }\n .ring-b{ inset:13%; border-style:dashed; animation:spin 70s linear infinite; }\n .ring-spin{\n position:absolute; inset:8%; border-radius:50%;\n background:conic-gradient(from 0deg, transparent 0 62%, rgba(79,124,255,.9) 84%, rgba(56,225,255,.9) 92%, transparent 100%);\n -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));\n mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));\n animation:spin 16s linear infinite;\n }\n @keyframes spin{ to{ transform:rotate(360deg); } }\n .orbit{ position:absolute; inset:7%; animation:spin 26s linear infinite; }\n .orbit::before{\n content:''; position:absolute; top:0; left:50%; width:10px; height:10px; margin:-5px; border-radius:50%;\n background:var(--cyan); box-shadow:0 0 18px var(--cyan);\n }\n .orbit::after{\n content:''; position:absolute; bottom:9%; right:1%; width:6px; height:6px; margin:-3px; border-radius:50%;\n background:#8fb0ff; box-shadow:0 0 14px #8fb0ff;\n }\n .orbit-2{ inset:17%; animation:spin 40s linear infinite reverse; }\n .orbit-2::after{ display:none; }\n\n .orb{\n position:absolute; inset:25%; border-radius:50%;\n background:radial-gradient(circle at 32% 28%, #dbe6ff 0%, #7ea2ff 20%, var(--blue-deep) 55%, #0d1640 100%);\n box-shadow:0 34px 90px rgba(30,60,180,.55), 0 0 130px rgba(79,124,255,.35), inset -26px -32px 70px rgba(0,0,0,.5);\n animation:floatY 8s ease-in-out infinite; z-index:2;\n }\n .orb::before{\n content:''; position:absolute; inset:5%; border-radius:50%;\n background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.55), transparent 52%);\n }\n .orb::after{\n content:''; position:absolute; inset:0; border-radius:50%;\n background:radial-gradient(circle at 72% 82%, rgba(56,225,255,.3), transparent 46%);\n }\n @keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-15px); } }\n @keyframes floatY2{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(13px); } }\n\n .grid-floor{\n position:absolute; left:50%; bottom:-4%; width:135%; margin-left:-67.5%; height:44%; z-index:1;\n background-image:\n linear-gradient(rgba(120,150,255,.14) 1px, transparent 1px),\n linear-gradient(90deg, rgba(120,150,255,.14) 1px, transparent 1px);\n background-size:44px 44px;\n transform:perspective(520px) rotateX(62deg);\n -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.95) 10%, transparent 85%);\n mask-image:linear-gradient(to top, rgba(0,0,0,.95) 10%, transparent 85%);\n }\n\n \/* Floating glass panels *\/\n .panel{\n position:absolute; z-index:4; min-width:180px;\n background:rgba(11,14,24,.78); border:1px solid rgba(255,255,255,.1); border-radius:16px;\n padding:14px 18px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);\n box-shadow:0 24px 60px rgba(0,0,0,.5);\n }\n .panel .p-label{ font:500 9.5px var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }\n .panel-rev{ top:3%; right:-3%; animation:floatY 6.5s ease-in-out infinite; }\n .bars{ display:flex; align-items:flex-end; gap:6px; height:46px; }\n .bars i{ width:9px; border-radius:5px; background:rgba(255,255,255,.13); }\n .bars i:nth-child(1){ height:38%; } .bars i:nth-child(2){ height:56%; }\n .bars i:nth-child(3){ height:46%; } .bars i:nth-child(4){ height:74%; }\n .bars i:nth-child(5){ height:100%; background:linear-gradient(180deg,var(--cyan),var(--blue)); box-shadow:0 0 14px rgba(56,225,255,.55); }\n .panel-rev .p-value{ font:700 15px var(--display); color:#fff; margin-top:9px; display:flex; justify-content:space-between; }\n .panel-rev .p-value em{ font-style:normal; color:var(--cyan); font:600 12px var(--mono); }\n\n .panel-live{ top:46%; left:-5%; animation:floatY2 7.5s ease-in-out infinite; display:flex; gap:14px; align-items:center; }\n .live-ico{\n width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;\n background:linear-gradient(135deg, rgba(79,124,255,.3), rgba(56,225,255,.15)); border:1px solid rgba(79,124,255,.4);\n }\n .live-ico i{ width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 12px #34d399; animation:pulse 2s infinite; }\n .panel-live b{ display:block; font:600 13.5px var(--display); color:#fff; }\n .panel-live span{ font:500 10.5px var(--mono); color:var(--muted); letter-spacing:.08em; }\n\n \/* Metric chips *\/\n .metric-chips{\n position:absolute; bottom:6px; left:50%; transform:translateX(-50%); z-index:5;\n display:flex; gap:12px; justify-content:center; flex-wrap:wrap; width:max-content; max-width:100%;\n }\n .chip{\n display:flex; flex-direction:column; gap:3px; padding:12px 18px; border-radius:14px;\n background:rgba(10,13,22,.82); border:1px solid rgba(255,255,255,.1);\n backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);\n animation:floatY 6s ease-in-out infinite;\n }\n .chip:nth-child(2){ animation-delay:1.1s; }\n .chip:nth-child(3){ animation-delay:2.1s; }\n .chip b{\n font:700 20px var(--display);\n background:linear-gradient(120deg,#fff,#8fb0ff); -webkit-background-clip:text; background-clip:text; color:transparent;\n }\n .chip span{ font:500 9.5px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }\n\n \/* Scroll cue *\/\n .scroll-cue{ position:absolute; left:clamp(16px,2.6vw,40px); bottom:34px; display:flex; flex-direction:column; align-items:center; gap:16px; z-index:3; }\n .scroll-cue span{ font:500 9.5px var(--mono); letter-spacing:.42em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; }\n .scroll-cue i{ width:1px; height:74px; background:rgba(255,255,255,.14); position:relative; overflow:hidden; display:block; }\n .scroll-cue i::after{\n content:''; position:absolute; inset-inline:0; height:30px;\n background:linear-gradient(180deg,transparent,var(--blue),var(--cyan),transparent);\n animation:cue 2.4s cubic-bezier(.65,0,.35,1) infinite;\n }\n @keyframes cue{ 0%{ transform:translateY(-110%); } 60%,100%{ transform:translateY(110%); } }\n\n \/* ---------- 06. TRUSTED MARQUEE ---------- *\/\n .trusted{ padding-block:74px; border-block:1px solid var(--border); background:rgba(255,255,255,.012); }\n .trusted .label{ justify-content:center; }\n .trusted .label::before, .trusted .label.center::after{ display:none; }\n .marquee{ overflow:hidden; margin-top:44px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }\n .marquee-track{ display:flex; width:max-content; animation:marquee 32s linear infinite; }\n .marquee:hover .marquee-track{ animation-play-state:paused; }\n @keyframes marquee{ to{ transform:translateX(-50%); } }\n .marquee-group{ display:flex; align-items:center; flex:none; gap:clamp(44px,6vw,92px); padding-right:clamp(44px,6vw,92px); }\n .brand{ color:rgba(255,255,255,.34); transition:color .4s; }\n .brand:hover{ color:rgba(255,255,255,.85); }\n .b-serif{ font:italic 400 32px var(--serif); }\n .b-display{ font:700 19px var(--display); letter-spacing:.26em; text-transform:uppercase; }\n .b-mono{ font:500 16px var(--mono); letter-spacing:.34em; text-transform:uppercase; }\n .sep{ color:var(--blue); font-size:11px; opacity:.8; }\n\n \/* ---------- 07. ABOUT ---------- *\/\n .about{ overflow:hidden; }\n .about-num{\n position:absolute; top:-30px; right:-10px; z-index:0; user-select:none; pointer-events:none;\n font:700 clamp(190px,28vw,430px)\/1 var(--display); letter-spacing:-.04em;\n -webkit-text-stroke:1px rgba(255,255,255,.07); color:transparent;\n }\n .about-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(48px,6vw,110px); align-items:start; }\n .about-left h2{\n font:500 clamp(1.9rem,3.8vw,3.3rem)\/1.18 var(--display); letter-spacing:-.01em;\n }\n .about-left h2 em{\n font:italic 400 1.06em var(--serif);\n background:linear-gradient(100deg,#8fb0ff,var(--cyan));\n -webkit-background-clip:text; background-clip:text; color:transparent;\n }\n .about-right{ padding-top:10px; }\n .about-right > p{ color:var(--muted); font-size:15.5px; margin-bottom:44px; }\n .about-stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); }\n .stat{ padding:26px 18px 6px 0; }\n .stat b{ font:700 clamp(1.9rem,3vw,2.7rem) var(--display); letter-spacing:-.02em; display:block;\n background:linear-gradient(140deg,#fff,#8fb0ff); -webkit-background-clip:text; background-clip:text; color:transparent; }\n .stat span{ font:500 10px var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }\n\n \/* ---------- 08. SERVICES ---------- *\/\n .services{ background:linear-gradient(180deg,transparent,rgba(255,255,255,.014),transparent); }\n .service-list{ border-top:1px solid var(--border); }\n .service{ position:relative; border-bottom:1px solid var(--border); overflow:hidden; }\n .service::before{\n content:''; position:absolute; inset:0; pointer-events:none; opacity:0;\n background:linear-gradient(90deg, rgba(79,124,255,.13), rgba(56,225,255,.04) 55%, transparent);\n transition:opacity .55s var(--ease);\n }\n .service:hover::before{ opacity:1; }\n .service-head{\n position:relative; width:100%; display:grid; align-items:center; text-align:left;\n grid-template-columns:90px 1fr auto auto; gap:clamp(14px,2.4vw,34px);\n padding:clamp(26px,3vw,40px) 14px; cursor:pointer;\n }\n .service-num{ font:500 12.5px var(--mono); color:var(--muted); transition:color .4s; }\n .service-title{\n font:600 clamp(1.25rem,2.6vw,1.9rem)\/1.15 var(--display); letter-spacing:-.01em; color:#eef1f8;\n transition:transform .5s var(--ease), color .4s;\n }\n .service-head:hover .service-title{ transform:translateX(12px); }\n .service.open .service-title{ color:#fff; }\n .service-meta{ font:500 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }\n .service-arrow{\n width:52px; height:52px; border-radius:50%; display:grid; place-items:center;\n border:1px solid rgba(255,255,255,.14); transition:border-color .4s, box-shadow .4s, background .4s;\n }\n .service-arrow svg{ transition:transform .5s var(--ease); }\n .service-head:hover .service-arrow{ border-color:rgba(79,124,255,.65); box-shadow:0 0 26px rgba(79,124,255,.25); }\n .service-head:hover .service-arrow svg{ transform:rotate(45deg); }\n .service.open .service-arrow svg{ transform:rotate(90deg); }\n .service.open .service-arrow{ border-color:rgba(56,225,255,.6); background:rgba(56,225,255,.07); }\n .service.open .service-num{ color:var(--cyan); }\n .service-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .65s var(--ease); }\n .service.open .service-body{ grid-template-rows:1fr; }\n .service-inner{ overflow:hidden; min-height:0; padding:0 14px; transition:padding .5s var(--ease); }\n .service.open .service-inner{ padding:0 14px 40px; }\n .service-inner > p{ max-width:620px; color:var(--muted); font-size:15px; }\n .service-foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:24px; }\n .service-tags{ display:flex; gap:10px; flex-wrap:wrap; }\n .service-tags span{\n font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#aebfff;\n border:1px solid rgba(79,124,255,.3); border-radius:999px; padding:8px 14px;\n background:rgba(79,124,255,.07); transition:background .3s;\n }\n .service-tags span:hover{ background:rgba(79,124,255,.16); }\n\n \/* ---------- 09. PROJECTS ---------- *\/\n .project{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(36px,6vw,110px); align-items:center; margin-bottom:clamp(90px,11vw,150px); position:relative; }\n .project:last-child{ margin-bottom:0; }\n .project.flip .project-media{ order:2; }\n .p-num{\n position:absolute; top:-64px; left:-14px; z-index:0; user-select:none; pointer-events:none;\n font:700 clamp(110px,15vw,200px)\/1 var(--display);\n -webkit-text-stroke:1px rgba(255,255,255,.09); color:transparent;\n }\n .project.flip .p-num{ left:auto; right:-14px; }\n .project-media{\n position:relative; z-index:1; border-radius:24px; overflow:hidden; aspect-ratio:4\/3;\n border:1px solid rgba(255,255,255,.09);\n box-shadow:0 40px 90px rgba(0,0,0,.5);\n }\n .p-art{\n position:absolute; inset:0; display:grid; place-items:center; overflow:hidden;\n transition:transform 1.3s var(--ease);\n }\n .project:hover .p-art{ transform:scale(1.08); }\n .p-art .p-word{ font:600 clamp(2.4rem,5vw,4.4rem)\/1 var(--display); letter-spacing:.14em; color:rgba(255,255,255,.88); z-index:2; position:relative; }\n .p-art .p-sub{ position:absolute; bottom:22px; left:26px; font:500 10px var(--mono); letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.55); z-index:2; }\n .p-art .p-gl{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }\n .p-art.aurelia{ background:linear-gradient(140deg,#191129,#2c1b4d 48%,#0b1020); }\n .p-art.aurelia .p-gl{ width:280px; height:280px; background:radial-gradient(circle,#c084fc,transparent 65%); top:-40px; right:-30px; }\n .p-art.aurelia::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 90%, rgba(255,255,255,.08), transparent 40%); }\n .p-art.nova{ background:linear-gradient(140deg,#070c18,#0c1a3a 50%,#05070d); }\n .p-art.nova::before{\n content:''; position:absolute; inset:0;\n background-image:linear-gradient(rgba(100,140,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(100,140,255,.12) 1px,transparent 1px);\n background-size:40px 40px;\n -webkit-mask-image:radial-gradient(circle at 50% 55%, #000 20%, transparent 72%);\n mask-image:radial-gradient(circle at 50% 55%, #000 20%, transparent 72%);\n }\n .p-art.nova .p-orb{\n position:absolute; width:150px; height:150px; border-radius:50%;\n background:radial-gradient(circle at 34% 30%, #9db8ff, var(--blue-deep) 60%, #101b46);\n box-shadow:0 0 80px rgba(79,124,255,.6);\n }\n .p-art.nova .p-ring{ position:absolute; width:230px; height:230px; border-radius:50%; border:1px dashed rgba(143,176,255,.4); animation:spin 30s linear infinite; }\n .p-art.verde{ background:linear-gradient(140deg,#08120d,#123024 48%,#070c0a); }\n .p-art.verde .p-gl{ width:300px; height:300px; background:radial-gradient(circle,#34d399,transparent 65%); bottom:-60px; left:-40px; opacity:.4; }\n .p-art.verde::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 15%, rgba(255,255,255,.1), transparent 45%); }\n\n .project-content{ position:relative; z-index:1; }\n .project-content .label{ margin-bottom:22px; }\n .project-content h3{ font:600 clamp(1.55rem,2.9vw,2.45rem)\/1.12 var(--display); letter-spacing:-.015em; margin-bottom:18px; }\n .project-content h3 span{ display:block; font:italic 400 .92em var(--serif); color:#aebfff; letter-spacing:0; }\n .project-content > p{ color:var(--muted); font-size:15px; max-width:480px; margin-bottom:26px; }\n .project-meta{ display:flex; gap:30px; margin-bottom:30px; flex-wrap:wrap; }\n .project-meta div b{ display:block; font:600 13px var(--display); color:#fff; }\n .project-meta div span{ font:500 10px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }\n\n \/* ---------- 10. IMPACT ---------- *\/\n .impact{ overflow:hidden; text-align:center; }\n .impact::before{\n content:''; position:absolute; inset:0;\n background:radial-gradient(700px 420px at 50% 30%, rgba(79,124,255,.16), transparent 65%);\n }\n .impact-title{\n position:relative; font:700 clamp(2.1rem,5.4vw,4.8rem)\/1.08 var(--display);\n letter-spacing:-.02em; text-transform:uppercase;\n }\n .impact-title em{\n font:italic 400 1.02em var(--serif);\n background:linear-gradient(100deg,#8fb0ff,var(--cyan));\n -webkit-background-clip:text; background-clip:text; color:transparent;\n }\n .impact-stats{\n position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px;\n margin-top:clamp(56px,7vw,100px); padding-top:56px; border-top:1px solid var(--border);\n }\n .impact-stat b{\n display:block; font:700 clamp(2.7rem,5.2vw,4.4rem)\/1 var(--display); letter-spacing:-.02em;\n background:linear-gradient(165deg,#fff 32%,#8fb0ff); -webkit-background-clip:text; background-clip:text; color:transparent;\n }\n .impact-stat span{ font:500 10.5px var(--mono); letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-top:10px; display:block; }\n\n \/* ---------- 11. PROCESS ---------- *\/\n .process-wrap{ position:relative; margin-top:clamp(56px,7vw,90px); }\n .process-line{ position:absolute; top:27px; left:0; right:0; height:1px; background:rgba(255,255,255,.09); }\n .process-line i{\n position:absolute; inset:0; transform:scaleX(0); transform-origin:left;\n background:linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow:0 0 16px rgba(79,124,255,.6);\n }\n .process-grid{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }\n .step{ position:relative; padding:0 10px; }\n .step-num{\n width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin-bottom:24px; position:relative; z-index:1;\n border:1px solid rgba(255,255,255,.14); background:var(--bg);\n font:500 13px var(--mono); color:var(--muted); transition:border-color .4s, color .4s, box-shadow .4s, transform .4s var(--ease);\n }\n .step:hover .step-num{ border-color:var(--blue); color:#fff; transform:translateY(-4px); box-shadow:0 0 34px rgba(79,124,255,.4); }\n .step h3{ font:600 19px var(--display); margin-bottom:10px; letter-spacing:-.01em; }\n .step p{ font-size:13.5px; color:var(--muted); line-height:1.65; }\n\n \/* ---------- 12. WHY CHOOSE US ---------- *\/\n .why-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(48px,7vw,120px); align-items:start; }\n .why-left .h2{ font-size:clamp(1.9rem,3.6vw,3.1rem); margin-bottom:24px; }\n .why-left > p{ color:var(--muted); font-size:15.5px; max-width:420px; margin-bottom:32px; }\n .benefit-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 30px; }\n .benefit{ position:relative; padding:24px 4px; }\n .benefit::after{\n content:''; position:absolute; left:4px; right:4px; bottom:0; height:1px;\n background:linear-gradient(90deg,var(--blue),var(--cyan));\n transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);\n }\n .benefit:hover::after{ transform:scaleX(1); }\n .b-icon{\n width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;\n border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:#8fb0ff;\n transition:border-color .4s, color .4s, box-shadow .4s, transform .4s var(--ease);\n }\n .benefit:hover .b-icon{ border-color:rgba(56,225,255,.55); color:var(--cyan); box-shadow:0 0 26px rgba(56,225,255,.25); transform:translateY(-3px); }\n .benefit h3{ font:600 16.5px var(--display); margin-bottom:8px; }\n .benefit p{ font-size:13.5px; color:var(--muted); line-height:1.6; }\n\n \/* ---------- 13. TESTIMONIALS ---------- *\/\n .testimonials{ background:linear-gradient(180deg,transparent,rgba(255,255,255,.014),transparent); }\n .t-slider{ position:relative; overflow:hidden; }\n .t-track{ display:flex; transition:transform .75s var(--ease); }\n .t-slide{ flex:0 0 100%; padding:20px 6px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; }\n .t-quote-mark{\n font:italic 400 110px\/0.6 var(--serif); color:transparent; margin-bottom:26px;\n background:linear-gradient(120deg,rgba(79,124,255,.8),rgba(56,225,255,.5));\n -webkit-background-clip:text; background-clip:text;\n }\n .t-slide blockquote{\n font:500 clamp(1.3rem,2.5vw,1.95rem)\/1.45 var(--display);\n letter-spacing:-.01em; color:#eef1f8; max-width:880px;\n }\n .t-person{ display:flex; align-items:center; gap:18px; margin-top:40px; text-align:left; }\n .t-avatar{\n width:66px; height:66px; flex:none; border-radius:50%; display:grid; place-items:center;\n font:700 19px var(--display); color:#fff; border:1px solid rgba(255,255,255,.25);\n box-shadow:0 0 34px rgba(79,124,255,.35);\n }\n .t-person b{ display:block; font:600 15px var(--display); color:#fff; }\n .t-person span{ font:500 12px var(--sans); color:var(--muted); }\n .t-controls{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:52px; }\n .t-btn{\n width:52px; height:52px; border-radius:50%; display:grid; place-items:center;\n border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.03); color:#fff;\n transition:border-color .35s, box-shadow .35s, transform .35s var(--ease), background .35s;\n }\n .t-btn:hover{ border-color:rgba(79,124,255,.7); box-shadow:0 0 28px rgba(79,124,255,.3); transform:translateY(-3px); background:rgba(79,124,255,.08); }\n .t-dots{ display:flex; gap:9px; }\n .dot{ width:8px; height:8px; border-radius:99px; background:rgba(255,255,255,.2); transition:width .45s var(--ease), background .45s; padding:0; }\n .dot.active{ width:30px; background:linear-gradient(90deg,var(--blue),var(--cyan)); }\n\n \/* ---------- 14. CTA ---------- *\/\n .cta{ position:relative; overflow:hidden; text-align:center; padding-block:clamp(120px,15vw,200px); }\n .cta-blob{ position:absolute; border-radius:50%; filter:blur(100px); opacity:.32; pointer-events:none; }\n .cta-blob.b1{ width:480px; height:480px; background:radial-gradient(circle,var(--blue),transparent 65%); top:-160px; left:-140px; animation:drift 13s ease-in-out infinite alternate; }\n .cta-blob.b2{ width:420px; height:420px; background:radial-gradient(circle,var(--cyan),transparent 65%); bottom:-140px; right:-120px; animation:drift 16s ease-in-out infinite alternate-reverse; }\n .cta-blob.b3{ width:300px; height:300px; background:radial-gradient(circle,#7ea2ff,transparent 65%); top:40%; left:55%; animation:drift 19s ease-in-out infinite alternate; }\n @keyframes drift{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(70px,-50px) scale(1.18); } }\n .cta-inner{ position:relative; z-index:2; }\n .cta .label{ justify-content:center; }\n .cta-title{\n font:700 clamp(2.3rem,5.8vw,5.2rem)\/1.06 var(--display);\n letter-spacing:-.02em; text-transform:uppercase; margin:26px auto 24px; max-width:1000px;\n }\n .cta-title em{\n font:italic 400 1.02em var(--serif);\n background:linear-gradient(100deg,#8fb0ff,var(--cyan));\n -webkit-background-clip:text; background-clip:text; color:transparent;\n }\n .cta-inner > p{ color:var(--muted); font-size:clamp(15px,1.3vw,17px); max-width:560px; margin:0 auto 42px; }\n .cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }\n\n \/* ---------- 15. CONTACT ---------- *\/\n .contact-grid{ display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(48px,6vw,110px); align-items:start; }\n .contact-info h3{ font:600 clamp(1.5rem,2.6vw,2.1rem)\/1.15 var(--display); margin:20px 0 14px; }\n .contact-info > p{ color:var(--muted); font-size:14.5px; margin-bottom:34px; }\n .c-item{ display:flex; align-items:flex-start; gap:18px; padding:20px 0; border-bottom:1px solid var(--border); transition:padding-left .4s var(--ease); }\n .c-item:hover{ padding-left:8px; }\n .c-ico{\n width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center;\n border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:#8fb0ff;\n }\n .c-item .c-label{ font:500 9.5px var(--mono); letter-spacing:.26em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px; }\n .c-item .c-value{ font:600 15.5px var(--sans); color:#fff; }\n .c-item a.c-value:hover{ color:var(--cyan); }\n .c-socials{ display:flex; gap:12px; margin-top:30px; }\n .s-btn{\n width:44px; height:44px; border-radius:12px; display:grid; place-items:center;\n border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.03); color:var(--muted);\n transition:color .35s, border-color .35s, box-shadow .35s, transform .35s var(--ease);\n }\n .s-btn:hover{ color:#fff; border-color:rgba(79,124,255,.65); box-shadow:0 0 24px rgba(79,124,255,.3); transform:translateY(-3px); }\n\n .form-card{\n position:relative; border-radius:26px; padding:clamp(26px,3.4vw,46px);\n background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));\n backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);\n box-shadow:0 44px 100px rgba(0,0,0,.45);\n }\n .form-card::before{\n content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;\n background:linear-gradient(150deg, rgba(79,124,255,.65), transparent 38%, rgba(56,225,255,.45));\n -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;\n }\n .f-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }\n .f-row + .f-row{ margin-top:20px; }\n .field{ display:flex; flex-direction:column; gap:9px; }\n .field label{ font:500 10px var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }\n .field input, .field select, .field textarea{\n width:100%; background:rgba(255,255,255,.04); color:#fff;\n border:1px solid rgba(255,255,255,.11); border-radius:13px;\n padding:15px 17px; font:400 14.5px var(--sans);\n transition:border-color .35s, box-shadow .35s, background .35s;\n }\n .field input::placeholder, .field textarea::placeholder{ color:#5d6478; }\n .field input:focus, .field select:focus, .field textarea:focus{\n outline:none; border-color:var(--blue); background:rgba(79,124,255,.05);\n box-shadow:0 0 0 4px rgba(79,124,255,.14);\n }\n .field select{\n appearance:none; -webkit-appearance:none; cursor:pointer;\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa1b4' stroke-width='1.5' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\n background-repeat:no-repeat; background-position:right 18px center;\n }\n .field select option{ background:#0c0f1a; color:#fff; }\n .field textarea{ min-height:130px; resize:vertical; }\n .field .err{ display:none; font:500 11.5px var(--sans); color:var(--danger); }\n .field.error input, .field.error select, .field.error textarea{ border-color:rgba(255,107,138,.6); box-shadow:0 0 0 3px rgba(255,107,138,.1); }\n .field.error .err{ display:block; }\n .form-submit{ margin-top:26px; width:100%; justify-content:center; }\n .form-success{ text-align:center; padding:50px 20px; }\n .form-success .ok{\n width:84px; height:84px; margin:0 auto 26px; border-radius:50%; display:grid; place-items:center;\n background:radial-gradient(circle at 32% 28%, rgba(56,225,255,.35), rgba(79,124,255,.25));\n border:1px solid rgba(56,225,255,.5); box-shadow:0 0 60px rgba(56,225,255,.3);\n animation:pop .7s var(--ease);\n }\n @keyframes pop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }\n .form-success h3{ font:600 1.6rem var(--display); margin-bottom:10px; }\n .form-success p{ color:var(--muted); font-size:14.5px; margin-bottom:28px; }\n\n \/* ---------- 16. FOOTER ---------- *\/\n .footer{ position:relative; border-top:1px solid var(--border); background:linear-gradient(180deg,transparent,rgba(10,12,20,.65)); overflow:hidden; }\n .footer-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; padding-top:clamp(70px,9vw,110px); }\n .footer-logo{ font-size:26px; }\n .footer-top p{ max-width:400px; color:var(--muted); font-size:14.5px; }\n .footer-wordmark{\n font:700 clamp(66px,15.5vw,220px)\/.92 var(--display); letter-spacing:-.02em; text-align:center;\n background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.015) 85%);\n -webkit-background-clip:text; background-clip:text; color:transparent;\n margin:clamp(30px,5vw,60px) 0 clamp(20px,3vw,40px); user-select:none; pointer-events:none;\n }\n .footer-cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(30px,4vw,60px); padding-block:clamp(30px,4vw,50px); border-top:1px solid var(--border); }\n .f-col h4{ font:500 11px var(--mono); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }\n .f-col ul{ display:flex; flex-direction:column; gap:12px; }\n .f-col a{ font-size:14.5px; color:#c3c9d8; transition:color .3s, padding-left .3s var(--ease); }\n .f-col a:hover{ color:var(--cyan); padding-left:6px; }\n .footer-bottom{\n display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;\n padding-block:28px; border-top:1px solid var(--border);\n font-size:13px; color:var(--muted);\n }\n .footer-bottom .fb-links{ display:flex; align-items:center; gap:26px; }\n .to-top-link{ display:inline-flex; align-items:center; gap:9px; font:500 12px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:#c3c9d8; transition:color .3s; }\n .to-top-link:hover{ color:var(--cyan); }\n\n \/* Floating back-to-top with progress ring *\/\n .back-top{\n position:fixed; right:24px; bottom:24px; z-index:80; width:58px; height:58px; border-radius:50%;\n background:rgba(10,13,22,.88); border:1px solid rgba(255,255,255,.13);\n backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);\n display:grid; place-items:center; color:#fff; cursor:pointer;\n opacity:0; transform:translateY(22px) scale(.88); pointer-events:none;\n transition:opacity .45s var(--ease), transform .45s var(--ease), border-color .35s, box-shadow .35s;\n }\n .back-top.show{ opacity:1; transform:none; pointer-events:auto; }\n .back-top:hover{ border-color:rgba(56,225,255,.6); box-shadow:0 0 30px rgba(56,225,255,.3); }\n .back-top svg.ring{ position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); transform:rotate(-90deg); }\n .back-top svg.ring circle{ fill:none; stroke-width:2; }\n .back-top svg.ring .track{ stroke:rgba(255,255,255,.12); }\n .back-top svg.ring .fill{ stroke:url(#ringGrad); stroke-linecap:round; }\n\n \/* ---------- 17. RESPONSIVE ---------- *\/\n @media (max-width:1180px){\n .nav-link{ padding:10px 9px; font-size:13px; }\n .panel-rev{ right:0; }\n .panel-live{ left:0; }\n }\n @media (max-width:1000px){\n .nav-links{ display:none; }\n .burger{ display:flex; }\n .hero-grid{ grid-template-columns:1fr; gap:70px; padding-top:130px; padding-bottom:70px; }\n .core-scene{ width:min(470px,100%); }\n .scroll-cue{ display:none; }\n .about-grid, .why-grid, .contact-grid{ grid-template-columns:1fr; }\n .about-num{ right:0; }\n .project{ grid-template-columns:1fr; gap:44px; }\n .project.flip .project-media{ order:0; }\n .p-num{ top:-56px; }\n \/* Process becomes vertical *\/\n .process-grid{ grid-template-columns:1fr; gap:0; }\n .process-line{ top:0; bottom:0; left:27px; right:auto; width:1px; height:auto; }\n .process-line i{ transform:scaleY(0); transform-origin:top; }\n .step{ display:grid; grid-template-columns:56px 1fr; column-gap:24px; padding:0 0 46px 0; }\n .step:last-child{ padding-bottom:0; }\n .step-num{ margin-bottom:0; }\n .impact-stats{ grid-template-columns:repeat(2,1fr); gap:44px 24px; }\n .footer-cols{ grid-template-columns:repeat(2,1fr); }\n }\n @media (max-width:640px){\n .nav-inner{ margin-top:10px; padding:11px 12px 11px 18px; }\n .btn{ width:100%; }\n .hero-actions .btn{ max-width:none; }\n .metric-chips{ position:static; transform:none; width:100%; margin-top:30px; }\n .hero-visual{ padding-bottom:0; }\n .panel-rev{ right:-2%; }\n .panel-live{ left:-2%; }\n .service-head{ grid-template-columns:46px 1fr auto; gap:14px; padding:22px 6px; }\n .service-meta{ display:none; }\n .service-arrow{ width:44px; height:44px; }\n .service-inner{ padding:0 6px; }\n .service.open .service-inner{ padding:0 6px 30px; }\n .about-stats{ gap:14px; }\n .stat{ padding-right:8px; }\n .benefit-list{ grid-template-columns:1fr; }\n .f-row{ grid-template-columns:1fr; }\n .f-row + .f-row{ margin-top:0; }\n .field + .field{ margin-top:18px; }\n .footer-bottom{ justify-content:center; text-align:center; }\n .footer-bottom .fb-links{ flex-direction:column; gap:12px; }\n .back-top{ right:16px; bottom:16px; width:52px; height:52px; }\n }\n\n \/* ---------- 18. REDUCED MOTION ---------- *\/\n @media (prefers-reduced-motion: reduce){\n html{ scroll-behavior:auto; }\n *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }\n .split .w-inner{ transform:none; }\n .reveal, .reveal-scale{ opacity:1; transform:none; }\n .marquee-track{ animation:none; }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"scroll-progress\" aria-hidden=\"true\"><span id=\"scroll-bar\"><\/span><\/div>\n \n <div class=\"noise\" aria-hidden=\"true\"><\/div>\n\n \n <header id=\"site-header\">\n <div class=\"nav-inner\">\n <a href=\"#home\" class=\"logo\" aria-label=\"NEXORA \u2014 back to top\">NEXO<b>RA<\/b><i><\/i><\/a>\n\n <nav class=\"nav-links\" aria-label=\"Primary navigation\">\n <a href=\"#home\" class=\"nav-link active\">Home<\/a>\n <a href=\"#about\" class=\"nav-link\">About<\/a>\n <a href=\"#services\" class=\"nav-link\">Services<\/a>\n <a href=\"#projects\" class=\"nav-link\">Projects<\/a>\n <a href=\"#process\" class=\"nav-link\">Process<\/a>\n <a href=\"#testimonials\" class=\"nav-link\">Testimonials<\/a>\n <a href=\"#contact\" class=\"nav-link\">Contact<\/a>\n <a href=\"#contact\" class=\"btn btn-solid btn-sm nav-cta\">\n Let's Talk\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/nav>\n\n <button class=\"burger\" id=\"burger\" aria-label=\"Toggle menu\" aria-expanded=\"false\" aria-controls=\"mobile-menu\">\n <span><\/span><span><\/span>\n <\/button>\n <\/div>\n <\/header>\n\n \n <div class=\"mobile-menu\" id=\"mobile-menu\">\n <a href=\"#home\" class=\"m-link\" style=\"--d:0\"><i>01<\/i>Home<\/a>\n <a href=\"#about\" class=\"m-link\" style=\"--d:1\"><i>02<\/i>About<\/a>\n <a href=\"#services\" class=\"m-link\" style=\"--d:2\"><i>03<\/i>Services<\/a>\n <a href=\"#projects\" class=\"m-link\" style=\"--d:3\"><i>04<\/i>Projects<\/a>\n <a href=\"#process\" class=\"m-link\" style=\"--d:4\"><i>05<\/i>Process<\/a>\n <a href=\"#testimonials\" class=\"m-link\" style=\"--d:5\"><i>06<\/i>Testimonials<\/a>\n <a href=\"#contact\" class=\"m-link\" style=\"--d:6\"><i>07<\/i>Contact<\/a>\n <a href=\"#contact\" class=\"btn btn-solid m-cta\">\n Let's Talk\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <div class=\"m-social\">\n <a href=\"#\" class=\"s-btn\" aria-label=\"LinkedIn\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"X (Twitter)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"Instagram\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><rect x=\"2.5\" y=\"2.5\" width=\"19\" height=\"19\" rx=\"5.5\"\/><circle cx=\"12\" cy=\"12\" r=\"4.2\"\/><circle cx=\"17.6\" cy=\"6.4\" r=\".9\" fill=\"currentColor\" stroke=\"none\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"Behance\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.08 5.406c.978 0 1.812.122 2.52.366.708.244 1.283.6 1.752 1.037.462.449.8.977 1.018 1.62.214.616.322 1.31.322 2.065 0 1.163-.292 2.154-.877 2.973-.59.818-1.46 1.414-2.603 1.789.76.351 1.36.852 1.807 1.503.446.65.674 1.434.674 2.35 0 .809-.157 1.52-.47 2.129-.315.61-.745 1.114-1.294 1.51a5.6 5.6 0 0 1-1.848.905c-.686.207-1.4.31-2.148.31H0V5.406h7.08zm-.416 6.845c.563 0 1.04-.118 1.431-.354.392-.236.686-.537.884-.904.198-.367.296-.774.296-1.222 0-.655-.231-1.163-.695-1.52-.462-.354-1.083-.535-1.862-.535H3.22v4.535h3.444zm.25 6.657c.856 0 1.498-.164 1.927-.496.43-.332.643-.891.643-1.678 0-.537-.117-.972-.354-1.307a2.03 2.03 0 0 0-.914-.719 3.08 3.08 0 0 0-1.213-.232H3.22v4.432h3.694zM21.47 18.48c.545.583 1.35.875 2.408.875.715 0 1.32-.169 1.816-.506.494-.338.79-.697.882-1.078h2.42c-.427 1.48-1.18 2.527-2.26 3.145-1.078.618-2.318.927-3.72.927-1.045 0-1.979-.168-2.8-.505a5.78 5.78 0 0 1-2.06-1.393 6.05 6.05 0 0 1-1.28-2.074c-.29-.796-.437-1.668-.437-2.617 0-.95.14-1.82.427-2.618a6.1 6.1 0 0 1 1.258-2.075c.55-.597 1.21-1.062 1.978-1.396A6.33 6.33 0 0 1 20.2 7.48c.944 0 1.8.17 2.571.508.77.338 1.425.803 1.96 1.393.538.59.95 1.28 1.244 2.065.294.786.44 1.63.44 2.532 0 .173-.01.385-.021.634h-8.985c.104 1.276.516 2.242 1.234 2.9l-.128-.032zm-4.575-6.134h6.189c-.067-1.09-.343-1.94-.828-2.551-.486-.61-1.203-.917-2.151-.917-.692 0-1.267.167-1.723.5a2.66 2.66 0 0 0-.99 1.273c-.21.538-.33 1.108-.497 1.695z\"\/><\/svg><\/a>\n <\/div>\n <\/div>\n\n <main>\n \n <section class=\"hero\" id=\"home\">\n <div class=\"container hero-grid\">\n\n \n <div class=\"hero-copy\">\n <div class=\"hero-badge reveal\"><span class=\"pulse-dot\"><\/span>Available for new projects \u2014 2026<\/div>\n <p class=\"label reveal\" style=\"transition-delay:90ms\">Digital Business Solutions<\/p>\n <h1 class=\"hero-title split\">We build businesses that <em>move forward.<\/em><\/h1>\n <p class=\"hero-desc reveal\" style=\"transition-delay:160ms\">\n Nexora is a full-service digital agency partnering with ambitious brands to design, build\n and scale digital products that outperform the market \u2014 and keep moving forward.\n <\/p>\n <div class=\"hero-actions reveal\" style=\"transition-delay:240ms\">\n <a href=\"#contact\" class=\"btn btn-solid\">\n Start a Project\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <a href=\"#projects\" class=\"btn btn-ghost\">\n Explore Our Work\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M6 13l6 6 6-6\"\/><\/svg>\n <\/a>\n <\/div>\n <div class=\"hero-trust reveal\" style=\"transition-delay:320ms\">\n <span class=\"stars\" aria-hidden=\"true\">\u2605\u2605\u2605\u2605\u2605<\/span>\n <span>4.9\/5 average rating from 35+ global clients<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"hero-visual reveal-scale\" style=\"transition-delay:200ms\" id=\"hero-visual\">\n <div class=\"core-scene\" id=\"core-scene\">\n <div class=\"visual-glow\"><\/div>\n <div class=\"ring ring-a\"><\/div>\n <div class=\"ring ring-b\"><\/div>\n <div class=\"ring-spin\"><\/div>\n <div class=\"orbit\"><\/div>\n <div class=\"orbit orbit-2\"><\/div>\n <div class=\"grid-floor\"><\/div>\n <div class=\"orb\"><\/div>\n\n \n <div class=\"panel panel-rev\">\n <span class=\"p-label\">Revenue Growth<\/span>\n <div class=\"bars\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\n <div class=\"p-value\">$4.2M <em>+212%<\/em><\/div>\n <\/div>\n\n \n <div class=\"panel panel-live\">\n <span class=\"live-ico\"><i><\/i><\/span>\n <div>\n <b>AURELIA \u2014 Live now<\/b>\n <span>checkout conversion +38%<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"metric-chips\">\n <div class=\"chip\"><b>98%<\/b><span>Client Satisfaction<\/span><\/div>\n <div class=\"chip\"><b>150+<\/b><span>Projects<\/span><\/div>\n <div class=\"chip\"><b>12+<\/b><span>Years Experience<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"scroll-cue\" aria-hidden=\"true\">\n <span>Scroll to explore<\/span>\n <i><\/i>\n <\/div>\n <\/section>\n\n \n <section class=\"trusted\" aria-label=\"Trusted by ambitious brands\">\n <div class=\"container\">\n <p class=\"label center\">Trusted by ambitious brands<\/p>\n <\/div>\n <div class=\"marquee\">\n <div class=\"marquee-track\">\n <div class=\"marquee-group\">\n <span class=\"brand b-serif\">Vertex<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-display\">Lumina<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-mono\">Altura<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-display\">Nexon<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-serif\">Orbit<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-mono\">PrimeLab<\/span><i class=\"sep\">\u2726<\/i>\n <\/div>\n <div class=\"marquee-group\" aria-hidden=\"true\">\n <span class=\"brand b-serif\">Vertex<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-display\">Lumina<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-mono\">Altura<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-display\">Nexon<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-serif\">Orbit<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-mono\">PrimeLab<\/span><i class=\"sep\">\u2726<\/i>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"about section\" id=\"about\">\n <div class=\"about-num\" aria-hidden=\"true\">01<\/div>\n <div class=\"container about-grid\">\n\n <div class=\"about-left\">\n <p class=\"label reveal\">Who We Are<\/p>\n <h2 class=\"split\" style=\"margin-top:26px\">\n Strategy, creativity and technology \u2014 combined into one <em>powerful business experience.<\/em>\n <\/h2>\n <\/div>\n\n <div class=\"about-right\">\n <p class=\"reveal\">\n Nexora was founded on a simple belief: a website should be more than a digital brochure \u2014 it\n should be your hardest-working employee. We blend sharp business strategy, award-level design\n and clean engineering to create digital experiences that attract, convert and retain.\n From first workshop to long after launch, we act as one team with yours.\n <\/p>\n <div class=\"about-stats reveal\" style=\"transition-delay:120ms\">\n <div class=\"stat\"><b>12+<\/b><span>Years Experience<\/span><\/div>\n <div class=\"stat\"><b>150+<\/b><span>Successful Projects<\/span><\/div>\n <div class=\"stat\"><b>35+<\/b><span>Global Clients<\/span><\/div>\n <\/div>\n <div style=\"margin-top:40px\" class=\"reveal\">\n <a href=\"#process\" class=\"link-btn\">\n See how we work\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"services section\" id=\"services\">\n <div class=\"container\">\n <div class=\"sec-head row\">\n <div>\n <p class=\"label\">What We Do<\/p>\n <h2 class=\"h2 split\">Full-service digital <em style=\"font:italic 400 1.02em var(--serif);background:linear-gradient(100deg,#8fb0ff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent\">capabilities<\/em><\/h2>\n <\/div>\n <p class=\"reveal\" style=\"max-width:380px\">\n Six disciplines. One integrated team. Everything your business needs to win online \u2014 under one roof.\n <\/p>\n <\/div>\n\n <div class=\"service-list\">\n \n <article class=\"service reveal\">\n <button class=\"service-head\" aria-expanded=\"false\">\n <span class=\"service-num\">01<\/span>\n <span class=\"service-title\">Business Website Development<\/span>\n <span class=\"service-meta\">Web \u00b7 CMS \u00b7 Performance<\/span>\n <span class=\"service-arrow\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/button>\n <div class=\"service-body\">\n <div class=\"service-inner\">\n <p>High-performance corporate and brand websites engineered to convert visitors into customers \u2014 clean code, SEO-ready architecture and buttery-smooth experiences on every device.<\/p>\n <div class=\"service-foot\">\n <div class=\"service-tags\"><span>Brand Websites<\/span><span>Corporate Portals<\/span><span>Headless CMS<\/span><\/div>\n <a href=\"#contact\" class=\"link-btn\">Explore service\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n \n <article class=\"service reveal\">\n <button class=\"service-head\" aria-expanded=\"false\">\n <span class=\"service-num\">02<\/span>\n <span class=\"service-title\">eCommerce Solutions<\/span>\n <span class=\"service-meta\">Storefront \u00b7 Payments \u00b7 Scale<\/span>\n <span class=\"service-arrow\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/button>\n <div class=\"service-body\">\n <div class=\"service-inner\">\n <p>End-to-end online stores with secure checkout, smart product architecture and payment integrations \u2014 built to scale from launch day to seven figures in annual revenue.<\/p>\n <div class=\"service-foot\">\n <div class=\"service-tags\"><span>Shopify Plus<\/span><span>Custom Stores<\/span><span>Subscriptions<\/span><\/div>\n <a href=\"#contact\" class=\"link-btn\">Explore service\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n \n <article class=\"service reveal\">\n <button class=\"service-head\" aria-expanded=\"false\">\n <span class=\"service-num\">03<\/span>\n <span class=\"service-title\">UI\/UX Design<\/span>\n <span class=\"service-meta\">Research \u00b7 Interface \u00b7 Systems<\/span>\n <span class=\"service-arrow\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/button>\n <div class=\"service-body\">\n <div class=\"service-inner\">\n <p>Research-driven interfaces that feel effortless. We design digital products people love to use \u2014 from rapid wireframes to pixel-perfect, developer-ready design systems.<\/p>\n <div class=\"service-foot\">\n <div class=\"service-tags\"><span>Product Design<\/span><span>Design Systems<\/span><span>Prototyping<\/span><\/div>\n <a href=\"#contact\" class=\"link-btn\">Explore service\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n \n <article class=\"service reveal\">\n <button class=\"service-head\" aria-expanded=\"false\">\n <span class=\"service-num\">04<\/span>\n <span class=\"service-title\">Digital Branding<\/span>\n <span class=\"service-meta\">Identity \u00b7 Strategy \u00b7 Voice<\/span>\n <span class=\"service-arrow\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/button>\n <div class=\"service-body\">\n <div class=\"service-inner\">\n <p>Identity systems, art direction and brand strategy that make your business unforgettable \u2014 consistent, magnetic and unmistakably yours across every touchpoint.<\/p>\n <div class=\"service-foot\">\n <div class=\"service-tags\"><span>Brand Identity<\/span><span>Art Direction<\/span><span>Guidelines<\/span><\/div>\n <a href=\"#contact\" class=\"link-btn\">Explore service\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n \n <article class=\"service reveal\">\n <button class=\"service-head\" aria-expanded=\"false\">\n <span class=\"service-num\">05<\/span>\n <span class=\"service-title\">SEO & Growth Strategy<\/span>\n <span class=\"service-meta\">Search \u00b7 Content \u00b7 CRO<\/span>\n <span class=\"service-arrow\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/button>\n <div class=\"service-body\">\n <div class=\"service-inner\">\n <p>Data-backed SEO, content strategy and conversion optimization that turn organic search into a predictable, compounding growth channel for your business.<\/p>\n <div class=\"service-foot\">\n <div class=\"service-tags\"><span>Technical SEO<\/span><span>Content Strategy<\/span><span>CRO<\/span><\/div>\n <a href=\"#contact\" class=\"link-btn\">Explore service\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n \n <article class=\"service reveal\">\n <button class=\"service-head\" aria-expanded=\"false\">\n <span class=\"service-num\">06<\/span>\n <span class=\"service-title\">Business Automation<\/span>\n <span class=\"service-meta\">CRM \u00b7 Workflows \u00b7 AI<\/span>\n <span class=\"service-arrow\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/button>\n <div class=\"service-body\">\n <div class=\"service-inner\">\n <p>Custom CRM pipelines, workflow automation and system integrations that remove manual work \u2014 letting your team focus on growth instead of spreadsheets.<\/p>\n <div class=\"service-foot\">\n <div class=\"service-tags\"><span>CRM Setup<\/span><span>Workflow Automation<\/span><span>API Integration<\/span><\/div>\n <a href=\"#contact\" class=\"link-btn\">Explore service\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"projects section\" id=\"projects\">\n <div class=\"container\">\n <div class=\"sec-head row\">\n <div>\n <p class=\"label\">Featured Work<\/p>\n <h2 class=\"h2 split\">Selected projects<\/h2>\n <\/div>\n <a href=\"#contact\" class=\"link-btn reveal\">\n Start your project\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n\n \n <article class=\"project\">\n <div class=\"p-num reveal-scale\" aria-hidden=\"true\">01<\/div>\n <div class=\"project-media reveal-scale\">\n <div class=\"p-art aurelia\">\n <span class=\"p-gl\"><\/span>\n <span class=\"p-word\">AURELIA<\/span>\n <span class=\"p-sub\">Est. 2016 \u2014 Milan \/ Paris<\/span>\n <\/div>\n <\/div>\n <div class=\"project-content\">\n <p class=\"label\">E-Commerce \u00b7 Branding<\/p>\n <h3 class=\"split\">AURELIA<span>Luxury Fashion Brand<\/span><\/h3>\n <p class=\"reveal\" style=\"transition-delay:120ms\">\n A high-fashion eCommerce experience with editorial storytelling, a 3D lookbook and a\n checkout flow that lifted online conversion by 41% in the first quarter.\n <\/p>\n <div class=\"project-meta reveal\" style=\"transition-delay:180ms\">\n <div><b>2025<\/b><span>Year<\/span><\/div>\n <div><b>+41%<\/b><span>Conversion<\/span><\/div>\n <div><b>Shopify Plus<\/b><span>Platform<\/span><\/div>\n <\/div>\n <a href=\"#contact\" class=\"btn btn-ghost btn-sm reveal\" style=\"transition-delay:240ms\">\n View Case Study\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/article>\n\n \n <article class=\"project flip\">\n <div class=\"p-num reveal-scale\" aria-hidden=\"true\">02<\/div>\n <div class=\"project-media reveal-scale\">\n <div class=\"p-art nova\">\n <span class=\"p-ring\"><\/span>\n <span class=\"p-orb\"><\/span>\n <span class=\"p-word\">NOVA<\/span>\n <span class=\"p-sub\">Technology Solutions \u2014 San Francisco<\/span>\n <\/div>\n <\/div>\n <div class=\"project-content\">\n <p class=\"label\">Web Platform \u00b7 UI\/UX<\/p>\n <h3 class=\"split\">NOVA<span>Technology Solutions<\/span><\/h3>\n <p class=\"reveal\" style=\"transition-delay:120ms\">\n A global platform redesign for a B2B technology leader \u2014 SaaS dashboards, a scalable\n design system and developer documentation used by 12,000+ teams worldwide.\n <\/p>\n <div class=\"project-meta reveal\" style=\"transition-delay:180ms\">\n <div><b>2025<\/b><span>Year<\/span><\/div>\n <div><b>12k+<\/b><span>Active Teams<\/span><\/div>\n <div><b>React<\/b><span>Stack<\/span><\/div>\n <\/div>\n <a href=\"#contact\" class=\"btn btn-ghost btn-sm reveal\" style=\"transition-delay:240ms\">\n View Case Study\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/article>\n\n \n <article class=\"project\">\n <div class=\"p-num reveal-scale\" aria-hidden=\"true\">03<\/div>\n <div class=\"project-media reveal-scale\">\n <div class=\"p-art verde\">\n <span class=\"p-gl\"><\/span>\n <span class=\"p-word\">VERDE<\/span>\n <span class=\"p-sub\">Modern Lifestyle \u2014 Copenhagen<\/span>\n <\/div>\n <\/div>\n <div class=\"project-content\">\n <p class=\"label\">Branding \u00b7 Web Design<\/p>\n <h3 class=\"split\">VERDE<span>Modern Lifestyle Brand<\/span><\/h3>\n <p class=\"reveal\" style=\"transition-delay:120ms\">\n A sustainable lifestyle brand with a bold digital identity, immersive storytelling and a\n subscription commerce engine \u2014 2M+ impressions in its first launch week.\n <\/p>\n <div class=\"project-meta reveal\" style=\"transition-delay:180ms\">\n <div><b>2024<\/b><span>Year<\/span><\/div>\n <div><b>2M+<\/b><span>Launch Impressions<\/span><\/div>\n <div><b>Headless<\/b><span>Architecture<\/span><\/div>\n <\/div>\n <a href=\"#contact\" class=\"btn btn-ghost btn-sm reveal\" style=\"transition-delay:240ms\">\n View Case Study\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n\n \n <section class=\"impact section\" id=\"impact\">\n <div class=\"container\">\n <p class=\"label center reveal\">The Nexora Effect<\/p>\n <h2 class=\"impact-title split\" style=\"margin-top:26px\">\n Good design looks better.<br \/>\n <em>Smart design performs better.<\/em>\n <\/h2>\n\n <div class=\"impact-stats\">\n <div class=\"impact-stat reveal\">\n <b class=\"count\" data-count=\"150\" data-suffix=\"+\">0<\/b>\n <span>Projects Delivered<\/span>\n <\/div>\n <div class=\"impact-stat reveal\" style=\"transition-delay:110ms\">\n <b class=\"count\" data-count=\"98\" data-suffix=\"%\">0<\/b>\n <span>Client Satisfaction<\/span>\n <\/div>\n <div class=\"impact-stat reveal\" style=\"transition-delay:220ms\">\n <b class=\"count\" data-count=\"35\" data-suffix=\"+\">0<\/b>\n <span>Global Clients<\/span>\n <\/div>\n <div class=\"impact-stat reveal\" style=\"transition-delay:330ms\">\n <b class=\"count\" data-count=\"12\" data-suffix=\"+\">0<\/b>\n <span>Years Experience<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"process section\" id=\"process\">\n <div class=\"container\">\n <div class=\"sec-head center\" style=\"text-align:center; margin-inline:auto\">\n <p class=\"label center\" style=\"justify-content:center\">How We Work<\/p>\n <h2 class=\"h2 split\">Our process<\/h2>\n <p>A proven five-step method that turns ambiguity into a launched, performing product.<\/p>\n <\/div>\n\n <div class=\"process-wrap reveal\">\n <div class=\"process-line\"><i id=\"process-fill\"><\/i><\/div>\n <div class=\"process-grid\">\n <article class=\"step\">\n <div class=\"step-num\">01<\/div>\n <div>\n <h3>Discover<\/h3>\n <p>Deep-dive workshops and research to uncover your audience, goals and untapped opportunities.<\/p>\n <\/div>\n <\/article>\n <article class=\"step\">\n <div class=\"step-num\">02<\/div>\n <div>\n <h3>Strategize<\/h3>\n <p>A clear roadmap \u2014 positioning, information architecture and KPIs that define success.<\/p>\n <\/div>\n <\/article>\n <article class=\"step\">\n <div class=\"step-num\">03<\/div>\n <div>\n <h3>Design<\/h3>\n <p>Interfaces and identities crafted with intent, tested and refined to pixel perfection.<\/p>\n <\/div>\n <\/article>\n <article class=\"step\">\n <div class=\"step-num\">04<\/div>\n <div>\n <h3>Develop<\/h3>\n <p>Clean, scalable code with performance, security and accessibility baked in from day one.<\/p>\n <\/div>\n <\/article>\n <article class=\"step\">\n <div class=\"step-num\">05<\/div>\n <div>\n <h3>Launch<\/h3>\n <p>Deployment, QA and optimization \u2014 then we keep measuring and growing together.<\/p>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"why section\" id=\"why\">\n <div class=\"container why-grid\">\n <div class=\"why-left\">\n <p class=\"label reveal\">Why Choose Us<\/p>\n <h2 class=\"h2 split\" style=\"margin-top:24px\">Why brands choose Nexora<\/h2>\n <p class=\"reveal\" style=\"transition-delay:140ms\">\n We're not a vendor \u2014 we're a growth partner. Every engagement is led by senior strategists\n and measured against the metrics that matter to your P&L.\n <\/p>\n <a href=\"#contact\" class=\"link-btn reveal\" style=\"transition-delay:200ms\">\n Start a project\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n\n <div class=\"benefit-list\">\n <div class=\"benefit reveal\">\n <span class=\"b-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><circle cx=\"12\" cy=\"12\" r=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"1\"\/><\/svg>\n <\/span>\n <h3>Strategic Thinking<\/h3>\n <p>Every pixel tied to a business objective \u2014 no decoration without direction.<\/p>\n <\/div>\n <div class=\"benefit reveal\" style=\"transition-delay:80ms\">\n <span class=\"b-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19l7-7 3 3-7 7-3-3z\"\/><path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"\/><path d=\"M2 2l7.586 7.586\"\/><circle cx=\"11\" cy=\"11\" r=\"2\"\/><\/svg>\n <\/span>\n <h3>Premium Design<\/h3>\n <p>International-grade aesthetics that make your brand impossible to ignore.<\/p>\n <\/div>\n <div class=\"benefit reveal\" style=\"transition-delay:160ms\">\n <span class=\"b-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>\n <\/span>\n <h3>Clean Development<\/h3>\n <p>Semantic, documented, maintainable code your future team will thank you for.<\/p>\n <\/div>\n <div class=\"benefit reveal\" style=\"transition-delay:240ms\">\n <span class=\"b-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>\n <\/span>\n <h3>Mobile First<\/h3>\n <p>Designed for the pocket first \u2014 70% of your customers are already there.<\/p>\n <\/div>\n <div class=\"benefit reveal\" style=\"transition-delay:320ms\">\n <span class=\"b-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>\n <\/span>\n <h3>Fast Performance<\/h3>\n <p>Sub-second loads and 90+ Lighthouse scores \u2014 speed is a conversion feature.<\/p>\n <\/div>\n <div class=\"benefit reveal\" style=\"transition-delay:400ms\">\n <span class=\"b-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\n <\/span>\n <h3>Long-Term Support<\/h3>\n <p>Monitoring, maintenance and continuous improvement long after launch day.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"testimonials section\" id=\"testimonials\">\n <div class=\"container\">\n <div class=\"sec-head center\" style=\"text-align:center; margin-inline:auto\">\n <p class=\"label center\" style=\"justify-content:center\">Client Voices<\/p>\n <h2 class=\"h2 split\">What our clients say<\/h2>\n <\/div>\n\n <div class=\"t-slider reveal\" id=\"t-slider\">\n <div class=\"t-track\" id=\"t-track\">\n\n <figure class=\"t-slide\">\n <div class=\"t-quote-mark\" aria-hidden=\"true\">\u201c<\/div>\n <blockquote>Nexora rebuilt our entire digital presence. Revenue from organic search tripled within six months \u2014 they don't just design, they engineer growth.<\/blockquote>\n <figcaption class=\"t-person\">\n <span class=\"t-avatar\" style=\"background:linear-gradient(135deg,#4f7cff,#2a8cff)\">SM<\/span>\n <span><b>Sarah Mitchell<\/b><span>CEO \u00b7 Vertex Industries<\/span><\/span>\n <\/figcaption>\n <\/figure>\n\n <figure class=\"t-slide\">\n <div class=\"t-quote-mark\" aria-hidden=\"true\">\u201c<\/div>\n <blockquote>The most strategic team we've worked with. Every pixel had a purpose, every decision tied to a measurable business goal.<\/blockquote>\n <figcaption class=\"t-person\">\n <span class=\"t-avatar\" style=\"background:linear-gradient(135deg,#7a5cff,#c084fc)\">DR<\/span>\n <span><b>Daniel Reyes<\/b><span>Founder \u00b7 Lumina Labs<\/span><\/span>\n <\/figcaption>\n <\/figure>\n\n <figure class=\"t-slide\">\n <div class=\"t-quote-mark\" aria-hidden=\"true\">\u201c<\/div>\n <blockquote>Our new platform paid for itself in 90 days. Conversion rate up 214%, support tickets down by half. The numbers speak for themselves.<\/blockquote>\n <figcaption class=\"t-person\">\n <span class=\"t-avatar\" style=\"background:linear-gradient(135deg,#0ea5a4,#38e1ff)\">AH<\/span>\n <span><b>Amira Hassan<\/b><span>COO \u00b7 Altura Group<\/span><\/span>\n <\/figcaption>\n <\/figure>\n\n <figure class=\"t-slide\">\n <div class=\"t-quote-mark\" aria-hidden=\"true\">\u201c<\/div>\n <blockquote>They translated our brand into something the world finally sees. The launch generated 2M impressions in the first week \u2014 our board was stunned.<\/blockquote>\n <figcaption class=\"t-person\">\n <span class=\"t-avatar\" style=\"background:linear-gradient(135deg,#2e5bff,#8fb0ff)\">EP<\/span>\n <span><b>Elena Petrova<\/b><span>Director \u00b7 Orbit Capital<\/span><\/span>\n <\/figcaption>\n <\/figure>\n\n <\/div>\n\n <div class=\"t-controls\">\n <button class=\"t-btn\" id=\"t-prev\" aria-label=\"Previous testimonial\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M11 18l-6-6 6-6\"\/><\/svg>\n <\/button>\n <div class=\"t-dots\" id=\"t-dots\" role=\"tablist\" aria-label=\"Testimonial slides\"><\/div>\n <button class=\"t-btn\" id=\"t-next\" aria-label=\"Next testimonial\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"cta section\" id=\"cta\">\n <div class=\"cta-blob b1\" aria-hidden=\"true\"><\/div>\n <div class=\"cta-blob b2\" aria-hidden=\"true\"><\/div>\n <div class=\"cta-blob b3\" aria-hidden=\"true\"><\/div>\n <div class=\"container cta-inner\">\n <p class=\"label center reveal\">Start Your Project<\/p>\n <h2 class=\"cta-title split\">Ready to build something <em>remarkable?<\/em><\/h2>\n <p class=\"reveal\" style=\"transition-delay:150ms\">\n Let's transform your business idea into a powerful digital experience \u2014 planned with\n strategy, designed with intent and built to perform.\n <\/p>\n <div class=\"cta-actions reveal\" style=\"transition-delay:230ms\">\n <a href=\"#contact\" class=\"btn btn-solid\">\n Start Your Project\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <a href=\"#contact\" class=\"btn btn-ghost\">Contact Us<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"contact section\" id=\"contact\">\n <div class=\"container\">\n <div class=\"sec-head\">\n <p class=\"label reveal\">Contact<\/p>\n <h2 class=\"h2 split\">Let's start a conversation<\/h2>\n <\/div>\n\n <div class=\"contact-grid\">\n \n <div class=\"contact-info\">\n <h3 class=\"reveal\">We'd love to hear from you.<\/h3>\n <p class=\"reveal\" style=\"transition-delay:100ms\">\n Tell us about your project, your goals and your timeline. A senior strategist \u2014\n not a sales bot \u2014 will reply within one business day.\n <\/p>\n\n <div class=\"c-item reveal\">\n <span class=\"c-ico\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"3\"\/><path d=\"m2 7 10 6L22 7\"\/><\/svg>\n <\/span>\n <div>\n <span class=\"c-label\">Email<\/span>\n <a href=\"mailto:hello@nexora.studio\" class=\"c-value\">hello@nexora.studio<\/a>\n <\/div>\n <\/div>\n <div class=\"c-item reveal\" style=\"transition-delay:60ms\">\n <span class=\"c-ico\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n <\/span>\n <div>\n <span class=\"c-label\">Phone<\/span>\n <a href=\"tel:+14155550132\" class=\"c-value\">+1 (415) 555-0132<\/a>\n <\/div>\n <\/div>\n <div class=\"c-item reveal\" style=\"transition-delay:120ms\">\n <span class=\"c-ico\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n <\/span>\n <div>\n <span class=\"c-label\">Location<\/span>\n <span class=\"c-value\">88 King Street, San Francisco, CA<\/span>\n <\/div>\n <\/div>\n <div class=\"c-item reveal\" style=\"transition-delay:180ms\">\n <span class=\"c-ico\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3 3\"\/><\/svg>\n <\/span>\n <div>\n <span class=\"c-label\">Business Hours<\/span>\n <span class=\"c-value\">Mon \u2013 Fri \u00b7 9:00 \u2014 18:00 (PST)<\/span>\n <\/div>\n <\/div>\n\n <div class=\"c-socials reveal\" style=\"transition-delay:240ms\">\n <a href=\"#\" class=\"s-btn\" aria-label=\"LinkedIn\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"X (Twitter)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"Instagram\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><rect x=\"2.5\" y=\"2.5\" width=\"19\" height=\"19\" rx=\"5.5\"\/><circle cx=\"12\" cy=\"12\" r=\"4.2\"\/><circle cx=\"17.6\" cy=\"6.4\" r=\".9\" fill=\"currentColor\" stroke=\"none\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"Behance\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.08 5.406c.978 0 1.812.122 2.52.366.708.244 1.283.6 1.752 1.037.462.449.8.977 1.018 1.62.214.616.322 1.31.322 2.065 0 1.163-.292 2.154-.877 2.973-.59.818-1.46 1.414-2.603 1.789.76.351 1.36.852 1.807 1.503.446.65.674 1.434.674 2.35 0 .809-.157 1.52-.47 2.129-.315.61-.745 1.114-1.294 1.51a5.6 5.6 0 0 1-1.848.905c-.686.207-1.4.31-2.148.31H0V5.406h7.08zm-.416 6.845c.563 0 1.04-.118 1.431-.354.392-.236.686-.537.884-.904.198-.367.296-.774.296-1.222 0-.655-.231-1.163-.695-1.52-.462-.354-1.083-.535-1.862-.535H3.22v4.535h3.444zm.25 6.657c.856 0 1.498-.164 1.927-.496.43-.332.643-.891.643-1.678 0-.537-.117-.972-.354-1.307a2.03 2.03 0 0 0-.914-.719 3.08 3.08 0 0 0-1.213-.232H3.22v4.432h3.694zM21.47 18.48c.545.583 1.35.875 2.408.875.715 0 1.32-.169 1.816-.506.494-.338.79-.697.882-1.078h2.42c-.427 1.48-1.18 2.527-2.26 3.145-1.078.618-2.318.927-3.72.927-1.045 0-1.979-.168-2.8-.505a5.78 5.78 0 0 1-2.06-1.393 6.05 6.05 0 0 1-1.28-2.074c-.29-.796-.437-1.668-.437-2.617 0-.95.14-1.82.427-2.618a6.1 6.1 0 0 1 1.258-2.075c.55-.597 1.21-1.062 1.978-1.396A6.33 6.33 0 0 1 20.2 7.48c.944 0 1.8.17 2.571.508.77.338 1.425.803 1.96 1.393.538.59.95 1.28 1.244 2.065.294.786.44 1.63.44 2.532 0 .173-.01.385-.021.634h-8.985c.104 1.276.516 2.242 1.234 2.9l-.128-.032zm-4.575-6.134h6.189c-.067-1.09-.343-1.94-.828-2.551-.486-.61-1.203-.917-2.151-.917-.692 0-1.267.167-1.723.5a2.66 2.66 0 0 0-.99 1.273c-.21.538-.33 1.108-.497 1.695z\"\/><\/svg><\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"form-card reveal-scale\" style=\"transition-delay:120ms\">\n <form id=\"contact-form\" novalidate>\n <div class=\"f-row\">\n <div class=\"field\">\n <label for=\"f-name\">Full Name<\/label>\n <input type=\"text\" id=\"f-name\" name=\"name\" placeholder=\"Jane Cooper\" autocomplete=\"name\" \/>\n <span class=\"err\"><\/span>\n <\/div>\n <div class=\"field\">\n <label for=\"f-email\">Email Address<\/label>\n <input type=\"email\" id=\"f-email\" name=\"email\" placeholder=\"jane@company.com\" autocomplete=\"email\" \/>\n <span class=\"err\"><\/span>\n <\/div>\n <\/div>\n <div class=\"f-row\" style=\"margin-top:20px\">\n <div class=\"field\">\n <label for=\"f-phone\">Phone Number<\/label>\n <input type=\"tel\" id=\"f-phone\" name=\"phone\" placeholder=\"+1 (555) 000-0000\" autocomplete=\"tel\" \/>\n <span class=\"err\"><\/span>\n <\/div>\n <div class=\"field\">\n <label for=\"f-service\">Select Service<\/label>\n <select id=\"f-service\" name=\"service\">\n <option value=\"\" selected disabled>Choose a service\u2026<\/option>\n <option>Business Website Development<\/option>\n <option>eCommerce Solutions<\/option>\n <option>UI\/UX Design<\/option>\n <option>Digital Branding<\/option>\n <option>SEO & Growth Strategy<\/option>\n <option>Business Automation<\/option>\n <\/select>\n <span class=\"err\"><\/span>\n <\/div>\n <\/div>\n <div class=\"f-row\" style=\"margin-top:20px\">\n <div class=\"field\">\n <label for=\"f-budget\">Project Budget<\/label>\n <select id=\"f-budget\" name=\"budget\">\n <option value=\"\" selected disabled>Select a range\u2026<\/option>\n <option>Under $5,000<\/option>\n <option>$5,000 \u2013 $15,000<\/option>\n <option>$15,000 \u2013 $50,000<\/option>\n <option>$50,000+<\/option>\n <\/select>\n <span class=\"err\"><\/span>\n <\/div>\n <\/div>\n <div class=\"f-row\" style=\"margin-top:20px\">\n <div class=\"field\">\n <label for=\"f-message\">Message<\/label>\n <textarea id=\"f-message\" name=\"message\" placeholder=\"Tell us about your project, goals and timeline\u2026\"><\/textarea>\n <span class=\"err\"><\/span>\n <\/div>\n <\/div>\n <button type=\"submit\" class=\"btn btn-solid form-submit\">\n Send Message\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m22 2-7 20-4-9-9-4 20-7z\"\/><path d=\"M22 2 11 13\"\/><\/svg>\n <\/button>\n <\/form>\n\n <div class=\"form-success\" id=\"form-success\" hidden>\n <div class=\"ok\">\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#38e1ff\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\n <\/div>\n <h3>Message sent successfully!<\/h3>\n <p id=\"success-text\">Thank you \u2014 our team will get back to you within 24 hours.<\/p>\n <button class=\"btn btn-ghost btn-sm\" id=\"form-reset\" style=\"margin-inline:auto\">Send another message<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"footer\">\n <div class=\"container\">\n <div class=\"footer-top\">\n <a href=\"#home\" class=\"logo footer-logo\">NEXO<b>RA<\/b><i><\/i><\/a>\n <p>Strategy, creativity and technology \u2014 combined into one powerful business experience. Digital agency for ambitious brands.<\/p>\n <\/div>\n\n <div class=\"footer-wordmark\" aria-hidden=\"true\">NEXORA<\/div>\n\n <div class=\"footer-cols\">\n <div class=\"f-col\">\n <h4>Company<\/h4>\n <ul>\n <li><a href=\"#about\">About<\/a><\/li>\n <li><a href=\"#services\">Services<\/a><\/li>\n <li><a href=\"#projects\">Projects<\/a><\/li>\n <li><a href=\"#contact\">Careers<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"f-col\">\n <h4>Services<\/h4>\n <ul>\n <li><a href=\"#services\">Web Development<\/a><\/li>\n <li><a href=\"#services\">eCommerce<\/a><\/li>\n <li><a href=\"#services\">Branding<\/a><\/li>\n <li><a href=\"#services\">SEO<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"f-col\">\n <h4>Resources<\/h4>\n <ul>\n <li><a href=\"#\">Blog<\/a><\/li>\n <li><a href=\"#\">FAQs<\/a><\/li>\n <li><a href=\"#\">Privacy Policy<\/a><\/li>\n <li><a href=\"#\">Terms<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"f-col\">\n <h4>Follow<\/h4>\n <ul>\n <li><a href=\"#\">LinkedIn<\/a><\/li>\n <li><a href=\"#\">X \/ Twitter<\/a><\/li>\n <li><a href=\"#\">Instagram<\/a><\/li>\n <li><a href=\"#\">Behance<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"footer-bottom\">\n <p>\u00a9 <span id=\"year\">2026<\/span> NEXORA. All Rights Reserved.<\/p>\n <div class=\"fb-links\">\n <a href=\"#\" class=\"s-btn\" aria-label=\"LinkedIn\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"X (Twitter)\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"Instagram\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><rect x=\"2.5\" y=\"2.5\" width=\"19\" height=\"19\" rx=\"5.5\"\/><circle cx=\"12\" cy=\"12\" r=\"4.2\"\/><circle cx=\"17.6\" cy=\"6.4\" r=\".9\" fill=\"currentColor\" stroke=\"none\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"Behance\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.08 5.406c.978 0 1.812.122 2.52.366.708.244 1.283.6 1.752 1.037.462.449.8.977 1.018 1.62.214.616.322 1.31.322 2.065 0 1.163-.292 2.154-.877 2.973-.59.818-1.46 1.414-2.603 1.789.76.351 1.36.852 1.807 1.503.446.65.674 1.434.674 2.35 0 .809-.157 1.52-.47 2.129-.315.61-.745 1.114-1.294 1.51a5.6 5.6 0 0 1-1.848.905c-.686.207-1.4.31-2.148.31H0V5.406h7.08zm-.416 6.845c.563 0 1.04-.118 1.431-.354.392-.236.686-.537.884-.904.198-.367.296-.774.296-1.222 0-.655-.231-1.163-.695-1.52-.462-.354-1.083-.535-1.862-.535H3.22v4.535h3.444zm.25 6.657c.856 0 1.498-.164 1.927-.496.43-.332.643-.891.643-1.678 0-.537-.117-.972-.354-1.307a2.03 2.03 0 0 0-.914-.719 3.08 3.08 0 0 0-1.213-.232H3.22v4.432h3.694zM21.47 18.48c.545.583 1.35.875 2.408.875.715 0 1.32-.169 1.816-.506.494-.338.79-.697.882-1.078h2.42c-.427 1.48-1.18 2.527-2.26 3.145-1.078.618-2.318.927-3.72.927-1.045 0-1.979-.168-2.8-.505a5.78 5.78 0 0 1-2.06-1.393 6.05 6.05 0 0 1-1.28-2.074c-.29-.796-.437-1.668-.437-2.617 0-.95.14-1.82.427-2.618a6.1 6.1 0 0 1 1.258-2.075c.55-.597 1.21-1.062 1.978-1.396A6.33 6.33 0 0 1 20.2 7.48c.944 0 1.8.17 2.571.508.77.338 1.425.803 1.96 1.393.538.59.95 1.28 1.244 2.065.294.786.44 1.63.44 2.532 0 .173-.01.385-.021.634h-8.985c.104 1.276.516 2.242 1.234 2.9l-.128-.032zm-4.575-6.134h6.189c-.067-1.09-.343-1.94-.828-2.551-.486-.61-1.203-.917-2.151-.917-.692 0-1.267.167-1.723.5a2.66 2.66 0 0 0-.99 1.273c-.21.538-.33 1.108-.497 1.695z\"\/><\/svg><\/a>\n <button class=\"to-top-link\" id=\"to-top\" type=\"button\">Back to top \u2191<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n \n <button class=\"back-top\" id=\"back-top\" aria-label=\"Back to top\">\n <svg class=\"ring\" viewBox=\"0 0 60 60\" aria-hidden=\"true\">\n <defs>\n <linearGradient id=\"ringGrad\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n <stop offset=\"0\" stop-color=\"#4f7cff\" \/>\n <stop offset=\"1\" stop-color=\"#38e1ff\" \/>\n <\/linearGradient>\n <\/defs>\n <circle class=\"track\" cx=\"30\" cy=\"30\" r=\"26\" \/>\n <circle class=\"fill\" id=\"ring-path\" cx=\"30\" cy=\"30\" r=\"26\" \/>\n <\/svg>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19V5M6 11l6-6 6 6\"\/><\/svg>\n <\/button>\n\n <script>\n \/* ============================================================\n NEXORA \u2014 INTERACTION ENGINE (Vanilla JS)\n ============================================================ *\/\n (() => {\n 'use strict';\n\n const $ = (s, c = document) => c.querySelector(s);\n const $$ = (s, c = document) => [...c.querySelectorAll(s)];\n const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;\n const smooth = (top) => scrollTo({ top, behavior: reduced ? 'auto' : 'smooth' });\n\n \/* ---------- 01. SCROLL: progress bar, header state, back-to-top ring, process line ---------- *\/\n const bar = $('#scroll-bar');\n const header = $('#site-header');\n const backTop = $('#back-top');\n const ringPath = $('#ring-path');\n const procSec = $('#process');\n const procFill = $('#process-fill');\n const RING = 2 * Math.PI * 26; \/\/ r = 26 (viewBox 60)\n ringPath.style.strokeDasharray = RING;\n\n let ticking = false;\n function onScrollUpdate() {\n const st = scrollY;\n const max = document.documentElement.scrollHeight - innerHeight;\n const p = max > 0 ? st \/ max : 0;\n\n bar.style.transform = `scaleX(${p})`;\n ringPath.style.strokeDashoffset = RING * (1 - p);\n header.classList.toggle('scrolled', st > 40);\n backTop.classList.toggle('show', st > 600);\n\n \/\/ Process timeline \u2014 animated connecting line follows scroll\n if (procSec && procFill) {\n const r = procSec.getBoundingClientRect();\n const progress = Math.min(Math.max((innerHeight * 0.72 - r.top) \/ r.height, 0), 1);\n const vertical = matchMedia('(max-width:1000px)').matches;\n procFill.style.transform = vertical ? `scaleY(${progress})` : `scaleX(${progress})`;\n }\n ticking = false;\n }\n addEventListener('scroll', () => {\n if (!ticking) { requestAnimationFrame(onScrollUpdate); ticking = true; }\n }, { passive: true });\n onScrollUpdate();\n\n backTop.addEventListener('click', () => smooth(0));\n $('#to-top').addEventListener('click', () => smooth(0));\n\n \/* ---------- 02. MOBILE MENU ---------- *\/\n const burger = $('#burger');\n const menu = $('#mobile-menu');\n function setMenu(open) {\n menu.classList.toggle('open', open);\n burger.classList.toggle('active', open);\n burger.setAttribute('aria-expanded', open);\n document.body.classList.toggle('no-scroll', open);\n }\n burger.addEventListener('click', () => setMenu(!menu.classList.contains('open')));\n $$('.m-link, .m-cta, .m-social a', menu).forEach(a =>\n a.addEventListener('click', () => setMenu(false))\n );\n\n \/* ---------- 03. WORD-LEVEL TEXT REVEAL ---------- *\/\n \/\/ Wraps every word of [.split] headings in <span class=\"word\"><span class=\"w-inner\">\u2026\n function splitWords(root) {\n const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);\n const nodes = [];\n while (walker.nextNode()) nodes.push(walker.currentNode);\n let i = 0;\n nodes.forEach(node => {\n const frag = document.createDocumentFragment();\n node.textContent.split(\/(\\s+)\/).forEach(part => {\n if (!part) return;\n if (\/^\\s+$\/.test(part)) { frag.appendChild(document.createTextNode(' ')); return; }\n const w = document.createElement('span');\n w.className = 'word';\n w.style.setProperty('--i', i++);\n const inner = document.createElement('span');\n inner.className = 'w-inner';\n inner.textContent = part;\n w.appendChild(inner);\n frag.appendChild(w);\n });\n node.parentNode.replaceChild(frag, node);\n });\n }\n $$('.split').forEach(splitWords);\n\n \/* ---------- 04. INTERSECTION OBSERVER \u2014 scroll animations ---------- *\/\n const io = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }\n });\n }, { threshold: 0.15, rootMargin: '0px 0px -7% 0px' });\n $$('.reveal, .reveal-scale, .split').forEach(el => io.observe(el));\n\n \/* ---------- 05. ANIMATED NUMBER COUNTERS ---------- *\/\n const counterIO = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (!e.isIntersecting) return;\n counterIO.unobserve(e.target);\n const el = e.target;\n const target = +el.dataset.count;\n const suffix = el.dataset.suffix || '';\n const duration = 2100;\n const t0 = performance.now();\n (function tick(now) {\n const p = Math.min((now - t0) \/ duration, 1);\n const ease = 1 - Math.pow(1 - p, 4); \/\/ easeOutQuart\n el.textContent = Math.round(target * ease) + suffix;\n if (p < 1) requestAnimationFrame(tick);\n })(t0);\n });\n }, { threshold: 0.5 });\n $$('[data-count]').forEach(el => counterIO.observe(el));\n\n \/* ---------- 06. SERVICES ACCORDION ---------- *\/\n $$('.service').forEach(item => {\n const head = $('.service-head', item);\n head.addEventListener('click', () => {\n const isOpen = item.classList.contains('open');\n $$('.service.open').forEach(o => {\n o.classList.remove('open');\n $('.service-head', o).setAttribute('aria-expanded', 'false');\n });\n if (!isOpen) {\n item.classList.add('open');\n head.setAttribute('aria-expanded', 'true');\n }\n });\n });\n\n \/* ---------- 07. TESTIMONIAL SLIDER ---------- *\/\n const slider = $('#t-slider');\n const track = $('#t-track');\n const slides = $$('.t-slide', slider);\n const dotsBox = $('#t-dots');\n let idx = 0, timer;\n\n slides.forEach((_, i) => {\n const b = document.createElement('button');\n b.className = 'dot' + (i === 0 ? ' active' : '');\n b.setAttribute('aria-label', `Go to testimonial ${i + 1}`);\n b.addEventListener('click', () => { go(i); restart(); });\n dotsBox.appendChild(b);\n });\n const dots = $$('.dot', dotsBox);\n\n function go(i) {\n idx = (i + slides.length) % slides.length;\n track.style.transform = `translateX(-${idx * 100}%)`;\n dots.forEach((d, j) => d.classList.toggle('active', j === idx));\n }\n function restart() {\n clearInterval(timer);\n timer = setInterval(() => go(idx + 1), 5000); \/\/ auto-slide every 5s\n }\n $('#t-prev').addEventListener('click', () => { go(idx - 1); restart(); });\n $('#t-next').addEventListener('click', () => { go(idx + 1); restart(); });\n slider.addEventListener('mouseenter', () => clearInterval(timer));\n slider.addEventListener('mouseleave', restart);\n\n \/\/ Touch swipe support\n let touchX = 0;\n slider.addEventListener('touchstart', e => { touchX = e.touches[0].clientX; clearInterval(timer); }, { passive: true });\n slider.addEventListener('touchend', e => {\n const dx = e.changedTouches[0].clientX - touchX;\n if (Math.abs(dx) > 46) go(idx + (dx < 0 ? 1 : -1));\n restart();\n }, { passive: true });\n restart();\n\n \/* ---------- 08. SCROLLSPY \u2014 active nav link ---------- *\/\n const navLinks = $$('.nav-link');\n const spy = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n navLinks.forEach(l =>\n l.classList.toggle('active', l.getAttribute('href') === '#' + e.target.id)\n );\n }\n });\n }, { rootMargin: '-40% 0px -55% 0px' });\n $$('section[id]').forEach(s => spy.observe(s));\n\n \/* ---------- 09. HERO VISUAL \u2014 subtle 3D tilt ---------- *\/\n const visual = $('#hero-visual');\n const scene = $('#core-scene');\n if (matchMedia('(hover:hover) and (pointer:fine)').matches && !reduced && scene) {\n visual.addEventListener('mousemove', e => {\n const r = visual.getBoundingClientRect();\n const x = (e.clientX - r.left) \/ r.width - 0.5;\n const y = (e.clientY - r.top) \/ r.height - 0.5;\n scene.style.transition = 'transform .08s linear';\n scene.style.transform = `rotateY(${x * 9}deg) rotateX(${-y * 9}deg)`;\n });\n visual.addEventListener('mouseleave', () => {\n scene.style.transition = 'transform .9s cubic-bezier(.22,1,.36,1)';\n scene.style.transform = '';\n });\n }\n\n \/* ---------- 10. CONTACT FORM VALIDATION ---------- *\/\n const form = $('#contact-form');\n const fields = {\n name: $('#f-name'),\n email: $('#f-email'),\n phone: $('#f-phone'),\n service: $('#f-service'),\n budget: $('#f-budget'),\n message: $('#f-message')\n };\n const validators = {\n name: v => v.trim().length >= 2 || 'Please enter your full name.',\n email: v => \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/.test(v.trim()) || 'Please enter a valid email address.',\n phone: v => \/^[+()\\-.\\s\\d]{7,20}$\/.test(v.trim()) || 'Please enter a valid phone number.',\n service: v => v !== '' || 'Please select a service.',\n budget: v => v !== '' || 'Please select a budget range.',\n message: v => v.trim().length >= 10 || 'Message must be at least 10 characters.'\n };\n const validate = key => validators[key](fields[key].value);\n function setError(input, msg) {\n const field = input.closest('.field');\n field.classList.toggle('error', !!msg);\n $('.err', field).textContent = msg || '';\n }\n \/\/ Live re-validation once a field has been flagged\n Object.keys(fields).forEach(key => {\n const input = fields[key];\n input.addEventListener('blur', () => setError(input, validate(key)));\n input.addEventListener('input', () => {\n if (input.closest('.field').classList.contains('error')) setError(input, validate(key));\n });\n });\n\n form.addEventListener('submit', e => {\n e.preventDefault();\n let ok = true;\n Object.keys(fields).forEach(key => {\n const msg = validate(key);\n setError(fields[key], msg);\n if (msg) ok = false;\n });\n if (!ok) return;\n \/\/ Simulated successful submission\n $('#success-text').textContent =\n `Thank you, ${fields.name.value.trim().split(' ')[0]}! Your message has been received \u2014 a senior strategist will reply within 24 hours.`;\n form.hidden = true;\n $('#form-success').hidden = false;\n });\n $('#form-reset').addEventListener('click', () => {\n form.reset();\n $$('.field', form).forEach(f => f.classList.remove('error'));\n form.hidden = false;\n $('#form-success').hidden = true;\n });\n\n \/* ---------- 11. MISC ---------- *\/\n \/\/ Footer year\n $('#year').textContent = new Date().getFullYear();\n \/\/ Neutralize placeholder links\n $$('a[href=\"#\"]').forEach(a => a.addEventListener('click', e => e.preventDefault()));\n })();\n <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NEXORA \u2014 Digital Business Agency NEXORA Home About Services Projects Process Testimonials Contact Let’s Talk 01Home 02About 03Services 04Projects 05Process […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","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":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","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-684","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/comments?post=684"}],"version-history":[{"count":4,"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/684\/revisions"}],"predecessor-version":[{"id":688,"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/684\/revisions\/688"}],"wp:attachment":[{"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/media?parent=684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\n\n\n \n \n \n \n NEXORA \u2014 Digital Business Agency<\/title>\n <link rel=\"icon\" href=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%2306070c'\/%3E%3Cpath d='M16 18h11a9 9 0 0 1 0 18h-5v10h-6z' fill='%234f7cff'\/%3E%3Ccircle cx='46' cy='44' r='5' fill='%2338e1ff'\/%3E%3C\/svg%3E\" \/>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap\" rel=\"stylesheet\" \/>\n\n <style>\n \/* ============================================================\n NEXORA \u2014 DESIGN SYSTEM\n Palette: deep charcoal \/ electric blue \/ white\n ============================================================ *\/\n\n \/* ---------- 01. TOKENS & RESET ---------- *\/\n :root{\n --bg: #05060a;\n --bg-2: #0a0c14;\n --surface: rgba(255,255,255,.03);\n --border: rgba(255,255,255,.08);\n --blue: #4f7cff;\n --blue-deep: #2e5bff;\n --cyan: #38e1ff;\n --white: #f5f7ff;\n --muted: #9aa1b4;\n --danger: #ff6b8a;\n --display: 'Space Grotesk', sans-serif;\n --sans: 'Inter', sans-serif;\n --mono: 'JetBrains Mono', monospace;\n --serif: 'Instrument Serif', serif;\n --ease: cubic-bezier(.22,1,.36,1);\n }\n\n *,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }\n html{ scroll-behavior:smooth; scroll-padding-top:110px; }\n body{\n background:var(--bg);\n color:var(--white);\n font:400 16px\/1.7 var(--sans);\n -webkit-font-smoothing:antialiased;\n overflow-x:hidden;\n }\n body.no-scroll{ overflow:hidden; }\n ::selection{ background:rgba(79,124,255,.4); color:#fff; }\n ::-webkit-scrollbar{ width:9px; }\n ::-webkit-scrollbar-track{ background:#07080d; }\n ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#2e5bff,#1b2c66); border-radius:99px; }\n img,svg{ display:block; }\n a{ color:inherit; text-decoration:none; }\n button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }\n ul{ list-style:none; }\n :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }\n\n \/* ---------- 02. BASE LAYOUT & TYPOGRAPHY ---------- *\/\n .container{ max-width:1320px; margin-inline:auto; padding-inline:clamp(20px,4vw,48px); }\n .section{ position:relative; padding-block:clamp(96px,11vw,170px); }\n\n .label{\n display:inline-flex; align-items:center; gap:14px;\n font:500 11px\/1 var(--mono); letter-spacing:.34em; text-transform:uppercase; color:var(--muted);\n }\n .label::before{ content:''; width:36px; height:1px; background:linear-gradient(90deg,var(--blue),var(--cyan)); }\n .label.center::after{ content:''; width:36px; height:1px; background:linear-gradient(90deg,var(--cyan),var(--blue)); }\n\n .h2{\n font:600 clamp(2rem,4.3vw,3.6rem)\/1.08 var(--display);\n letter-spacing:-.02em; margin-top:20px;\n }\n .sec-head{ margin-bottom:clamp(48px,6vw,84px); max-width:760px; }\n .sec-head.row{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; max-width:none; flex-wrap:wrap; }\n .sec-head p{ color:var(--muted); margin-top:18px; font-size:15.5px; }\n\n .link-btn{\n position:relative; display:inline-flex; align-items:center; gap:10px;\n font:600 14px var(--sans); color:#fff; padding-bottom:6px;\n }\n .link-btn::after{\n content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;\n background:linear-gradient(90deg,var(--blue),var(--cyan)); transform:scaleX(.35); transform-origin:left;\n transition:transform .5s var(--ease);\n }\n .link-btn:hover::after{ transform:scaleX(1); }\n .link-btn svg{ transition:transform .4s var(--ease); }\n .link-btn:hover svg{ transform:translateX(6px); }\n\n \/* Buttons *\/\n .btn{\n position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;\n padding:18px 32px; border-radius:999px; overflow:hidden;\n font:600 14px\/1 var(--sans); letter-spacing:.02em; white-space:nowrap;\n transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s, background .45s;\n }\n .btn svg{ transition:transform .4s var(--ease); }\n .btn:hover svg{ transform:translateX(5px); }\n .btn-solid{\n background:linear-gradient(135deg,#5b85ff,var(--blue-deep) 55%,#2a8cff);\n color:#fff; box-shadow:0 14px 38px rgba(47,91,255,.32);\n }\n .btn-solid::after{\n content:''; position:absolute; inset:0;\n background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);\n transform:translateX(-130%); transition:transform .8s var(--ease);\n }\n .btn-solid:hover{ transform:translateY(-3px); box-shadow:0 22px 55px rgba(47,91,255,.5); }\n .btn-solid:hover::after{ transform:translateX(130%); }\n .btn-ghost{\n border:1px solid rgba(255,255,255,.16); color:var(--white);\n background:rgba(255,255,255,.03); backdrop-filter:blur(8px);\n }\n .btn-ghost:hover{\n border-color:rgba(79,124,255,.7); color:#fff; transform:translateY(-3px);\n box-shadow:0 0 0 1px rgba(79,124,255,.35), 0 16px 44px rgba(47,91,255,.2);\n }\n .btn-sm{ padding:13px 24px; font-size:13px; }\n\n \/* Scroll-reveal animation states *\/\n .reveal{ opacity:0; transform:translateY(38px); transition:opacity .9s var(--ease), transform .9s var(--ease); }\n .reveal.in{ opacity:1; transform:none; }\n .reveal-scale{ opacity:0; transform:scale(.92) translateY(20px); transition:opacity 1s var(--ease), transform 1s var(--ease); }\n .reveal-scale.in{ opacity:1; transform:none; }\n\n \/* Word-level text reveal *\/\n .split .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }\n .split .w-inner{\n display:inline-block; transform:translateY(118%);\n transition:transform 1.05s var(--ease);\n transition-delay:calc(var(--i,0) * 55ms);\n }\n .split.in .w-inner{ transform:none; }\n\n \/* ---------- 03. GLOBAL DECOR ---------- *\/\n .scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none; }\n .scroll-progress span{\n display:block; height:100%; transform:scaleX(0); transform-origin:left;\n background:linear-gradient(90deg,var(--blue),var(--cyan));\n box-shadow:0 0 14px rgba(79,124,255,.7);\n }\n .noise{\n position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.045;\n background-image:url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n }\n\n \/* ---------- 04. NAVIGATION ---------- *\/\n #site-header{ position:fixed; inset:0 0 auto 0; z-index:100; }\n .nav-inner{\n max-width:1320px; margin:16px auto 0; padding:14px 16px 14px 26px;\n display:flex; align-items:center; justify-content:space-between; gap:20px;\n border:1px solid transparent; border-radius:20px;\n transition:background .5s var(--ease), border-color .5s, box-shadow .5s, margin .5s var(--ease), padding .5s var(--ease);\n }\n #site-header.scrolled .nav-inner{\n background:rgba(7,9,15,.72); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);\n border-color:rgba(255,255,255,.09); box-shadow:0 18px 55px rgba(0,0,0,.45);\n margin-top:10px; padding-block:10px;\n }\n .logo{\n font:700 22px var(--display); letter-spacing:.04em; color:#fff;\n display:inline-flex; align-items:center; z-index:110;\n }\n .logo b{ background:linear-gradient(135deg,#6f93ff,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }\n .logo i{\n width:6px; height:6px; border-radius:50%; background:var(--cyan);\n box-shadow:0 0 12px var(--cyan); margin-left:4px; margin-bottom:5px;\n }\n .nav-links{ display:flex; align-items:center; gap:2px; }\n .nav-link{\n position:relative; padding:10px 13px; font:500 13.5px var(--sans); color:var(--muted);\n transition:color .3s;\n }\n .nav-link::after{\n content:''; position:absolute; left:13px; right:13px; bottom:5px; height:1.5px;\n background:linear-gradient(90deg,var(--blue),var(--cyan));\n transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);\n }\n .nav-link:hover{ color:#fff; }\n .nav-link.active{ color:#fff; }\n .nav-link.active::after{ transform:scaleX(1); }\n .nav-cta{ margin-left:10px; }\n\n \/* Hamburger *\/\n .burger{\n display:none; position:relative; z-index:110; width:46px; height:46px; border-radius:14px;\n border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);\n flex-direction:column; align-items:center; justify-content:center; gap:6px;\n }\n .burger span{ width:20px; height:1.5px; background:#fff; border-radius:2px; transition:transform .45s var(--ease), opacity .3s; }\n .burger.active span:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }\n .burger.active span:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }\n\n \/* Mobile fullscreen menu *\/\n .mobile-menu{\n position:fixed; inset:0; z-index:95; visibility:hidden;\n background:rgba(5,6,10,.92); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);\n clip-path:circle(0% at calc(100% - 56px) 46px);\n transition:clip-path .85s var(--ease), visibility .85s;\n display:flex; flex-direction:column; justify-content:center; padding:130px 8vw 40px;\n }\n .mobile-menu.open{ clip-path:circle(150% at calc(100% - 56px) 46px); visibility:visible; }\n .m-link{\n font:600 clamp(1.7rem,6vw,2.3rem)\/1.15 var(--display); color:#fff;\n padding:12px 0; display:flex; align-items:baseline; gap:18px;\n opacity:0; transform:translateY(26px); transition:opacity .6s var(--ease), transform .6s var(--ease);\n border-bottom:1px solid rgba(255,255,255,.06);\n }\n .m-link i{ font:400 11px var(--mono); font-style:normal; color:var(--blue); }\n .mobile-menu.open .m-link{ opacity:1; transform:none; transition-delay:calc(var(--d,0)*70ms + 180ms); }\n .mobile-menu:not(.open) .m-link{ transition-delay:0ms; }\n .m-cta{ margin-top:34px; align-self:flex-start; opacity:0; transform:translateY(26px); transition:.6s var(--ease); }\n .mobile-menu.open .m-cta{ opacity:1; transform:none; transition-delay:620ms; }\n .m-social{ display:flex; gap:12px; margin-top:38px; opacity:0; transition:.6s var(--ease); }\n .mobile-menu.open .m-social{ opacity:1; transition-delay:700ms; }\n\n \/* ---------- 05. HERO ---------- *\/\n .hero{ position:relative; overflow:hidden; min-height:100svh; display:flex; align-items:center; }\n .hero::before{\n content:''; position:absolute; inset:0; pointer-events:none;\n background:\n radial-gradient(900px 520px at 16% 32%, rgba(79,124,255,.14), transparent 62%),\n radial-gradient(760px 520px at 88% 82%, rgba(56,225,255,.07), transparent 62%);\n }\n .hero-grid{\n position:relative; display:grid; grid-template-columns:1.04fr .96fr;\n gap:clamp(44px,5vw,84px); align-items:center;\n padding-top:150px; padding-bottom:110px;\n }\n .hero-badge{\n display:inline-flex; align-items:center; gap:11px; margin-bottom:28px;\n border:1px solid rgba(79,124,255,.35); background:rgba(79,124,255,.08);\n color:#aebfff; font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase;\n padding:9px 16px; border-radius:999px;\n }\n .pulse-dot{ width:7px; height:7px; border-radius:50%; background:#34d399; position:relative; flex:none; }\n .pulse-dot::after{\n content:''; position:absolute; inset:-4px; border-radius:50%;\n border:1px solid rgba(52,211,153,.55); animation:pulse 2.2s infinite;\n }\n @keyframes pulse{ 0%{ transform:scale(.5); opacity:1; } 100%{ transform:scale(1.7); opacity:0; } }\n\n .hero-title{\n font:700 clamp(2.55rem,5.4vw,4.75rem)\/1.05 var(--display);\n letter-spacing:-.02em; text-transform:uppercase; margin:0 0 26px;\n }\n .hero-title em{\n font:italic 400 1.04em var(--serif); text-transform:none;\n background:linear-gradient(100deg,#8fb0ff,var(--cyan));\n -webkit-background-clip:text; background-clip:text; color:transparent;\n }\n .hero-desc{ max-width:540px; color:var(--muted); font-size:clamp(15px,1.25vw,17px); margin-bottom:40px; }\n .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }\n .hero-trust{ display:flex; align-items:center; gap:14px; margin-top:38px; flex-wrap:wrap; }\n .stars{ color:#f6c453; letter-spacing:4px; font-size:13px; }\n .hero-trust span{ font-size:12.5px; color:var(--muted); }\n\n \/* Hero \u2014 futuristic visual *\/\n .hero-visual{ position:relative; padding-bottom:80px; }\n .core-scene{\n position:relative; width:min(540px,100%); aspect-ratio:1; margin-inline:auto;\n transform-style:preserve-3d; transition:transform .2s linear;\n }\n .visual-glow{\n position:absolute; inset:20%; border-radius:50%; pointer-events:none;\n background:radial-gradient(circle, rgba(79,124,255,.42), transparent 66%);\n filter:blur(46px); animation:glowPulse 6s ease-in-out infinite;\n }\n @keyframes glowPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }\n .ring{ position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.08); }\n .ring-a{ inset:5%; }\n .ring-b{ inset:13%; border-style:dashed; animation:spin 70s linear infinite; }\n .ring-spin{\n position:absolute; inset:8%; border-radius:50%;\n background:conic-gradient(from 0deg, transparent 0 62%, rgba(79,124,255,.9) 84%, rgba(56,225,255,.9) 92%, transparent 100%);\n -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));\n mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));\n animation:spin 16s linear infinite;\n }\n @keyframes spin{ to{ transform:rotate(360deg); } }\n .orbit{ position:absolute; inset:7%; animation:spin 26s linear infinite; }\n .orbit::before{\n content:''; position:absolute; top:0; left:50%; width:10px; height:10px; margin:-5px; border-radius:50%;\n background:var(--cyan); box-shadow:0 0 18px var(--cyan);\n }\n .orbit::after{\n content:''; position:absolute; bottom:9%; right:1%; width:6px; height:6px; margin:-3px; border-radius:50%;\n background:#8fb0ff; box-shadow:0 0 14px #8fb0ff;\n }\n .orbit-2{ inset:17%; animation:spin 40s linear infinite reverse; }\n .orbit-2::after{ display:none; }\n\n .orb{\n position:absolute; inset:25%; border-radius:50%;\n background:radial-gradient(circle at 32% 28%, #dbe6ff 0%, #7ea2ff 20%, var(--blue-deep) 55%, #0d1640 100%);\n box-shadow:0 34px 90px rgba(30,60,180,.55), 0 0 130px rgba(79,124,255,.35), inset -26px -32px 70px rgba(0,0,0,.5);\n animation:floatY 8s ease-in-out infinite; z-index:2;\n }\n .orb::before{\n content:''; position:absolute; inset:5%; border-radius:50%;\n background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.55), transparent 52%);\n }\n .orb::after{\n content:''; position:absolute; inset:0; border-radius:50%;\n background:radial-gradient(circle at 72% 82%, rgba(56,225,255,.3), transparent 46%);\n }\n @keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-15px); } }\n @keyframes floatY2{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(13px); } }\n\n .grid-floor{\n position:absolute; left:50%; bottom:-4%; width:135%; margin-left:-67.5%; height:44%; z-index:1;\n background-image:\n linear-gradient(rgba(120,150,255,.14) 1px, transparent 1px),\n linear-gradient(90deg, rgba(120,150,255,.14) 1px, transparent 1px);\n background-size:44px 44px;\n transform:perspective(520px) rotateX(62deg);\n -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.95) 10%, transparent 85%);\n mask-image:linear-gradient(to top, rgba(0,0,0,.95) 10%, transparent 85%);\n }\n\n \/* Floating glass panels *\/\n .panel{\n position:absolute; z-index:4; min-width:180px;\n background:rgba(11,14,24,.78); border:1px solid rgba(255,255,255,.1); border-radius:16px;\n padding:14px 18px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);\n box-shadow:0 24px 60px rgba(0,0,0,.5);\n }\n .panel .p-label{ font:500 9.5px var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }\n .panel-rev{ top:3%; right:-3%; animation:floatY 6.5s ease-in-out infinite; }\n .bars{ display:flex; align-items:flex-end; gap:6px; height:46px; }\n .bars i{ width:9px; border-radius:5px; background:rgba(255,255,255,.13); }\n .bars i:nth-child(1){ height:38%; } .bars i:nth-child(2){ height:56%; }\n .bars i:nth-child(3){ height:46%; } .bars i:nth-child(4){ height:74%; }\n .bars i:nth-child(5){ height:100%; background:linear-gradient(180deg,var(--cyan),var(--blue)); box-shadow:0 0 14px rgba(56,225,255,.55); }\n .panel-rev .p-value{ font:700 15px var(--display); color:#fff; margin-top:9px; display:flex; justify-content:space-between; }\n .panel-rev .p-value em{ font-style:normal; color:var(--cyan); font:600 12px var(--mono); }\n\n .panel-live{ top:46%; left:-5%; animation:floatY2 7.5s ease-in-out infinite; display:flex; gap:14px; align-items:center; }\n .live-ico{\n width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;\n background:linear-gradient(135deg, rgba(79,124,255,.3), rgba(56,225,255,.15)); border:1px solid rgba(79,124,255,.4);\n }\n .live-ico i{ width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 12px #34d399; animation:pulse 2s infinite; }\n .panel-live b{ display:block; font:600 13.5px var(--display); color:#fff; }\n .panel-live span{ font:500 10.5px var(--mono); color:var(--muted); letter-spacing:.08em; }\n\n \/* Metric chips *\/\n .metric-chips{\n position:absolute; bottom:6px; left:50%; transform:translateX(-50%); z-index:5;\n display:flex; gap:12px; justify-content:center; flex-wrap:wrap; width:max-content; max-width:100%;\n }\n .chip{\n display:flex; flex-direction:column; gap:3px; padding:12px 18px; border-radius:14px;\n background:rgba(10,13,22,.82); border:1px solid rgba(255,255,255,.1);\n backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);\n animation:floatY 6s ease-in-out infinite;\n }\n .chip:nth-child(2){ animation-delay:1.1s; }\n .chip:nth-child(3){ animation-delay:2.1s; }\n .chip b{\n font:700 20px var(--display);\n background:linear-gradient(120deg,#fff,#8fb0ff); -webkit-background-clip:text; background-clip:text; color:transparent;\n }\n .chip span{ font:500 9.5px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }\n\n \/* Scroll cue *\/\n .scroll-cue{ position:absolute; left:clamp(16px,2.6vw,40px); bottom:34px; display:flex; flex-direction:column; align-items:center; gap:16px; z-index:3; }\n .scroll-cue span{ font:500 9.5px var(--mono); letter-spacing:.42em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; }\n .scroll-cue i{ width:1px; height:74px; background:rgba(255,255,255,.14); position:relative; overflow:hidden; display:block; }\n .scroll-cue i::after{\n content:''; position:absolute; inset-inline:0; height:30px;\n background:linear-gradient(180deg,transparent,var(--blue),var(--cyan),transparent);\n animation:cue 2.4s cubic-bezier(.65,0,.35,1) infinite;\n }\n @keyframes cue{ 0%{ transform:translateY(-110%); } 60%,100%{ transform:translateY(110%); } }\n\n \/* ---------- 06. TRUSTED MARQUEE ---------- *\/\n .trusted{ padding-block:74px; border-block:1px solid var(--border); background:rgba(255,255,255,.012); }\n .trusted .label{ justify-content:center; }\n .trusted .label::before, .trusted .label.center::after{ display:none; }\n .marquee{ overflow:hidden; margin-top:44px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }\n .marquee-track{ display:flex; width:max-content; animation:marquee 32s linear infinite; }\n .marquee:hover .marquee-track{ animation-play-state:paused; }\n @keyframes marquee{ to{ transform:translateX(-50%); } }\n .marquee-group{ display:flex; align-items:center; flex:none; gap:clamp(44px,6vw,92px); padding-right:clamp(44px,6vw,92px); }\n .brand{ color:rgba(255,255,255,.34); transition:color .4s; }\n .brand:hover{ color:rgba(255,255,255,.85); }\n .b-serif{ font:italic 400 32px var(--serif); }\n .b-display{ font:700 19px var(--display); letter-spacing:.26em; text-transform:uppercase; }\n .b-mono{ font:500 16px var(--mono); letter-spacing:.34em; text-transform:uppercase; }\n .sep{ color:var(--blue); font-size:11px; opacity:.8; }\n\n \/* ---------- 07. ABOUT ---------- *\/\n .about{ overflow:hidden; }\n .about-num{\n position:absolute; top:-30px; right:-10px; z-index:0; user-select:none; pointer-events:none;\n font:700 clamp(190px,28vw,430px)\/1 var(--display); letter-spacing:-.04em;\n -webkit-text-stroke:1px rgba(255,255,255,.07); color:transparent;\n }\n .about-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(48px,6vw,110px); align-items:start; }\n .about-left h2{\n font:500 clamp(1.9rem,3.8vw,3.3rem)\/1.18 var(--display); letter-spacing:-.01em;\n }\n .about-left h2 em{\n font:italic 400 1.06em var(--serif);\n background:linear-gradient(100deg,#8fb0ff,var(--cyan));\n -webkit-background-clip:text; background-clip:text; color:transparent;\n }\n .about-right{ padding-top:10px; }\n .about-right > p{ color:var(--muted); font-size:15.5px; margin-bottom:44px; }\n .about-stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); }\n .stat{ padding:26px 18px 6px 0; }\n .stat b{ font:700 clamp(1.9rem,3vw,2.7rem) var(--display); letter-spacing:-.02em; display:block;\n background:linear-gradient(140deg,#fff,#8fb0ff); -webkit-background-clip:text; background-clip:text; color:transparent; }\n .stat span{ font:500 10px var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }\n\n \/* ---------- 08. SERVICES ---------- *\/\n .services{ background:linear-gradient(180deg,transparent,rgba(255,255,255,.014),transparent); }\n .service-list{ border-top:1px solid var(--border); }\n .service{ position:relative; border-bottom:1px solid var(--border); overflow:hidden; }\n .service::before{\n content:''; position:absolute; inset:0; pointer-events:none; opacity:0;\n background:linear-gradient(90deg, rgba(79,124,255,.13), rgba(56,225,255,.04) 55%, transparent);\n transition:opacity .55s var(--ease);\n }\n .service:hover::before{ opacity:1; }\n .service-head{\n position:relative; width:100%; display:grid; align-items:center; text-align:left;\n grid-template-columns:90px 1fr auto auto; gap:clamp(14px,2.4vw,34px);\n padding:clamp(26px,3vw,40px) 14px; cursor:pointer;\n }\n .service-num{ font:500 12.5px var(--mono); color:var(--muted); transition:color .4s; }\n .service-title{\n font:600 clamp(1.25rem,2.6vw,1.9rem)\/1.15 var(--display); letter-spacing:-.01em; color:#eef1f8;\n transition:transform .5s var(--ease), color .4s;\n }\n .service-head:hover .service-title{ transform:translateX(12px); }\n .service.open .service-title{ color:#fff; }\n .service-meta{ font:500 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }\n .service-arrow{\n width:52px; height:52px; border-radius:50%; display:grid; place-items:center;\n border:1px solid rgba(255,255,255,.14); transition:border-color .4s, box-shadow .4s, background .4s;\n }\n .service-arrow svg{ transition:transform .5s var(--ease); }\n .service-head:hover .service-arrow{ border-color:rgba(79,124,255,.65); box-shadow:0 0 26px rgba(79,124,255,.25); }\n .service-head:hover .service-arrow svg{ transform:rotate(45deg); }\n .service.open .service-arrow svg{ transform:rotate(90deg); }\n .service.open .service-arrow{ border-color:rgba(56,225,255,.6); background:rgba(56,225,255,.07); }\n .service.open .service-num{ color:var(--cyan); }\n .service-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .65s var(--ease); }\n .service.open .service-body{ grid-template-rows:1fr; }\n .service-inner{ overflow:hidden; min-height:0; padding:0 14px; transition:padding .5s var(--ease); }\n .service.open .service-inner{ padding:0 14px 40px; }\n .service-inner > p{ max-width:620px; color:var(--muted); font-size:15px; }\n .service-foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:24px; }\n .service-tags{ display:flex; gap:10px; flex-wrap:wrap; }\n .service-tags span{\n font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#aebfff;\n border:1px solid rgba(79,124,255,.3); border-radius:999px; padding:8px 14px;\n background:rgba(79,124,255,.07); transition:background .3s;\n }\n .service-tags span:hover{ background:rgba(79,124,255,.16); }\n\n \/* ---------- 09. PROJECTS ---------- *\/\n .project{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(36px,6vw,110px); align-items:center; margin-bottom:clamp(90px,11vw,150px); position:relative; }\n .project:last-child{ margin-bottom:0; }\n .project.flip .project-media{ order:2; }\n .p-num{\n position:absolute; top:-64px; left:-14px; z-index:0; user-select:none; pointer-events:none;\n font:700 clamp(110px,15vw,200px)\/1 var(--display);\n -webkit-text-stroke:1px rgba(255,255,255,.09); color:transparent;\n }\n .project.flip .p-num{ left:auto; right:-14px; }\n .project-media{\n position:relative; z-index:1; border-radius:24px; overflow:hidden; aspect-ratio:4\/3;\n border:1px solid rgba(255,255,255,.09);\n box-shadow:0 40px 90px rgba(0,0,0,.5);\n }\n .p-art{\n position:absolute; inset:0; display:grid; place-items:center; overflow:hidden;\n transition:transform 1.3s var(--ease);\n }\n .project:hover .p-art{ transform:scale(1.08); }\n .p-art .p-word{ font:600 clamp(2.4rem,5vw,4.4rem)\/1 var(--display); letter-spacing:.14em; color:rgba(255,255,255,.88); z-index:2; position:relative; }\n .p-art .p-sub{ position:absolute; bottom:22px; left:26px; font:500 10px var(--mono); letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.55); z-index:2; }\n .p-art .p-gl{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }\n .p-art.aurelia{ background:linear-gradient(140deg,#191129,#2c1b4d 48%,#0b1020); }\n .p-art.aurelia .p-gl{ width:280px; height:280px; background:radial-gradient(circle,#c084fc,transparent 65%); top:-40px; right:-30px; }\n .p-art.aurelia::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 90%, rgba(255,255,255,.08), transparent 40%); }\n .p-art.nova{ background:linear-gradient(140deg,#070c18,#0c1a3a 50%,#05070d); }\n .p-art.nova::before{\n content:''; position:absolute; inset:0;\n background-image:linear-gradient(rgba(100,140,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(100,140,255,.12) 1px,transparent 1px);\n background-size:40px 40px;\n -webkit-mask-image:radial-gradient(circle at 50% 55%, #000 20%, transparent 72%);\n mask-image:radial-gradient(circle at 50% 55%, #000 20%, transparent 72%);\n }\n .p-art.nova .p-orb{\n position:absolute; width:150px; height:150px; border-radius:50%;\n background:radial-gradient(circle at 34% 30%, #9db8ff, var(--blue-deep) 60%, #101b46);\n box-shadow:0 0 80px rgba(79,124,255,.6);\n }\n .p-art.nova .p-ring{ position:absolute; width:230px; height:230px; border-radius:50%; border:1px dashed rgba(143,176,255,.4); animation:spin 30s linear infinite; }\n .p-art.verde{ background:linear-gradient(140deg,#08120d,#123024 48%,#070c0a); }\n .p-art.verde .p-gl{ width:300px; height:300px; background:radial-gradient(circle,#34d399,transparent 65%); bottom:-60px; left:-40px; opacity:.4; }\n .p-art.verde::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 15%, rgba(255,255,255,.1), transparent 45%); }\n\n .project-content{ position:relative; z-index:1; }\n .project-content .label{ margin-bottom:22px; }\n .project-content h3{ font:600 clamp(1.55rem,2.9vw,2.45rem)\/1.12 var(--display); letter-spacing:-.015em; margin-bottom:18px; }\n .project-content h3 span{ display:block; font:italic 400 .92em var(--serif); color:#aebfff; letter-spacing:0; }\n .project-content > p{ color:var(--muted); font-size:15px; max-width:480px; margin-bottom:26px; }\n .project-meta{ display:flex; gap:30px; margin-bottom:30px; flex-wrap:wrap; }\n .project-meta div b{ display:block; font:600 13px var(--display); color:#fff; }\n .project-meta div span{ font:500 10px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }\n\n \/* ---------- 10. IMPACT ---------- *\/\n .impact{ overflow:hidden; text-align:center; }\n .impact::before{\n content:''; position:absolute; inset:0;\n background:radial-gradient(700px 420px at 50% 30%, rgba(79,124,255,.16), transparent 65%);\n }\n .impact-title{\n position:relative; font:700 clamp(2.1rem,5.4vw,4.8rem)\/1.08 var(--display);\n letter-spacing:-.02em; text-transform:uppercase;\n }\n .impact-title em{\n font:italic 400 1.02em var(--serif);\n background:linear-gradient(100deg,#8fb0ff,var(--cyan));\n -webkit-background-clip:text; background-clip:text; color:transparent;\n }\n .impact-stats{\n position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px;\n margin-top:clamp(56px,7vw,100px); padding-top:56px; border-top:1px solid var(--border);\n }\n .impact-stat b{\n display:block; font:700 clamp(2.7rem,5.2vw,4.4rem)\/1 var(--display); letter-spacing:-.02em;\n background:linear-gradient(165deg,#fff 32%,#8fb0ff); -webkit-background-clip:text; background-clip:text; color:transparent;\n }\n .impact-stat span{ font:500 10.5px var(--mono); letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-top:10px; display:block; }\n\n \/* ---------- 11. PROCESS ---------- *\/\n .process-wrap{ position:relative; margin-top:clamp(56px,7vw,90px); }\n .process-line{ position:absolute; top:27px; left:0; right:0; height:1px; background:rgba(255,255,255,.09); }\n .process-line i{\n position:absolute; inset:0; transform:scaleX(0); transform-origin:left;\n background:linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow:0 0 16px rgba(79,124,255,.6);\n }\n .process-grid{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }\n .step{ position:relative; padding:0 10px; }\n .step-num{\n width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin-bottom:24px; position:relative; z-index:1;\n border:1px solid rgba(255,255,255,.14); background:var(--bg);\n font:500 13px var(--mono); color:var(--muted); transition:border-color .4s, color .4s, box-shadow .4s, transform .4s var(--ease);\n }\n .step:hover .step-num{ border-color:var(--blue); color:#fff; transform:translateY(-4px); box-shadow:0 0 34px rgba(79,124,255,.4); }\n .step h3{ font:600 19px var(--display); margin-bottom:10px; letter-spacing:-.01em; }\n .step p{ font-size:13.5px; color:var(--muted); line-height:1.65; }\n\n \/* ---------- 12. WHY CHOOSE US ---------- *\/\n .why-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(48px,7vw,120px); align-items:start; }\n .why-left .h2{ font-size:clamp(1.9rem,3.6vw,3.1rem); margin-bottom:24px; }\n .why-left > p{ color:var(--muted); font-size:15.5px; max-width:420px; margin-bottom:32px; }\n .benefit-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 30px; }\n .benefit{ position:relative; padding:24px 4px; }\n .benefit::after{\n content:''; position:absolute; left:4px; right:4px; bottom:0; height:1px;\n background:linear-gradient(90deg,var(--blue),var(--cyan));\n transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);\n }\n .benefit:hover::after{ transform:scaleX(1); }\n .b-icon{\n width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;\n border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:#8fb0ff;\n transition:border-color .4s, color .4s, box-shadow .4s, transform .4s var(--ease);\n }\n .benefit:hover .b-icon{ border-color:rgba(56,225,255,.55); color:var(--cyan); box-shadow:0 0 26px rgba(56,225,255,.25); transform:translateY(-3px); }\n .benefit h3{ font:600 16.5px var(--display); margin-bottom:8px; }\n .benefit p{ font-size:13.5px; color:var(--muted); line-height:1.6; }\n\n \/* ---------- 13. TESTIMONIALS ---------- *\/\n .testimonials{ background:linear-gradient(180deg,transparent,rgba(255,255,255,.014),transparent); }\n .t-slider{ position:relative; overflow:hidden; }\n .t-track{ display:flex; transition:transform .75s var(--ease); }\n .t-slide{ flex:0 0 100%; padding:20px 6px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; }\n .t-quote-mark{\n font:italic 400 110px\/0.6 var(--serif); color:transparent; margin-bottom:26px;\n background:linear-gradient(120deg,rgba(79,124,255,.8),rgba(56,225,255,.5));\n -webkit-background-clip:text; background-clip:text;\n }\n .t-slide blockquote{\n font:500 clamp(1.3rem,2.5vw,1.95rem)\/1.45 var(--display);\n letter-spacing:-.01em; color:#eef1f8; max-width:880px;\n }\n .t-person{ display:flex; align-items:center; gap:18px; margin-top:40px; text-align:left; }\n .t-avatar{\n width:66px; height:66px; flex:none; border-radius:50%; display:grid; place-items:center;\n font:700 19px var(--display); color:#fff; border:1px solid rgba(255,255,255,.25);\n box-shadow:0 0 34px rgba(79,124,255,.35);\n }\n .t-person b{ display:block; font:600 15px var(--display); color:#fff; }\n .t-person span{ font:500 12px var(--sans); color:var(--muted); }\n .t-controls{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:52px; }\n .t-btn{\n width:52px; height:52px; border-radius:50%; display:grid; place-items:center;\n border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.03); color:#fff;\n transition:border-color .35s, box-shadow .35s, transform .35s var(--ease), background .35s;\n }\n .t-btn:hover{ border-color:rgba(79,124,255,.7); box-shadow:0 0 28px rgba(79,124,255,.3); transform:translateY(-3px); background:rgba(79,124,255,.08); }\n .t-dots{ display:flex; gap:9px; }\n .dot{ width:8px; height:8px; border-radius:99px; background:rgba(255,255,255,.2); transition:width .45s var(--ease), background .45s; padding:0; }\n .dot.active{ width:30px; background:linear-gradient(90deg,var(--blue),var(--cyan)); }\n\n \/* ---------- 14. CTA ---------- *\/\n .cta{ position:relative; overflow:hidden; text-align:center; padding-block:clamp(120px,15vw,200px); }\n .cta-blob{ position:absolute; border-radius:50%; filter:blur(100px); opacity:.32; pointer-events:none; }\n .cta-blob.b1{ width:480px; height:480px; background:radial-gradient(circle,var(--blue),transparent 65%); top:-160px; left:-140px; animation:drift 13s ease-in-out infinite alternate; }\n .cta-blob.b2{ width:420px; height:420px; background:radial-gradient(circle,var(--cyan),transparent 65%); bottom:-140px; right:-120px; animation:drift 16s ease-in-out infinite alternate-reverse; }\n .cta-blob.b3{ width:300px; height:300px; background:radial-gradient(circle,#7ea2ff,transparent 65%); top:40%; left:55%; animation:drift 19s ease-in-out infinite alternate; }\n @keyframes drift{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(70px,-50px) scale(1.18); } }\n .cta-inner{ position:relative; z-index:2; }\n .cta .label{ justify-content:center; }\n .cta-title{\n font:700 clamp(2.3rem,5.8vw,5.2rem)\/1.06 var(--display);\n letter-spacing:-.02em; text-transform:uppercase; margin:26px auto 24px; max-width:1000px;\n }\n .cta-title em{\n font:italic 400 1.02em var(--serif);\n background:linear-gradient(100deg,#8fb0ff,var(--cyan));\n -webkit-background-clip:text; background-clip:text; color:transparent;\n }\n .cta-inner > p{ color:var(--muted); font-size:clamp(15px,1.3vw,17px); max-width:560px; margin:0 auto 42px; }\n .cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }\n\n \/* ---------- 15. CONTACT ---------- *\/\n .contact-grid{ display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(48px,6vw,110px); align-items:start; }\n .contact-info h3{ font:600 clamp(1.5rem,2.6vw,2.1rem)\/1.15 var(--display); margin:20px 0 14px; }\n .contact-info > p{ color:var(--muted); font-size:14.5px; margin-bottom:34px; }\n .c-item{ display:flex; align-items:flex-start; gap:18px; padding:20px 0; border-bottom:1px solid var(--border); transition:padding-left .4s var(--ease); }\n .c-item:hover{ padding-left:8px; }\n .c-ico{\n width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center;\n border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:#8fb0ff;\n }\n .c-item .c-label{ font:500 9.5px var(--mono); letter-spacing:.26em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px; }\n .c-item .c-value{ font:600 15.5px var(--sans); color:#fff; }\n .c-item a.c-value:hover{ color:var(--cyan); }\n .c-socials{ display:flex; gap:12px; margin-top:30px; }\n .s-btn{\n width:44px; height:44px; border-radius:12px; display:grid; place-items:center;\n border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.03); color:var(--muted);\n transition:color .35s, border-color .35s, box-shadow .35s, transform .35s var(--ease);\n }\n .s-btn:hover{ color:#fff; border-color:rgba(79,124,255,.65); box-shadow:0 0 24px rgba(79,124,255,.3); transform:translateY(-3px); }\n\n .form-card{\n position:relative; border-radius:26px; padding:clamp(26px,3.4vw,46px);\n background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));\n backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);\n box-shadow:0 44px 100px rgba(0,0,0,.45);\n }\n .form-card::before{\n content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;\n background:linear-gradient(150deg, rgba(79,124,255,.65), transparent 38%, rgba(56,225,255,.45));\n -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\n -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;\n }\n .f-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }\n .f-row + .f-row{ margin-top:20px; }\n .field{ display:flex; flex-direction:column; gap:9px; }\n .field label{ font:500 10px var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }\n .field input, .field select, .field textarea{\n width:100%; background:rgba(255,255,255,.04); color:#fff;\n border:1px solid rgba(255,255,255,.11); border-radius:13px;\n padding:15px 17px; font:400 14.5px var(--sans);\n transition:border-color .35s, box-shadow .35s, background .35s;\n }\n .field input::placeholder, .field textarea::placeholder{ color:#5d6478; }\n .field input:focus, .field select:focus, .field textarea:focus{\n outline:none; border-color:var(--blue); background:rgba(79,124,255,.05);\n box-shadow:0 0 0 4px rgba(79,124,255,.14);\n }\n .field select{\n appearance:none; -webkit-appearance:none; cursor:pointer;\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa1b4' stroke-width='1.5' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\n background-repeat:no-repeat; background-position:right 18px center;\n }\n .field select option{ background:#0c0f1a; color:#fff; }\n .field textarea{ min-height:130px; resize:vertical; }\n .field .err{ display:none; font:500 11.5px var(--sans); color:var(--danger); }\n .field.error input, .field.error select, .field.error textarea{ border-color:rgba(255,107,138,.6); box-shadow:0 0 0 3px rgba(255,107,138,.1); }\n .field.error .err{ display:block; }\n .form-submit{ margin-top:26px; width:100%; justify-content:center; }\n .form-success{ text-align:center; padding:50px 20px; }\n .form-success .ok{\n width:84px; height:84px; margin:0 auto 26px; border-radius:50%; display:grid; place-items:center;\n background:radial-gradient(circle at 32% 28%, rgba(56,225,255,.35), rgba(79,124,255,.25));\n border:1px solid rgba(56,225,255,.5); box-shadow:0 0 60px rgba(56,225,255,.3);\n animation:pop .7s var(--ease);\n }\n @keyframes pop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }\n .form-success h3{ font:600 1.6rem var(--display); margin-bottom:10px; }\n .form-success p{ color:var(--muted); font-size:14.5px; margin-bottom:28px; }\n\n \/* ---------- 16. FOOTER ---------- *\/\n .footer{ position:relative; border-top:1px solid var(--border); background:linear-gradient(180deg,transparent,rgba(10,12,20,.65)); overflow:hidden; }\n .footer-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; padding-top:clamp(70px,9vw,110px); }\n .footer-logo{ font-size:26px; }\n .footer-top p{ max-width:400px; color:var(--muted); font-size:14.5px; }\n .footer-wordmark{\n font:700 clamp(66px,15.5vw,220px)\/.92 var(--display); letter-spacing:-.02em; text-align:center;\n background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.015) 85%);\n -webkit-background-clip:text; background-clip:text; color:transparent;\n margin:clamp(30px,5vw,60px) 0 clamp(20px,3vw,40px); user-select:none; pointer-events:none;\n }\n .footer-cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(30px,4vw,60px); padding-block:clamp(30px,4vw,50px); border-top:1px solid var(--border); }\n .f-col h4{ font:500 11px var(--mono); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }\n .f-col ul{ display:flex; flex-direction:column; gap:12px; }\n .f-col a{ font-size:14.5px; color:#c3c9d8; transition:color .3s, padding-left .3s var(--ease); }\n .f-col a:hover{ color:var(--cyan); padding-left:6px; }\n .footer-bottom{\n display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;\n padding-block:28px; border-top:1px solid var(--border);\n font-size:13px; color:var(--muted);\n }\n .footer-bottom .fb-links{ display:flex; align-items:center; gap:26px; }\n .to-top-link{ display:inline-flex; align-items:center; gap:9px; font:500 12px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:#c3c9d8; transition:color .3s; }\n .to-top-link:hover{ color:var(--cyan); }\n\n \/* Floating back-to-top with progress ring *\/\n .back-top{\n position:fixed; right:24px; bottom:24px; z-index:80; width:58px; height:58px; border-radius:50%;\n background:rgba(10,13,22,.88); border:1px solid rgba(255,255,255,.13);\n backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);\n display:grid; place-items:center; color:#fff; cursor:pointer;\n opacity:0; transform:translateY(22px) scale(.88); pointer-events:none;\n transition:opacity .45s var(--ease), transform .45s var(--ease), border-color .35s, box-shadow .35s;\n }\n .back-top.show{ opacity:1; transform:none; pointer-events:auto; }\n .back-top:hover{ border-color:rgba(56,225,255,.6); box-shadow:0 0 30px rgba(56,225,255,.3); }\n .back-top svg.ring{ position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); transform:rotate(-90deg); }\n .back-top svg.ring circle{ fill:none; stroke-width:2; }\n .back-top svg.ring .track{ stroke:rgba(255,255,255,.12); }\n .back-top svg.ring .fill{ stroke:url(#ringGrad); stroke-linecap:round; }\n\n \/* ---------- 17. RESPONSIVE ---------- *\/\n @media (max-width:1180px){\n .nav-link{ padding:10px 9px; font-size:13px; }\n .panel-rev{ right:0; }\n .panel-live{ left:0; }\n }\n @media (max-width:1000px){\n .nav-links{ display:none; }\n .burger{ display:flex; }\n .hero-grid{ grid-template-columns:1fr; gap:70px; padding-top:130px; padding-bottom:70px; }\n .core-scene{ width:min(470px,100%); }\n .scroll-cue{ display:none; }\n .about-grid, .why-grid, .contact-grid{ grid-template-columns:1fr; }\n .about-num{ right:0; }\n .project{ grid-template-columns:1fr; gap:44px; }\n .project.flip .project-media{ order:0; }\n .p-num{ top:-56px; }\n \/* Process becomes vertical *\/\n .process-grid{ grid-template-columns:1fr; gap:0; }\n .process-line{ top:0; bottom:0; left:27px; right:auto; width:1px; height:auto; }\n .process-line i{ transform:scaleY(0); transform-origin:top; }\n .step{ display:grid; grid-template-columns:56px 1fr; column-gap:24px; padding:0 0 46px 0; }\n .step:last-child{ padding-bottom:0; }\n .step-num{ margin-bottom:0; }\n .impact-stats{ grid-template-columns:repeat(2,1fr); gap:44px 24px; }\n .footer-cols{ grid-template-columns:repeat(2,1fr); }\n }\n @media (max-width:640px){\n .nav-inner{ margin-top:10px; padding:11px 12px 11px 18px; }\n .btn{ width:100%; }\n .hero-actions .btn{ max-width:none; }\n .metric-chips{ position:static; transform:none; width:100%; margin-top:30px; }\n .hero-visual{ padding-bottom:0; }\n .panel-rev{ right:-2%; }\n .panel-live{ left:-2%; }\n .service-head{ grid-template-columns:46px 1fr auto; gap:14px; padding:22px 6px; }\n .service-meta{ display:none; }\n .service-arrow{ width:44px; height:44px; }\n .service-inner{ padding:0 6px; }\n .service.open .service-inner{ padding:0 6px 30px; }\n .about-stats{ gap:14px; }\n .stat{ padding-right:8px; }\n .benefit-list{ grid-template-columns:1fr; }\n .f-row{ grid-template-columns:1fr; }\n .f-row + .f-row{ margin-top:0; }\n .field + .field{ margin-top:18px; }\n .footer-bottom{ justify-content:center; text-align:center; }\n .footer-bottom .fb-links{ flex-direction:column; gap:12px; }\n .back-top{ right:16px; bottom:16px; width:52px; height:52px; }\n }\n\n \/* ---------- 18. REDUCED MOTION ---------- *\/\n @media (prefers-reduced-motion: reduce){\n html{ scroll-behavior:auto; }\n *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }\n .split .w-inner{ transform:none; }\n .reveal, .reveal-scale{ opacity:1; transform:none; }\n .marquee-track{ animation:none; }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"scroll-progress\" aria-hidden=\"true\"><span id=\"scroll-bar\"><\/span><\/div>\n \n <div class=\"noise\" aria-hidden=\"true\"><\/div>\n\n \n <header id=\"site-header\">\n <div class=\"nav-inner\">\n <a href=\"#home\" class=\"logo\" aria-label=\"NEXORA \u2014 back to top\">NEXO<b>RA<\/b><i><\/i><\/a>\n\n <nav class=\"nav-links\" aria-label=\"Primary navigation\">\n <a href=\"#home\" class=\"nav-link active\">Home<\/a>\n <a href=\"#about\" class=\"nav-link\">About<\/a>\n <a href=\"#services\" class=\"nav-link\">Services<\/a>\n <a href=\"#projects\" class=\"nav-link\">Projects<\/a>\n <a href=\"#process\" class=\"nav-link\">Process<\/a>\n <a href=\"#testimonials\" class=\"nav-link\">Testimonials<\/a>\n <a href=\"#contact\" class=\"nav-link\">Contact<\/a>\n <a href=\"#contact\" class=\"btn btn-solid btn-sm nav-cta\">\n Let's Talk\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/nav>\n\n <button class=\"burger\" id=\"burger\" aria-label=\"Toggle menu\" aria-expanded=\"false\" aria-controls=\"mobile-menu\">\n <span><\/span><span><\/span>\n <\/button>\n <\/div>\n <\/header>\n\n \n <div class=\"mobile-menu\" id=\"mobile-menu\">\n <a href=\"#home\" class=\"m-link\" style=\"--d:0\"><i>01<\/i>Home<\/a>\n <a href=\"#about\" class=\"m-link\" style=\"--d:1\"><i>02<\/i>About<\/a>\n <a href=\"#services\" class=\"m-link\" style=\"--d:2\"><i>03<\/i>Services<\/a>\n <a href=\"#projects\" class=\"m-link\" style=\"--d:3\"><i>04<\/i>Projects<\/a>\n <a href=\"#process\" class=\"m-link\" style=\"--d:4\"><i>05<\/i>Process<\/a>\n <a href=\"#testimonials\" class=\"m-link\" style=\"--d:5\"><i>06<\/i>Testimonials<\/a>\n <a href=\"#contact\" class=\"m-link\" style=\"--d:6\"><i>07<\/i>Contact<\/a>\n <a href=\"#contact\" class=\"btn btn-solid m-cta\">\n Let's Talk\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <div class=\"m-social\">\n <a href=\"#\" class=\"s-btn\" aria-label=\"LinkedIn\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"X (Twitter)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"Instagram\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><rect x=\"2.5\" y=\"2.5\" width=\"19\" height=\"19\" rx=\"5.5\"\/><circle cx=\"12\" cy=\"12\" r=\"4.2\"\/><circle cx=\"17.6\" cy=\"6.4\" r=\".9\" fill=\"currentColor\" stroke=\"none\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"Behance\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.08 5.406c.978 0 1.812.122 2.52.366.708.244 1.283.6 1.752 1.037.462.449.8.977 1.018 1.62.214.616.322 1.31.322 2.065 0 1.163-.292 2.154-.877 2.973-.59.818-1.46 1.414-2.603 1.789.76.351 1.36.852 1.807 1.503.446.65.674 1.434.674 2.35 0 .809-.157 1.52-.47 2.129-.315.61-.745 1.114-1.294 1.51a5.6 5.6 0 0 1-1.848.905c-.686.207-1.4.31-2.148.31H0V5.406h7.08zm-.416 6.845c.563 0 1.04-.118 1.431-.354.392-.236.686-.537.884-.904.198-.367.296-.774.296-1.222 0-.655-.231-1.163-.695-1.52-.462-.354-1.083-.535-1.862-.535H3.22v4.535h3.444zm.25 6.657c.856 0 1.498-.164 1.927-.496.43-.332.643-.891.643-1.678 0-.537-.117-.972-.354-1.307a2.03 2.03 0 0 0-.914-.719 3.08 3.08 0 0 0-1.213-.232H3.22v4.432h3.694zM21.47 18.48c.545.583 1.35.875 2.408.875.715 0 1.32-.169 1.816-.506.494-.338.79-.697.882-1.078h2.42c-.427 1.48-1.18 2.527-2.26 3.145-1.078.618-2.318.927-3.72.927-1.045 0-1.979-.168-2.8-.505a5.78 5.78 0 0 1-2.06-1.393 6.05 6.05 0 0 1-1.28-2.074c-.29-.796-.437-1.668-.437-2.617 0-.95.14-1.82.427-2.618a6.1 6.1 0 0 1 1.258-2.075c.55-.597 1.21-1.062 1.978-1.396A6.33 6.33 0 0 1 20.2 7.48c.944 0 1.8.17 2.571.508.77.338 1.425.803 1.96 1.393.538.59.95 1.28 1.244 2.065.294.786.44 1.63.44 2.532 0 .173-.01.385-.021.634h-8.985c.104 1.276.516 2.242 1.234 2.9l-.128-.032zm-4.575-6.134h6.189c-.067-1.09-.343-1.94-.828-2.551-.486-.61-1.203-.917-2.151-.917-.692 0-1.267.167-1.723.5a2.66 2.66 0 0 0-.99 1.273c-.21.538-.33 1.108-.497 1.695z\"\/><\/svg><\/a>\n <\/div>\n <\/div>\n\n <main>\n \n <section class=\"hero\" id=\"home\">\n <div class=\"container hero-grid\">\n\n \n <div class=\"hero-copy\">\n <div class=\"hero-badge reveal\"><span class=\"pulse-dot\"><\/span>Available for new projects \u2014 2026<\/div>\n <p class=\"label reveal\" style=\"transition-delay:90ms\">Digital Business Solutions<\/p>\n <h1 class=\"hero-title split\">We build businesses that <em>move forward.<\/em><\/h1>\n <p class=\"hero-desc reveal\" style=\"transition-delay:160ms\">\n Nexora is a full-service digital agency partnering with ambitious brands to design, build\n and scale digital products that outperform the market \u2014 and keep moving forward.\n <\/p>\n <div class=\"hero-actions reveal\" style=\"transition-delay:240ms\">\n <a href=\"#contact\" class=\"btn btn-solid\">\n Start a Project\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <a href=\"#projects\" class=\"btn btn-ghost\">\n Explore Our Work\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M6 13l6 6 6-6\"\/><\/svg>\n <\/a>\n <\/div>\n <div class=\"hero-trust reveal\" style=\"transition-delay:320ms\">\n <span class=\"stars\" aria-hidden=\"true\">\u2605\u2605\u2605\u2605\u2605<\/span>\n <span>4.9\/5 average rating from 35+ global clients<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"hero-visual reveal-scale\" style=\"transition-delay:200ms\" id=\"hero-visual\">\n <div class=\"core-scene\" id=\"core-scene\">\n <div class=\"visual-glow\"><\/div>\n <div class=\"ring ring-a\"><\/div>\n <div class=\"ring ring-b\"><\/div>\n <div class=\"ring-spin\"><\/div>\n <div class=\"orbit\"><\/div>\n <div class=\"orbit orbit-2\"><\/div>\n <div class=\"grid-floor\"><\/div>\n <div class=\"orb\"><\/div>\n\n \n <div class=\"panel panel-rev\">\n <span class=\"p-label\">Revenue Growth<\/span>\n <div class=\"bars\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\n <div class=\"p-value\">$4.2M <em>+212%<\/em><\/div>\n <\/div>\n\n \n <div class=\"panel panel-live\">\n <span class=\"live-ico\"><i><\/i><\/span>\n <div>\n <b>AURELIA \u2014 Live now<\/b>\n <span>checkout conversion +38%<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"metric-chips\">\n <div class=\"chip\"><b>98%<\/b><span>Client Satisfaction<\/span><\/div>\n <div class=\"chip\"><b>150+<\/b><span>Projects<\/span><\/div>\n <div class=\"chip\"><b>12+<\/b><span>Years Experience<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"scroll-cue\" aria-hidden=\"true\">\n <span>Scroll to explore<\/span>\n <i><\/i>\n <\/div>\n <\/section>\n\n \n <section class=\"trusted\" aria-label=\"Trusted by ambitious brands\">\n <div class=\"container\">\n <p class=\"label center\">Trusted by ambitious brands<\/p>\n <\/div>\n <div class=\"marquee\">\n <div class=\"marquee-track\">\n <div class=\"marquee-group\">\n <span class=\"brand b-serif\">Vertex<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-display\">Lumina<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-mono\">Altura<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-display\">Nexon<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-serif\">Orbit<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-mono\">PrimeLab<\/span><i class=\"sep\">\u2726<\/i>\n <\/div>\n <div class=\"marquee-group\" aria-hidden=\"true\">\n <span class=\"brand b-serif\">Vertex<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-display\">Lumina<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-mono\">Altura<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-display\">Nexon<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-serif\">Orbit<\/span><i class=\"sep\">\u2726<\/i>\n <span class=\"brand b-mono\">PrimeLab<\/span><i class=\"sep\">\u2726<\/i>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"about section\" id=\"about\">\n <div class=\"about-num\" aria-hidden=\"true\">01<\/div>\n <div class=\"container about-grid\">\n\n <div class=\"about-left\">\n <p class=\"label reveal\">Who We Are<\/p>\n <h2 class=\"split\" style=\"margin-top:26px\">\n Strategy, creativity and technology \u2014 combined into one <em>powerful business experience.<\/em>\n <\/h2>\n <\/div>\n\n <div class=\"about-right\">\n <p class=\"reveal\">\n Nexora was founded on a simple belief: a website should be more than a digital brochure \u2014 it\n should be your hardest-working employee. We blend sharp business strategy, award-level design\n and clean engineering to create digital experiences that attract, convert and retain.\n From first workshop to long after launch, we act as one team with yours.\n <\/p>\n <div class=\"about-stats reveal\" style=\"transition-delay:120ms\">\n <div class=\"stat\"><b>12+<\/b><span>Years Experience<\/span><\/div>\n <div class=\"stat\"><b>150+<\/b><span>Successful Projects<\/span><\/div>\n <div class=\"stat\"><b>35+<\/b><span>Global Clients<\/span><\/div>\n <\/div>\n <div style=\"margin-top:40px\" class=\"reveal\">\n <a href=\"#process\" class=\"link-btn\">\n See how we work\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"services section\" id=\"services\">\n <div class=\"container\">\n <div class=\"sec-head row\">\n <div>\n <p class=\"label\">What We Do<\/p>\n <h2 class=\"h2 split\">Full-service digital <em style=\"font:italic 400 1.02em var(--serif);background:linear-gradient(100deg,#8fb0ff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent\">capabilities<\/em><\/h2>\n <\/div>\n <p class=\"reveal\" style=\"max-width:380px\">\n Six disciplines. One integrated team. Everything your business needs to win online \u2014 under one roof.\n <\/p>\n <\/div>\n\n <div class=\"service-list\">\n \n <article class=\"service reveal\">\n <button class=\"service-head\" aria-expanded=\"false\">\n <span class=\"service-num\">01<\/span>\n <span class=\"service-title\">Business Website Development<\/span>\n <span class=\"service-meta\">Web \u00b7 CMS \u00b7 Performance<\/span>\n <span class=\"service-arrow\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/button>\n <div class=\"service-body\">\n <div class=\"service-inner\">\n <p>High-performance corporate and brand websites engineered to convert visitors into customers \u2014 clean code, SEO-ready architecture and buttery-smooth experiences on every device.<\/p>\n <div class=\"service-foot\">\n <div class=\"service-tags\"><span>Brand Websites<\/span><span>Corporate Portals<\/span><span>Headless CMS<\/span><\/div>\n <a href=\"#contact\" class=\"link-btn\">Explore service\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n \n <article class=\"service reveal\">\n <button class=\"service-head\" aria-expanded=\"false\">\n <span class=\"service-num\">02<\/span>\n <span class=\"service-title\">eCommerce Solutions<\/span>\n <span class=\"service-meta\">Storefront \u00b7 Payments \u00b7 Scale<\/span>\n <span class=\"service-arrow\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/button>\n <div class=\"service-body\">\n <div class=\"service-inner\">\n <p>End-to-end online stores with secure checkout, smart product architecture and payment integrations \u2014 built to scale from launch day to seven figures in annual revenue.<\/p>\n <div class=\"service-foot\">\n <div class=\"service-tags\"><span>Shopify Plus<\/span><span>Custom Stores<\/span><span>Subscriptions<\/span><\/div>\n <a href=\"#contact\" class=\"link-btn\">Explore service\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n \n <article class=\"service reveal\">\n <button class=\"service-head\" aria-expanded=\"false\">\n <span class=\"service-num\">03<\/span>\n <span class=\"service-title\">UI\/UX Design<\/span>\n <span class=\"service-meta\">Research \u00b7 Interface \u00b7 Systems<\/span>\n <span class=\"service-arrow\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/button>\n <div class=\"service-body\">\n <div class=\"service-inner\">\n <p>Research-driven interfaces that feel effortless. We design digital products people love to use \u2014 from rapid wireframes to pixel-perfect, developer-ready design systems.<\/p>\n <div class=\"service-foot\">\n <div class=\"service-tags\"><span>Product Design<\/span><span>Design Systems<\/span><span>Prototyping<\/span><\/div>\n <a href=\"#contact\" class=\"link-btn\">Explore service\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n \n <article class=\"service reveal\">\n <button class=\"service-head\" aria-expanded=\"false\">\n <span class=\"service-num\">04<\/span>\n <span class=\"service-title\">Digital Branding<\/span>\n <span class=\"service-meta\">Identity \u00b7 Strategy \u00b7 Voice<\/span>\n <span class=\"service-arrow\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/button>\n <div class=\"service-body\">\n <div class=\"service-inner\">\n <p>Identity systems, art direction and brand strategy that make your business unforgettable \u2014 consistent, magnetic and unmistakably yours across every touchpoint.<\/p>\n <div class=\"service-foot\">\n <div class=\"service-tags\"><span>Brand Identity<\/span><span>Art Direction<\/span><span>Guidelines<\/span><\/div>\n <a href=\"#contact\" class=\"link-btn\">Explore service\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n \n <article class=\"service reveal\">\n <button class=\"service-head\" aria-expanded=\"false\">\n <span class=\"service-num\">05<\/span>\n <span class=\"service-title\">SEO & Growth Strategy<\/span>\n <span class=\"service-meta\">Search \u00b7 Content \u00b7 CRO<\/span>\n <span class=\"service-arrow\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/button>\n <div class=\"service-body\">\n <div class=\"service-inner\">\n <p>Data-backed SEO, content strategy and conversion optimization that turn organic search into a predictable, compounding growth channel for your business.<\/p>\n <div class=\"service-foot\">\n <div class=\"service-tags\"><span>Technical SEO<\/span><span>Content Strategy<\/span><span>CRO<\/span><\/div>\n <a href=\"#contact\" class=\"link-btn\">Explore service\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n\n \n <article class=\"service reveal\">\n <button class=\"service-head\" aria-expanded=\"false\">\n <span class=\"service-num\">06<\/span>\n <span class=\"service-title\">Business Automation<\/span>\n <span class=\"service-meta\">CRM \u00b7 Workflows \u00b7 AI<\/span>\n <span class=\"service-arrow\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/button>\n <div class=\"service-body\">\n <div class=\"service-inner\">\n <p>Custom CRM pipelines, workflow automation and system integrations that remove manual work \u2014 letting your team focus on growth instead of spreadsheets.<\/p>\n <div class=\"service-foot\">\n <div class=\"service-tags\"><span>CRM Setup<\/span><span>Workflow Automation<\/span><span>API Integration<\/span><\/div>\n <a href=\"#contact\" class=\"link-btn\">Explore service\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"projects section\" id=\"projects\">\n <div class=\"container\">\n <div class=\"sec-head row\">\n <div>\n <p class=\"label\">Featured Work<\/p>\n <h2 class=\"h2 split\">Selected projects<\/h2>\n <\/div>\n <a href=\"#contact\" class=\"link-btn reveal\">\n Start your project\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n\n \n <article class=\"project\">\n <div class=\"p-num reveal-scale\" aria-hidden=\"true\">01<\/div>\n <div class=\"project-media reveal-scale\">\n <div class=\"p-art aurelia\">\n <span class=\"p-gl\"><\/span>\n <span class=\"p-word\">AURELIA<\/span>\n <span class=\"p-sub\">Est. 2016 \u2014 Milan \/ Paris<\/span>\n <\/div>\n <\/div>\n <div class=\"project-content\">\n <p class=\"label\">E-Commerce \u00b7 Branding<\/p>\n <h3 class=\"split\">AURELIA<span>Luxury Fashion Brand<\/span><\/h3>\n <p class=\"reveal\" style=\"transition-delay:120ms\">\n A high-fashion eCommerce experience with editorial storytelling, a 3D lookbook and a\n checkout flow that lifted online conversion by 41% in the first quarter.\n <\/p>\n <div class=\"project-meta reveal\" style=\"transition-delay:180ms\">\n <div><b>2025<\/b><span>Year<\/span><\/div>\n <div><b>+41%<\/b><span>Conversion<\/span><\/div>\n <div><b>Shopify Plus<\/b><span>Platform<\/span><\/div>\n <\/div>\n <a href=\"#contact\" class=\"btn btn-ghost btn-sm reveal\" style=\"transition-delay:240ms\">\n View Case Study\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/article>\n\n \n <article class=\"project flip\">\n <div class=\"p-num reveal-scale\" aria-hidden=\"true\">02<\/div>\n <div class=\"project-media reveal-scale\">\n <div class=\"p-art nova\">\n <span class=\"p-ring\"><\/span>\n <span class=\"p-orb\"><\/span>\n <span class=\"p-word\">NOVA<\/span>\n <span class=\"p-sub\">Technology Solutions \u2014 San Francisco<\/span>\n <\/div>\n <\/div>\n <div class=\"project-content\">\n <p class=\"label\">Web Platform \u00b7 UI\/UX<\/p>\n <h3 class=\"split\">NOVA<span>Technology Solutions<\/span><\/h3>\n <p class=\"reveal\" style=\"transition-delay:120ms\">\n A global platform redesign for a B2B technology leader \u2014 SaaS dashboards, a scalable\n design system and developer documentation used by 12,000+ teams worldwide.\n <\/p>\n <div class=\"project-meta reveal\" style=\"transition-delay:180ms\">\n <div><b>2025<\/b><span>Year<\/span><\/div>\n <div><b>12k+<\/b><span>Active Teams<\/span><\/div>\n <div><b>React<\/b><span>Stack<\/span><\/div>\n <\/div>\n <a href=\"#contact\" class=\"btn btn-ghost btn-sm reveal\" style=\"transition-delay:240ms\">\n View Case Study\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/article>\n\n \n <article class=\"project\">\n <div class=\"p-num reveal-scale\" aria-hidden=\"true\">03<\/div>\n <div class=\"project-media reveal-scale\">\n <div class=\"p-art verde\">\n <span class=\"p-gl\"><\/span>\n <span class=\"p-word\">VERDE<\/span>\n <span class=\"p-sub\">Modern Lifestyle \u2014 Copenhagen<\/span>\n <\/div>\n <\/div>\n <div class=\"project-content\">\n <p class=\"label\">Branding \u00b7 Web Design<\/p>\n <h3 class=\"split\">VERDE<span>Modern Lifestyle Brand<\/span><\/h3>\n <p class=\"reveal\" style=\"transition-delay:120ms\">\n A sustainable lifestyle brand with a bold digital identity, immersive storytelling and a\n subscription commerce engine \u2014 2M+ impressions in its first launch week.\n <\/p>\n <div class=\"project-meta reveal\" style=\"transition-delay:180ms\">\n <div><b>2024<\/b><span>Year<\/span><\/div>\n <div><b>2M+<\/b><span>Launch Impressions<\/span><\/div>\n <div><b>Headless<\/b><span>Architecture<\/span><\/div>\n <\/div>\n <a href=\"#contact\" class=\"btn btn-ghost btn-sm reveal\" style=\"transition-delay:240ms\">\n View Case Study\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n <\/article>\n <\/div>\n <\/section>\n\n \n <section class=\"impact section\" id=\"impact\">\n <div class=\"container\">\n <p class=\"label center reveal\">The Nexora Effect<\/p>\n <h2 class=\"impact-title split\" style=\"margin-top:26px\">\n Good design looks better.<br \/>\n <em>Smart design performs better.<\/em>\n <\/h2>\n\n <div class=\"impact-stats\">\n <div class=\"impact-stat reveal\">\n <b class=\"count\" data-count=\"150\" data-suffix=\"+\">0<\/b>\n <span>Projects Delivered<\/span>\n <\/div>\n <div class=\"impact-stat reveal\" style=\"transition-delay:110ms\">\n <b class=\"count\" data-count=\"98\" data-suffix=\"%\">0<\/b>\n <span>Client Satisfaction<\/span>\n <\/div>\n <div class=\"impact-stat reveal\" style=\"transition-delay:220ms\">\n <b class=\"count\" data-count=\"35\" data-suffix=\"+\">0<\/b>\n <span>Global Clients<\/span>\n <\/div>\n <div class=\"impact-stat reveal\" style=\"transition-delay:330ms\">\n <b class=\"count\" data-count=\"12\" data-suffix=\"+\">0<\/b>\n <span>Years Experience<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"process section\" id=\"process\">\n <div class=\"container\">\n <div class=\"sec-head center\" style=\"text-align:center; margin-inline:auto\">\n <p class=\"label center\" style=\"justify-content:center\">How We Work<\/p>\n <h2 class=\"h2 split\">Our process<\/h2>\n <p>A proven five-step method that turns ambiguity into a launched, performing product.<\/p>\n <\/div>\n\n <div class=\"process-wrap reveal\">\n <div class=\"process-line\"><i id=\"process-fill\"><\/i><\/div>\n <div class=\"process-grid\">\n <article class=\"step\">\n <div class=\"step-num\">01<\/div>\n <div>\n <h3>Discover<\/h3>\n <p>Deep-dive workshops and research to uncover your audience, goals and untapped opportunities.<\/p>\n <\/div>\n <\/article>\n <article class=\"step\">\n <div class=\"step-num\">02<\/div>\n <div>\n <h3>Strategize<\/h3>\n <p>A clear roadmap \u2014 positioning, information architecture and KPIs that define success.<\/p>\n <\/div>\n <\/article>\n <article class=\"step\">\n <div class=\"step-num\">03<\/div>\n <div>\n <h3>Design<\/h3>\n <p>Interfaces and identities crafted with intent, tested and refined to pixel perfection.<\/p>\n <\/div>\n <\/article>\n <article class=\"step\">\n <div class=\"step-num\">04<\/div>\n <div>\n <h3>Develop<\/h3>\n <p>Clean, scalable code with performance, security and accessibility baked in from day one.<\/p>\n <\/div>\n <\/article>\n <article class=\"step\">\n <div class=\"step-num\">05<\/div>\n <div>\n <h3>Launch<\/h3>\n <p>Deployment, QA and optimization \u2014 then we keep measuring and growing together.<\/p>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"why section\" id=\"why\">\n <div class=\"container why-grid\">\n <div class=\"why-left\">\n <p class=\"label reveal\">Why Choose Us<\/p>\n <h2 class=\"h2 split\" style=\"margin-top:24px\">Why brands choose Nexora<\/h2>\n <p class=\"reveal\" style=\"transition-delay:140ms\">\n We're not a vendor \u2014 we're a growth partner. Every engagement is led by senior strategists\n and measured against the metrics that matter to your P&L.\n <\/p>\n <a href=\"#contact\" class=\"link-btn reveal\" style=\"transition-delay:200ms\">\n Start a project\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <\/div>\n\n <div class=\"benefit-list\">\n <div class=\"benefit reveal\">\n <span class=\"b-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><circle cx=\"12\" cy=\"12\" r=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"1\"\/><\/svg>\n <\/span>\n <h3>Strategic Thinking<\/h3>\n <p>Every pixel tied to a business objective \u2014 no decoration without direction.<\/p>\n <\/div>\n <div class=\"benefit reveal\" style=\"transition-delay:80ms\">\n <span class=\"b-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19l7-7 3 3-7 7-3-3z\"\/><path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"\/><path d=\"M2 2l7.586 7.586\"\/><circle cx=\"11\" cy=\"11\" r=\"2\"\/><\/svg>\n <\/span>\n <h3>Premium Design<\/h3>\n <p>International-grade aesthetics that make your brand impossible to ignore.<\/p>\n <\/div>\n <div class=\"benefit reveal\" style=\"transition-delay:160ms\">\n <span class=\"b-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>\n <\/span>\n <h3>Clean Development<\/h3>\n <p>Semantic, documented, maintainable code your future team will thank you for.<\/p>\n <\/div>\n <div class=\"benefit reveal\" style=\"transition-delay:240ms\">\n <span class=\"b-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>\n <\/span>\n <h3>Mobile First<\/h3>\n <p>Designed for the pocket first \u2014 70% of your customers are already there.<\/p>\n <\/div>\n <div class=\"benefit reveal\" style=\"transition-delay:320ms\">\n <span class=\"b-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>\n <\/span>\n <h3>Fast Performance<\/h3>\n <p>Sub-second loads and 90+ Lighthouse scores \u2014 speed is a conversion feature.<\/p>\n <\/div>\n <div class=\"benefit reveal\" style=\"transition-delay:400ms\">\n <span class=\"b-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\n <\/span>\n <h3>Long-Term Support<\/h3>\n <p>Monitoring, maintenance and continuous improvement long after launch day.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"testimonials section\" id=\"testimonials\">\n <div class=\"container\">\n <div class=\"sec-head center\" style=\"text-align:center; margin-inline:auto\">\n <p class=\"label center\" style=\"justify-content:center\">Client Voices<\/p>\n <h2 class=\"h2 split\">What our clients say<\/h2>\n <\/div>\n\n <div class=\"t-slider reveal\" id=\"t-slider\">\n <div class=\"t-track\" id=\"t-track\">\n\n <figure class=\"t-slide\">\n <div class=\"t-quote-mark\" aria-hidden=\"true\">\u201c<\/div>\n <blockquote>Nexora rebuilt our entire digital presence. Revenue from organic search tripled within six months \u2014 they don't just design, they engineer growth.<\/blockquote>\n <figcaption class=\"t-person\">\n <span class=\"t-avatar\" style=\"background:linear-gradient(135deg,#4f7cff,#2a8cff)\">SM<\/span>\n <span><b>Sarah Mitchell<\/b><span>CEO \u00b7 Vertex Industries<\/span><\/span>\n <\/figcaption>\n <\/figure>\n\n <figure class=\"t-slide\">\n <div class=\"t-quote-mark\" aria-hidden=\"true\">\u201c<\/div>\n <blockquote>The most strategic team we've worked with. Every pixel had a purpose, every decision tied to a measurable business goal.<\/blockquote>\n <figcaption class=\"t-person\">\n <span class=\"t-avatar\" style=\"background:linear-gradient(135deg,#7a5cff,#c084fc)\">DR<\/span>\n <span><b>Daniel Reyes<\/b><span>Founder \u00b7 Lumina Labs<\/span><\/span>\n <\/figcaption>\n <\/figure>\n\n <figure class=\"t-slide\">\n <div class=\"t-quote-mark\" aria-hidden=\"true\">\u201c<\/div>\n <blockquote>Our new platform paid for itself in 90 days. Conversion rate up 214%, support tickets down by half. The numbers speak for themselves.<\/blockquote>\n <figcaption class=\"t-person\">\n <span class=\"t-avatar\" style=\"background:linear-gradient(135deg,#0ea5a4,#38e1ff)\">AH<\/span>\n <span><b>Amira Hassan<\/b><span>COO \u00b7 Altura Group<\/span><\/span>\n <\/figcaption>\n <\/figure>\n\n <figure class=\"t-slide\">\n <div class=\"t-quote-mark\" aria-hidden=\"true\">\u201c<\/div>\n <blockquote>They translated our brand into something the world finally sees. The launch generated 2M impressions in the first week \u2014 our board was stunned.<\/blockquote>\n <figcaption class=\"t-person\">\n <span class=\"t-avatar\" style=\"background:linear-gradient(135deg,#2e5bff,#8fb0ff)\">EP<\/span>\n <span><b>Elena Petrova<\/b><span>Director \u00b7 Orbit Capital<\/span><\/span>\n <\/figcaption>\n <\/figure>\n\n <\/div>\n\n <div class=\"t-controls\">\n <button class=\"t-btn\" id=\"t-prev\" aria-label=\"Previous testimonial\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M11 18l-6-6 6-6\"\/><\/svg>\n <\/button>\n <div class=\"t-dots\" id=\"t-dots\" role=\"tablist\" aria-label=\"Testimonial slides\"><\/div>\n <button class=\"t-btn\" id=\"t-next\" aria-label=\"Next testimonial\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"cta section\" id=\"cta\">\n <div class=\"cta-blob b1\" aria-hidden=\"true\"><\/div>\n <div class=\"cta-blob b2\" aria-hidden=\"true\"><\/div>\n <div class=\"cta-blob b3\" aria-hidden=\"true\"><\/div>\n <div class=\"container cta-inner\">\n <p class=\"label center reveal\">Start Your Project<\/p>\n <h2 class=\"cta-title split\">Ready to build something <em>remarkable?<\/em><\/h2>\n <p class=\"reveal\" style=\"transition-delay:150ms\">\n Let's transform your business idea into a powerful digital experience \u2014 planned with\n strategy, designed with intent and built to perform.\n <\/p>\n <div class=\"cta-actions reveal\" style=\"transition-delay:230ms\">\n <a href=\"#contact\" class=\"btn btn-solid\">\n Start Your Project\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n <\/a>\n <a href=\"#contact\" class=\"btn btn-ghost\">Contact Us<\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"contact section\" id=\"contact\">\n <div class=\"container\">\n <div class=\"sec-head\">\n <p class=\"label reveal\">Contact<\/p>\n <h2 class=\"h2 split\">Let's start a conversation<\/h2>\n <\/div>\n\n <div class=\"contact-grid\">\n \n <div class=\"contact-info\">\n <h3 class=\"reveal\">We'd love to hear from you.<\/h3>\n <p class=\"reveal\" style=\"transition-delay:100ms\">\n Tell us about your project, your goals and your timeline. A senior strategist \u2014\n not a sales bot \u2014 will reply within one business day.\n <\/p>\n\n <div class=\"c-item reveal\">\n <span class=\"c-ico\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"3\"\/><path d=\"m2 7 10 6L22 7\"\/><\/svg>\n <\/span>\n <div>\n <span class=\"c-label\">Email<\/span>\n <a href=\"mailto:hello@nexora.studio\" class=\"c-value\">hello@nexora.studio<\/a>\n <\/div>\n <\/div>\n <div class=\"c-item reveal\" style=\"transition-delay:60ms\">\n <span class=\"c-ico\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>\n <\/span>\n <div>\n <span class=\"c-label\">Phone<\/span>\n <a href=\"tel:+14155550132\" class=\"c-value\">+1 (415) 555-0132<\/a>\n <\/div>\n <\/div>\n <div class=\"c-item reveal\" style=\"transition-delay:120ms\">\n <span class=\"c-ico\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n <\/span>\n <div>\n <span class=\"c-label\">Location<\/span>\n <span class=\"c-value\">88 King Street, San Francisco, CA<\/span>\n <\/div>\n <\/div>\n <div class=\"c-item reveal\" style=\"transition-delay:180ms\">\n <span class=\"c-ico\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3 3\"\/><\/svg>\n <\/span>\n <div>\n <span class=\"c-label\">Business Hours<\/span>\n <span class=\"c-value\">Mon \u2013 Fri \u00b7 9:00 \u2014 18:00 (PST)<\/span>\n <\/div>\n <\/div>\n\n <div class=\"c-socials reveal\" style=\"transition-delay:240ms\">\n <a href=\"#\" class=\"s-btn\" aria-label=\"LinkedIn\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"X (Twitter)\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"Instagram\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><rect x=\"2.5\" y=\"2.5\" width=\"19\" height=\"19\" rx=\"5.5\"\/><circle cx=\"12\" cy=\"12\" r=\"4.2\"\/><circle cx=\"17.6\" cy=\"6.4\" r=\".9\" fill=\"currentColor\" stroke=\"none\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"Behance\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.08 5.406c.978 0 1.812.122 2.52.366.708.244 1.283.6 1.752 1.037.462.449.8.977 1.018 1.62.214.616.322 1.31.322 2.065 0 1.163-.292 2.154-.877 2.973-.59.818-1.46 1.414-2.603 1.789.76.351 1.36.852 1.807 1.503.446.65.674 1.434.674 2.35 0 .809-.157 1.52-.47 2.129-.315.61-.745 1.114-1.294 1.51a5.6 5.6 0 0 1-1.848.905c-.686.207-1.4.31-2.148.31H0V5.406h7.08zm-.416 6.845c.563 0 1.04-.118 1.431-.354.392-.236.686-.537.884-.904.198-.367.296-.774.296-1.222 0-.655-.231-1.163-.695-1.52-.462-.354-1.083-.535-1.862-.535H3.22v4.535h3.444zm.25 6.657c.856 0 1.498-.164 1.927-.496.43-.332.643-.891.643-1.678 0-.537-.117-.972-.354-1.307a2.03 2.03 0 0 0-.914-.719 3.08 3.08 0 0 0-1.213-.232H3.22v4.432h3.694zM21.47 18.48c.545.583 1.35.875 2.408.875.715 0 1.32-.169 1.816-.506.494-.338.79-.697.882-1.078h2.42c-.427 1.48-1.18 2.527-2.26 3.145-1.078.618-2.318.927-3.72.927-1.045 0-1.979-.168-2.8-.505a5.78 5.78 0 0 1-2.06-1.393 6.05 6.05 0 0 1-1.28-2.074c-.29-.796-.437-1.668-.437-2.617 0-.95.14-1.82.427-2.618a6.1 6.1 0 0 1 1.258-2.075c.55-.597 1.21-1.062 1.978-1.396A6.33 6.33 0 0 1 20.2 7.48c.944 0 1.8.17 2.571.508.77.338 1.425.803 1.96 1.393.538.59.95 1.28 1.244 2.065.294.786.44 1.63.44 2.532 0 .173-.01.385-.021.634h-8.985c.104 1.276.516 2.242 1.234 2.9l-.128-.032zm-4.575-6.134h6.189c-.067-1.09-.343-1.94-.828-2.551-.486-.61-1.203-.917-2.151-.917-.692 0-1.267.167-1.723.5a2.66 2.66 0 0 0-.99 1.273c-.21.538-.33 1.108-.497 1.695z\"\/><\/svg><\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"form-card reveal-scale\" style=\"transition-delay:120ms\">\n <form id=\"contact-form\" novalidate>\n <div class=\"f-row\">\n <div class=\"field\">\n <label for=\"f-name\">Full Name<\/label>\n <input type=\"text\" id=\"f-name\" name=\"name\" placeholder=\"Jane Cooper\" autocomplete=\"name\" \/>\n <span class=\"err\"><\/span>\n <\/div>\n <div class=\"field\">\n <label for=\"f-email\">Email Address<\/label>\n <input type=\"email\" id=\"f-email\" name=\"email\" placeholder=\"jane@company.com\" autocomplete=\"email\" \/>\n <span class=\"err\"><\/span>\n <\/div>\n <\/div>\n <div class=\"f-row\" style=\"margin-top:20px\">\n <div class=\"field\">\n <label for=\"f-phone\">Phone Number<\/label>\n <input type=\"tel\" id=\"f-phone\" name=\"phone\" placeholder=\"+1 (555) 000-0000\" autocomplete=\"tel\" \/>\n <span class=\"err\"><\/span>\n <\/div>\n <div class=\"field\">\n <label for=\"f-service\">Select Service<\/label>\n <select id=\"f-service\" name=\"service\">\n <option value=\"\" selected disabled>Choose a service\u2026<\/option>\n <option>Business Website Development<\/option>\n <option>eCommerce Solutions<\/option>\n <option>UI\/UX Design<\/option>\n <option>Digital Branding<\/option>\n <option>SEO & Growth Strategy<\/option>\n <option>Business Automation<\/option>\n <\/select>\n <span class=\"err\"><\/span>\n <\/div>\n <\/div>\n <div class=\"f-row\" style=\"margin-top:20px\">\n <div class=\"field\">\n <label for=\"f-budget\">Project Budget<\/label>\n <select id=\"f-budget\" name=\"budget\">\n <option value=\"\" selected disabled>Select a range\u2026<\/option>\n <option>Under $5,000<\/option>\n <option>$5,000 \u2013 $15,000<\/option>\n <option>$15,000 \u2013 $50,000<\/option>\n <option>$50,000+<\/option>\n <\/select>\n <span class=\"err\"><\/span>\n <\/div>\n <\/div>\n <div class=\"f-row\" style=\"margin-top:20px\">\n <div class=\"field\">\n <label for=\"f-message\">Message<\/label>\n <textarea id=\"f-message\" name=\"message\" placeholder=\"Tell us about your project, goals and timeline\u2026\"><\/textarea>\n <span class=\"err\"><\/span>\n <\/div>\n <\/div>\n <button type=\"submit\" class=\"btn btn-solid form-submit\">\n Send Message\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m22 2-7 20-4-9-9-4 20-7z\"\/><path d=\"M22 2 11 13\"\/><\/svg>\n <\/button>\n <\/form>\n\n <div class=\"form-success\" id=\"form-success\" hidden>\n <div class=\"ok\">\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#38e1ff\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>\n <\/div>\n <h3>Message sent successfully!<\/h3>\n <p id=\"success-text\">Thank you \u2014 our team will get back to you within 24 hours.<\/p>\n <button class=\"btn btn-ghost btn-sm\" id=\"form-reset\" style=\"margin-inline:auto\">Send another message<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"footer\">\n <div class=\"container\">\n <div class=\"footer-top\">\n <a href=\"#home\" class=\"logo footer-logo\">NEXO<b>RA<\/b><i><\/i><\/a>\n <p>Strategy, creativity and technology \u2014 combined into one powerful business experience. Digital agency for ambitious brands.<\/p>\n <\/div>\n\n <div class=\"footer-wordmark\" aria-hidden=\"true\">NEXORA<\/div>\n\n <div class=\"footer-cols\">\n <div class=\"f-col\">\n <h4>Company<\/h4>\n <ul>\n <li><a href=\"#about\">About<\/a><\/li>\n <li><a href=\"#services\">Services<\/a><\/li>\n <li><a href=\"#projects\">Projects<\/a><\/li>\n <li><a href=\"#contact\">Careers<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"f-col\">\n <h4>Services<\/h4>\n <ul>\n <li><a href=\"#services\">Web Development<\/a><\/li>\n <li><a href=\"#services\">eCommerce<\/a><\/li>\n <li><a href=\"#services\">Branding<\/a><\/li>\n <li><a href=\"#services\">SEO<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"f-col\">\n <h4>Resources<\/h4>\n <ul>\n <li><a href=\"#\">Blog<\/a><\/li>\n <li><a href=\"#\">FAQs<\/a><\/li>\n <li><a href=\"#\">Privacy Policy<\/a><\/li>\n <li><a href=\"#\">Terms<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"f-col\">\n <h4>Follow<\/h4>\n <ul>\n <li><a href=\"#\">LinkedIn<\/a><\/li>\n <li><a href=\"#\">X \/ Twitter<\/a><\/li>\n <li><a href=\"#\">Instagram<\/a><\/li>\n <li><a href=\"#\">Behance<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"footer-bottom\">\n <p>\u00a9 <span id=\"year\">2026<\/span> NEXORA. All Rights Reserved.<\/p>\n <div class=\"fb-links\">\n <a href=\"#\" class=\"s-btn\" aria-label=\"LinkedIn\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"X (Twitter)\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"Instagram\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"><rect x=\"2.5\" y=\"2.5\" width=\"19\" height=\"19\" rx=\"5.5\"\/><circle cx=\"12\" cy=\"12\" r=\"4.2\"\/><circle cx=\"17.6\" cy=\"6.4\" r=\".9\" fill=\"currentColor\" stroke=\"none\"\/><\/svg><\/a>\n <a href=\"#\" class=\"s-btn\" aria-label=\"Behance\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M7.08 5.406c.978 0 1.812.122 2.52.366.708.244 1.283.6 1.752 1.037.462.449.8.977 1.018 1.62.214.616.322 1.31.322 2.065 0 1.163-.292 2.154-.877 2.973-.59.818-1.46 1.414-2.603 1.789.76.351 1.36.852 1.807 1.503.446.65.674 1.434.674 2.35 0 .809-.157 1.52-.47 2.129-.315.61-.745 1.114-1.294 1.51a5.6 5.6 0 0 1-1.848.905c-.686.207-1.4.31-2.148.31H0V5.406h7.08zm-.416 6.845c.563 0 1.04-.118 1.431-.354.392-.236.686-.537.884-.904.198-.367.296-.774.296-1.222 0-.655-.231-1.163-.695-1.52-.462-.354-1.083-.535-1.862-.535H3.22v4.535h3.444zm.25 6.657c.856 0 1.498-.164 1.927-.496.43-.332.643-.891.643-1.678 0-.537-.117-.972-.354-1.307a2.03 2.03 0 0 0-.914-.719 3.08 3.08 0 0 0-1.213-.232H3.22v4.432h3.694zM21.47 18.48c.545.583 1.35.875 2.408.875.715 0 1.32-.169 1.816-.506.494-.338.79-.697.882-1.078h2.42c-.427 1.48-1.18 2.527-2.26 3.145-1.078.618-2.318.927-3.72.927-1.045 0-1.979-.168-2.8-.505a5.78 5.78 0 0 1-2.06-1.393 6.05 6.05 0 0 1-1.28-2.074c-.29-.796-.437-1.668-.437-2.617 0-.95.14-1.82.427-2.618a6.1 6.1 0 0 1 1.258-2.075c.55-.597 1.21-1.062 1.978-1.396A6.33 6.33 0 0 1 20.2 7.48c.944 0 1.8.17 2.571.508.77.338 1.425.803 1.96 1.393.538.59.95 1.28 1.244 2.065.294.786.44 1.63.44 2.532 0 .173-.01.385-.021.634h-8.985c.104 1.276.516 2.242 1.234 2.9l-.128-.032zm-4.575-6.134h6.189c-.067-1.09-.343-1.94-.828-2.551-.486-.61-1.203-.917-2.151-.917-.692 0-1.267.167-1.723.5a2.66 2.66 0 0 0-.99 1.273c-.21.538-.33 1.108-.497 1.695z\"\/><\/svg><\/a>\n <button class=\"to-top-link\" id=\"to-top\" type=\"button\">Back to top \u2191<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n \n <button class=\"back-top\" id=\"back-top\" aria-label=\"Back to top\">\n <svg class=\"ring\" viewBox=\"0 0 60 60\" aria-hidden=\"true\">\n <defs>\n <linearGradient id=\"ringGrad\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n <stop offset=\"0\" stop-color=\"#4f7cff\" \/>\n <stop offset=\"1\" stop-color=\"#38e1ff\" \/>\n <\/linearGradient>\n <\/defs>\n <circle class=\"track\" cx=\"30\" cy=\"30\" r=\"26\" \/>\n <circle class=\"fill\" id=\"ring-path\" cx=\"30\" cy=\"30\" r=\"26\" \/>\n <\/svg>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19V5M6 11l6-6 6 6\"\/><\/svg>\n <\/button>\n\n <script>\n \/* ============================================================\n NEXORA \u2014 INTERACTION ENGINE (Vanilla JS)\n ============================================================ *\/\n (() => {\n 'use strict';\n\n const $ = (s, c = document) => c.querySelector(s);\n const $$ = (s, c = document) => [...c.querySelectorAll(s)];\n const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;\n const smooth = (top) => scrollTo({ top, behavior: reduced ? 'auto' : 'smooth' });\n\n \/* ---------- 01. SCROLL: progress bar, header state, back-to-top ring, process line ---------- *\/\n const bar = $('#scroll-bar');\n const header = $('#site-header');\n const backTop = $('#back-top');\n const ringPath = $('#ring-path');\n const procSec = $('#process');\n const procFill = $('#process-fill');\n const RING = 2 * Math.PI * 26; \/\/ r = 26 (viewBox 60)\n ringPath.style.strokeDasharray = RING;\n\n let ticking = false;\n function onScrollUpdate() {\n const st = scrollY;\n const max = document.documentElement.scrollHeight - innerHeight;\n const p = max > 0 ? st \/ max : 0;\n\n bar.style.transform = `scaleX(${p})`;\n ringPath.style.strokeDashoffset = RING * (1 - p);\n header.classList.toggle('scrolled', st > 40);\n backTop.classList.toggle('show', st > 600);\n\n \/\/ Process timeline \u2014 animated connecting line follows scroll\n if (procSec && procFill) {\n const r = procSec.getBoundingClientRect();\n const progress = Math.min(Math.max((innerHeight * 0.72 - r.top) \/ r.height, 0), 1);\n const vertical = matchMedia('(max-width:1000px)').matches;\n procFill.style.transform = vertical ? `scaleY(${progress})` : `scaleX(${progress})`;\n }\n ticking = false;\n }\n addEventListener('scroll', () => {\n if (!ticking) { requestAnimationFrame(onScrollUpdate); ticking = true; }\n }, { passive: true });\n onScrollUpdate();\n\n backTop.addEventListener('click', () => smooth(0));\n $('#to-top').addEventListener('click', () => smooth(0));\n\n \/* ---------- 02. MOBILE MENU ---------- *\/\n const burger = $('#burger');\n const menu = $('#mobile-menu');\n function setMenu(open) {\n menu.classList.toggle('open', open);\n burger.classList.toggle('active', open);\n burger.setAttribute('aria-expanded', open);\n document.body.classList.toggle('no-scroll', open);\n }\n burger.addEventListener('click', () => setMenu(!menu.classList.contains('open')));\n $$('.m-link, .m-cta, .m-social a', menu).forEach(a =>\n a.addEventListener('click', () => setMenu(false))\n );\n\n \/* ---------- 03. WORD-LEVEL TEXT REVEAL ---------- *\/\n \/\/ Wraps every word of [.split] headings in <span class=\"word\"><span class=\"w-inner\">\u2026\n function splitWords(root) {\n const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);\n const nodes = [];\n while (walker.nextNode()) nodes.push(walker.currentNode);\n let i = 0;\n nodes.forEach(node => {\n const frag = document.createDocumentFragment();\n node.textContent.split(\/(\\s+)\/).forEach(part => {\n if (!part) return;\n if (\/^\\s+$\/.test(part)) { frag.appendChild(document.createTextNode(' ')); return; }\n const w = document.createElement('span');\n w.className = 'word';\n w.style.setProperty('--i', i++);\n const inner = document.createElement('span');\n inner.className = 'w-inner';\n inner.textContent = part;\n w.appendChild(inner);\n frag.appendChild(w);\n });\n node.parentNode.replaceChild(frag, node);\n });\n }\n $$('.split').forEach(splitWords);\n\n \/* ---------- 04. INTERSECTION OBSERVER \u2014 scroll animations ---------- *\/\n const io = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }\n });\n }, { threshold: 0.15, rootMargin: '0px 0px -7% 0px' });\n $$('.reveal, .reveal-scale, .split').forEach(el => io.observe(el));\n\n \/* ---------- 05. ANIMATED NUMBER COUNTERS ---------- *\/\n const counterIO = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (!e.isIntersecting) return;\n counterIO.unobserve(e.target);\n const el = e.target;\n const target = +el.dataset.count;\n const suffix = el.dataset.suffix || '';\n const duration = 2100;\n const t0 = performance.now();\n (function tick(now) {\n const p = Math.min((now - t0) \/ duration, 1);\n const ease = 1 - Math.pow(1 - p, 4); \/\/ easeOutQuart\n el.textContent = Math.round(target * ease) + suffix;\n if (p < 1) requestAnimationFrame(tick);\n })(t0);\n });\n }, { threshold: 0.5 });\n $$('[data-count]').forEach(el => counterIO.observe(el));\n\n \/* ---------- 06. SERVICES ACCORDION ---------- *\/\n $$('.service').forEach(item => {\n const head = $('.service-head', item);\n head.addEventListener('click', () => {\n const isOpen = item.classList.contains('open');\n $$('.service.open').forEach(o => {\n o.classList.remove('open');\n $('.service-head', o).setAttribute('aria-expanded', 'false');\n });\n if (!isOpen) {\n item.classList.add('open');\n head.setAttribute('aria-expanded', 'true');\n }\n });\n });\n\n \/* ---------- 07. TESTIMONIAL SLIDER ---------- *\/\n const slider = $('#t-slider');\n const track = $('#t-track');\n const slides = $$('.t-slide', slider);\n const dotsBox = $('#t-dots');\n let idx = 0, timer;\n\n slides.forEach((_, i) => {\n const b = document.createElement('button');\n b.className = 'dot' + (i === 0 ? ' active' : '');\n b.setAttribute('aria-label', `Go to testimonial ${i + 1}`);\n b.addEventListener('click', () => { go(i); restart(); });\n dotsBox.appendChild(b);\n });\n const dots = $$('.dot', dotsBox);\n\n function go(i) {\n idx = (i + slides.length) % slides.length;\n track.style.transform = `translateX(-${idx * 100}%)`;\n dots.forEach((d, j) => d.classList.toggle('active', j === idx));\n }\n function restart() {\n clearInterval(timer);\n timer = setInterval(() => go(idx + 1), 5000); \/\/ auto-slide every 5s\n }\n $('#t-prev').addEventListener('click', () => { go(idx - 1); restart(); });\n $('#t-next').addEventListener('click', () => { go(idx + 1); restart(); });\n slider.addEventListener('mouseenter', () => clearInterval(timer));\n slider.addEventListener('mouseleave', restart);\n\n \/\/ Touch swipe support\n let touchX = 0;\n slider.addEventListener('touchstart', e => { touchX = e.touches[0].clientX; clearInterval(timer); }, { passive: true });\n slider.addEventListener('touchend', e => {\n const dx = e.changedTouches[0].clientX - touchX;\n if (Math.abs(dx) > 46) go(idx + (dx < 0 ? 1 : -1));\n restart();\n }, { passive: true });\n restart();\n\n \/* ---------- 08. SCROLLSPY \u2014 active nav link ---------- *\/\n const navLinks = $$('.nav-link');\n const spy = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n navLinks.forEach(l =>\n l.classList.toggle('active', l.getAttribute('href') === '#' + e.target.id)\n );\n }\n });\n }, { rootMargin: '-40% 0px -55% 0px' });\n $$('section[id]').forEach(s => spy.observe(s));\n\n \/* ---------- 09. HERO VISUAL \u2014 subtle 3D tilt ---------- *\/\n const visual = $('#hero-visual');\n const scene = $('#core-scene');\n if (matchMedia('(hover:hover) and (pointer:fine)').matches && !reduced && scene) {\n visual.addEventListener('mousemove', e => {\n const r = visual.getBoundingClientRect();\n const x = (e.clientX - r.left) \/ r.width - 0.5;\n const y = (e.clientY - r.top) \/ r.height - 0.5;\n scene.style.transition = 'transform .08s linear';\n scene.style.transform = `rotateY(${x * 9}deg) rotateX(${-y * 9}deg)`;\n });\n visual.addEventListener('mouseleave', () => {\n scene.style.transition = 'transform .9s cubic-bezier(.22,1,.36,1)';\n scene.style.transform = '';\n });\n }\n\n \/* ---------- 10. CONTACT FORM VALIDATION ---------- *\/\n const form = $('#contact-form');\n const fields = {\n name: $('#f-name'),\n email: $('#f-email'),\n phone: $('#f-phone'),\n service: $('#f-service'),\n budget: $('#f-budget'),\n message: $('#f-message')\n };\n const validators = {\n name: v => v.trim().length >= 2 || 'Please enter your full name.',\n email: v => \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/.test(v.trim()) || 'Please enter a valid email address.',\n phone: v => \/^[+()\\-.\\s\\d]{7,20}$\/.test(v.trim()) || 'Please enter a valid phone number.',\n service: v => v !== '' || 'Please select a service.',\n budget: v => v !== '' || 'Please select a budget range.',\n message: v => v.trim().length >= 10 || 'Message must be at least 10 characters.'\n };\n const validate = key => validators[key](fields[key].value);\n function setError(input, msg) {\n const field = input.closest('.field');\n field.classList.toggle('error', !!msg);\n $('.err', field).textContent = msg || '';\n }\n \/\/ Live re-validation once a field has been flagged\n Object.keys(fields).forEach(key => {\n const input = fields[key];\n input.addEventListener('blur', () => setError(input, validate(key)));\n input.addEventListener('input', () => {\n if (input.closest('.field').classList.contains('error')) setError(input, validate(key));\n });\n });\n\n form.addEventListener('submit', e => {\n e.preventDefault();\n let ok = true;\n Object.keys(fields).forEach(key => {\n const msg = validate(key);\n setError(fields[key], msg);\n if (msg) ok = false;\n });\n if (!ok) return;\n \/\/ Simulated successful submission\n $('#success-text').textContent =\n `Thank you, ${fields.name.value.trim().split(' ')[0]}! Your message has been received \u2014 a senior strategist will reply within 24 hours.`;\n form.hidden = true;\n $('#form-success').hidden = false;\n });\n $('#form-reset').addEventListener('click', () => {\n form.reset();\n $$('.field', form).forEach(f => f.classList.remove('error'));\n form.hidden = false;\n $('#form-success').hidden = true;\n });\n\n \/* ---------- 11. MISC ---------- *\/\n \/\/ Footer year\n $('#year').textContent = new Date().getFullYear();\n \/\/ Neutralize placeholder links\n $$('a[href=\"#\"]').forEach(a => a.addEventListener('click', e => e.preventDefault()));\n })();\n <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NEXORA \u2014 Digital Business Agency NEXORA Home About Services Projects Process Testimonials Contact Let’s Talk 01Home 02About 03Services 04Projects 05Process […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","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":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","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-684","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/comments?post=684"}],"version-history":[{"count":4,"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/684\/revisions"}],"predecessor-version":[{"id":688,"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/pages\/684\/revisions\/688"}],"wp:attachment":[{"href":"https:\/\/bakar.ssrmovies.news\/index.php\/wp-json\/wp\/v2\/media?parent=684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}