/*
Theme Name:   Hello Elementor Child
Theme URI:    https://elementor.com/hello-theme/
Description:  Child theme of Hello Elementor for custom styling and overrides.
Author:       Your Name
Author URI:   https://example.com
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/* Add your custom CSS below this line */


@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --cyan: #22D3EE;
  --cyan-dim: #0891B2;
  --magenta: #D946EF;
  --magenta-dim: #C026D3;

  --bg: #0B0A11;
  --bg-alt: rgba(255,255,255,0.025);
  --surface: #131316;
  --border: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.18);

  --text: #FAFAFA;
  --text-dim: rgba(250,250,250,0.62);
  --text-mute: rgba(250,250,250,0.4);

  --font-display: 'General Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 9999px;
}
* { box-sizing: border-box; }
body {
  margin:0;
  background:
    radial-gradient(ellipse 1100px 900px at 12% -12%, rgba(139,92,246,0.24), transparent 60%),
    radial-gradient(ellipse 1200px 950px at 100% 8%, rgba(217,70,239,0.18), transparent 60%),
    radial-gradient(ellipse 900px 800px at 6% 55%, rgba(34,211,238,0.10), transparent 60%),
    radial-gradient(ellipse 1000px 900px at 92% 92%, rgba(139,92,246,0.18), transparent 65%),
    radial-gradient(ellipse 1500px 1100px at 50% 45%, rgba(88,28,135,0.12), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color:var(--text); font-family:var(--font-body); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3 { font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em; margin:0; }
a { color:var(--cyan); text-decoration:none; }
img { max-width:100%; display:block; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:600; border-radius:var(--r-full); border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; position:relative; z-index:0; overflow:hidden; transition:transform .45s cubic-bezier(0.22,1,0.36,1), box-shadow .45s cubic-bezier(0.22,1,0.36,1), background-position .6s ease, border-color .4s ease, color .4s ease; }
.btn::before { content:''; position:absolute; top:0; left:-75%; width:45%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,0.45), transparent); transform:skewX(-18deg); transition:left .75s cubic-bezier(0.22,1,0.36,1); z-index:-1; pointer-events:none; }
.btn:hover::before { left:130%; }
.btn:active { transform:scale(0.96) !important; }
.btn svg { transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
.btn:hover svg { transform:translate(3px,-3px); }
.btn-primary { background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--cyan)); background-size:200% 100%; background-position:0% 0%; color:#05070a; }
.btn-primary:hover { transform:translateY(-3px); background-position:100% 0%; box-shadow:0 10px 30px rgba(34,211,238,0.3), 0 10px 30px rgba(217,70,239,0.22); }
.btn-outline { background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-outline:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(34,211,238,0.07); transform:translateY(-3px); box-shadow:0 10px 26px rgba(34,211,238,0.16); }
.btn-sm { padding:9px 18px; font-size:13px; }
.btn-md { padding:12px 22px; font-size:14px; }
.btn-lg { padding:15px 28px; font-size:14.5px; }

.eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--cyan); }
.eyebrow::before { content:''; width:16px; height:1px; background:var(--cyan); }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); }

@keyframes spin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }

.spin-badge { position:relative; width:84px; height:84px; flex:none; }
.spin-badge svg.ring { animation:spin 16s linear infinite; }
.spin-badge .core { position:absolute; inset:12px; border-radius:50%; background:var(--bg); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; }

.ticker-bar { overflow:hidden; white-space:nowrap; background:linear-gradient(90deg,var(--cyan),var(--magenta)); padding:22px 0; }
.ticker-track { display:inline-flex; align-items:center; animation:marquee 28s linear infinite; }
.ticker-track span { display:inline-flex; align-items:center; gap:14px; padding:0 32px; font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:0.03em; text-transform:uppercase; color:#05070a; }

.star-row { display:inline-flex; gap:2px; }
.section { padding:88px 40px; }
.wrap { max-width:1280px; margin:0 auto; }

.svc-row { display:flex; align-items:center; gap:20px; padding:22px 0; border-top:1px solid var(--border); transition:background .2s ease; }
.svc-row:hover { background:rgba(255,255,255,0.02); }
.svc-icon { width:52px; height:52px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex:none; color:var(--cyan); }
.svc-arrow { width:36px; height:36px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; flex:none; color:var(--text-dim); transition:all .2s ease; }
.svc-row:hover .svc-arrow { background:var(--cyan); color:#05070a; border-color:var(--cyan); transform:rotate(45deg); }

.stat-card { border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; display:flex; align-items:center; gap:14px; }
.stat-icon { width:42px; height:42px; border-radius:50%; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; flex:none; }

.pill { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border-strong); border-radius:var(--r-full); padding:8px 16px; font-size:13px; color:var(--text-dim); }

.testim-dot { width:44px; height:44px; border-radius:50%; padding:0; border:2px solid transparent; background:transparent; cursor:pointer; overflow:hidden; }
.testim-dot.active { border-color:var(--cyan); }
.testim-dot img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}

.services-row { display: flex; align-items: center; gap: 16px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,0.1); position: relative; cursor: pointer; overflow: visible; transition: padding-left .6s cubic-bezier(0.22,1,0.36,1); }
.services-row:hover { padding-left: 14px; }
.services-row .row-glow { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(34,211,238,0.16), transparent 65%); border-radius: var(--r-lg); opacity: 0; transition: opacity .6s cubic-bezier(0.22,1,0.36,1); pointer-events: none; }
.services-row:hover .row-glow { opacity: 1; }
.services-row .row-desc { display: none; font-family: var(--font-body); font-size: 14px; color: rgba(250,250,250,0.6); margin-top: 8px; max-width: 750px; }
.services-row:hover .row-desc { display: block; }
.services-row .row-number { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: rgba(250,250,250,0.35); position: relative; transition: opacity .5s ease, transform .5s ease; }
.services-row:hover .row-number { opacity: 0; transform: scale(0.7); }
.services-row .row-icon { width: 52px; height: 52px; border-radius: var(--r-lg); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; flex: none; color: #FAFAFA; transition: background .6s cubic-bezier(0.22,1,0.36,1), transform .6s cubic-bezier(0.22,1,0.36,1); position: relative; z-index: 1; }
.services-row:hover .row-icon { background: linear-gradient(135deg, var(--cyan), var(--cyan-dim)); transform: scale(1.08) rotate(-6deg); }
.services-row.row-alt:hover .row-icon { background: linear-gradient(135deg, var(--magenta), var(--magenta-dim)); }
.services-row.row-alt .row-glow { background: linear-gradient(270deg, rgba(217,70,239,0.16), transparent 65%); }
.row-chevrons { position: absolute; left: -70px; top: 50%; transform: translate(0, -50%); opacity: 0; transition: opacity .7s cubic-bezier(0.22,1,0.36,1), transform .7s cubic-bezier(0.22,1,0.36,1); pointer-events: none; z-index: 0; }
.services-row:hover .row-chevrons { opacity: 1; transform: translate(24px, -50%); }
.row-arrow-wrap { opacity: 0; flex: none; line-height: 0; position: absolute; right: 50px; top: 50%; width: 220px; height: 220px; transform: translateY(-50%) scale(0.82) rotate(-8deg); pointer-events: none; transition: opacity .7s cubic-bezier(0.22,1,0.36,1), transform .7s cubic-bezier(0.22,1,0.36,1); filter: drop-shadow(0 18px 34px rgba(0,0,0,0.5)); }
.services-row:hover .row-arrow-wrap { opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); }
.row-arrow-diamond { position: absolute; inset: 0; clip-path: path('M130 20 L200 90 Q220 110 200 130 L130 200 Q110 220 90 200 L20 130 Q0 110 20 90 L90 20 Q110 0 130 20 Z'); overflow: hidden; }
.row-arrow-diamond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(0.22,1,0.36,1); transform: scale(1.12); }
.services-row:hover .row-arrow-diamond img { transform: scale(1); }
.row-arrow-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.6); width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.3); z-index: 1; opacity: 0; transition: opacity .5s ease .15s, transform .5s cubic-bezier(0.34,1.56,0.64,1) .15s; }
.services-row:hover .row-arrow-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.portfolio-track { animation: portfolioMarquee 38s linear infinite; }
.portfolio-track-rev { animation: portfolioMarqueeRev 34s linear infinite; }
.portfolio-marquee-wrap:hover .portfolio-track,
.portfolio-marquee-wrap:hover .portfolio-track-rev { animation-play-state: paused; }
@keyframes portfolioMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes portfolioMarqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.port-tile { position:relative; flex:none; border-radius:14px; overflow:hidden; cursor:pointer; border:1px solid rgba(255,255,255,0.08); transition:transform .5s cubic-bezier(0.22,1,0.36,1), box-shadow .5s cubic-bezier(0.22,1,0.36,1), border-color .5s ease; }
.port-tile:hover { transform:translateY(-8px); box-shadow:0 24px 48px rgba(0,0,0,0.5); border-color:var(--cyan); }
.port-tile.alt:hover { border-color:var(--magenta); }
.port-img { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.1); filter:saturate(0.65) brightness(0.7); transition:transform .9s cubic-bezier(0.22,1,0.36,1), filter .6s ease; }
.port-tile:hover .port-img { transform:scale(1.2); filter:saturate(1.15) brightness(0.55); }
.port-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.92) 100%); opacity:0.55; transition:opacity .5s ease; }
.port-tile:hover .port-overlay { opacity:1; }
.port-arrow { position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.12); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(0.4) rotate(-45deg); transition:opacity .45s ease, transform .55s cubic-bezier(0.34,1.56,0.64,1), background .3s ease; }
.port-tile:hover .port-arrow { opacity:1; transform:scale(1) rotate(0deg); background:var(--cyan); }
.port-tile.alt:hover .port-arrow { background:var(--magenta); }
.port-text { position:absolute; left:18px; right:18px; bottom:18px; }
.port-tag { display:inline-block; font-family:var(--font-body); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:0.07em; color:#05070a; background:var(--cyan); padding:4px 11px; border-radius:999px; transform:translateY(16px); opacity:0; transition:transform .5s cubic-bezier(0.34,1.56,0.64,1) .08s, opacity .4s ease .08s; }
.port-tile.alt .port-tag { background:var(--magenta); }
.port-tile:hover .port-tag { transform:translateY(0); opacity:1; }
.port-title { font-family:var(--font-display); font-weight:700; font-size:17px; color:#fff; margin-top:9px; line-height:1.25; transform:translateY(22px); opacity:0; transition:transform .55s cubic-bezier(0.34,1.56,0.64,1) .16s, opacity .4s ease .16s; }
.port-tile:hover .port-title { transform:translateY(0); opacity:1; }