/* Accord Growth Engine — MOBILE (<992px) counterpart to growth-engine.css --------------------------------------------------------------------------- Everything is scoped under #growth-engine-mobile and every class carries a `gem-` prefix. The source design used bare names (.card/.btn/.tabs/.hero/.cta) and :root variables, all of which collide with Bootstrap and this page — the prefix prevents collisions in BOTH directions (our rules don't leak out, and Bootstrap's .card/.btn don't leak in). The original's global html/body/* resets are deliberately not ported; they would have darkened the whole site. */ #growth-engine-mobile{ --gem-bg:#090a0d; --gem-panel:#111319; --gem-panel2:#151820; --gem-text:#f7f8fa; --gem-muted:#a8afbc; --gem-line:rgba(255,255,255,.10); --gem-red:#e82329; --gem-red2:#ff615f; --gem-soft:#ffd2c9; --gem-radius:22px; max-width:520px;margin:auto;overflow:hidden; /* was body{} in the source — kept on the section so it can't darken the site */ background:radial-gradient(circle at 50% 0,rgba(232,35,41,.13),transparent 34rem),var(--gem-bg); color:var(--gem-text); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; } #growth-engine-mobile,#growth-engine-mobile *{box-sizing:border-box} #growth-engine-mobile a{color:inherit;text-decoration:none} #growth-engine-mobile button{font:inherit} /* Bootstrap ships a global `svg{fill:currentColor}` which beats an SVG's own fill="none" presentation attribute and fills these stroked icons solid. (Same bug that filled the desktop HUD reticle into a grey disc.) */ #growth-engine-mobile svg[fill="none"], #growth-engine-mobile svg[fill="none"] circle, #growth-engine-mobile svg[fill="none"] rect, #growth-engine-mobile svg[fill="none"] path{fill:none} /* ---------- hero ---------- */ #growth-engine-mobile .gem-hero{padding:72px 20px 34px} #growth-engine-mobile .gem-eyebrow{display:flex;align-items:center;gap:9px;color:var(--gem-red2);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase} #growth-engine-mobile .gem-eyebrow:before{content:"";width:26px;height:1px;background:currentColor} #growth-engine-mobile .gem-hero h2{font-size:clamp(34px,10vw,48px);letter-spacing:-.055em;line-height:.98;margin:18px 0 16px;max-width:440px} #growth-engine-mobile .gem-hero p{margin:0;color:#c5cad3;line-height:1.65;font-size:16px;max-width:430px} #growth-engine-mobile .gem-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:28px} #growth-engine-mobile .gem-flow div{min-width:0} #growth-engine-mobile .gem-flow small{display:block;color:#737c8c;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px} #growth-engine-mobile .gem-flow strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #growth-engine-mobile .gem-flow .gem-arrow{color:var(--gem-red2)} /* ---------- orbit visual ---------- */ #growth-engine-mobile .gem-visual{position:relative;width:min(100%,370px);aspect-ratio:1/1;margin:14px auto 0} #growth-engine-mobile .gem-rings, #growth-engine-mobile .gem-rings:before, #growth-engine-mobile .gem-rings:after{position:absolute;inset:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none} #growth-engine-mobile .gem-rings{width:52%;height:52%;border:1px solid rgba(232,35,41,.34);box-shadow:0 0 80px rgba(232,35,41,.12)} #growth-engine-mobile .gem-rings:before{content:"";width:138%;height:138%;border:1px dashed rgba(255,142,132,.26);animation:gem-spin 18s linear infinite} #growth-engine-mobile .gem-rings:after{content:"";width:58%;height:58%;border:1px solid rgba(255,255,255,.12)} @keyframes gem-spin{to{transform:translate(-50%,-50%) rotate(360deg)}} #growth-engine-mobile .gem-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#ff8b7f 0 8%,var(--gem-red) 9% 28%,rgba(232,35,41,.13) 29% 100%);box-shadow:0 0 42px rgba(232,35,41,.4)} #growth-engine-mobile .gem-core span{position:absolute;top:82px;font-size:9px;font-weight:800;letter-spacing:.15em;color:#8e96a4;white-space:nowrap} #growth-engine-mobile .gem-node{position:absolute;width:54px;height:54px;padding:0;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(16,18,24,.94);color:#ff8b82;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.28);transition:.25s ease;cursor:pointer} #growth-engine-mobile .gem-node svg{width:21px} #growth-engine-mobile .gem-node b{position:absolute;top:61px;font-size:9px;letter-spacing:.08em;color:#9098a6;white-space:nowrap} #growth-engine-mobile .gem-node.gem-active{background:var(--gem-red);color:#fff;border-color:var(--gem-red);transform:scale(1.08);box-shadow:0 12px 34px rgba(232,35,41,.35)} #growth-engine-mobile .gem-node[data-i="0"]{left:6%;top:40%} #growth-engine-mobile .gem-node[data-i="1"]{left:50%;top:5%;transform:translateX(-50%)} #growth-engine-mobile .gem-node[data-i="1"].gem-active{transform:translateX(-50%) scale(1.08)} #growth-engine-mobile .gem-node[data-i="2"]{right:6%;top:40%} #growth-engine-mobile .gem-node[data-i="3"]{right:17%;bottom:8%} #growth-engine-mobile .gem-node[data-i="4"]{left:17%;bottom:8%} #growth-engine-mobile .gem-beam{position:absolute;left:50%;top:50%;width:2px;height:36%;transform-origin:50% 0;background:linear-gradient(var(--gem-red),transparent);opacity:.33} #growth-engine-mobile .gem-beam:nth-of-type(1){transform:rotate(-90deg)} #growth-engine-mobile .gem-beam:nth-of-type(2){transform:rotate(-36deg)} #growth-engine-mobile .gem-beam:nth-of-type(3){transform:rotate(36deg)} #growth-engine-mobile .gem-beam:nth-of-type(4){transform:rotate(108deg)} #growth-engine-mobile .gem-beam:nth-of-type(5){transform:rotate(180deg)} /* ---------- metrics ---------- */ #growth-engine-mobile .gem-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 20px 34px} #growth-engine-mobile .gem-metric{border:1px solid var(--gem-line);background:rgba(255,255,255,.025);border-radius:15px;padding:13px 11px} #growth-engine-mobile .gem-metric b{display:block;font-size:21px} #growth-engine-mobile .gem-metric small{font-size:10px;color:#858e9d;line-height:1.25;display:block;margin-top:3px} /* ---------- services: tabs + swipeable cards ---------- */ #growth-engine-mobile .gem-services{padding:46px 0 20px;border-top:1px solid var(--gem-line)} #growth-engine-mobile .gem-head{padding:0 20px 22px} #growth-engine-mobile .gem-head h3{font-size:27px;letter-spacing:-.035em;margin:12px 0 8px} #growth-engine-mobile .gem-head p{margin:0;color:var(--gem-muted);font-size:14px;line-height:1.6} #growth-engine-mobile .gem-tabs{display:flex;gap:9px;overflow:auto;padding:0 20px 14px;scrollbar-width:none;position:sticky;top:0;z-index:10;background:linear-gradient(var(--gem-bg) 76%,transparent);-webkit-overflow-scrolling:touch} #growth-engine-mobile .gem-tabs::-webkit-scrollbar{display:none} #growth-engine-mobile .gem-tab{flex:0 0 auto;border:1px solid var(--gem-line);background:#101217;color:#b8bec8;border-radius:999px;padding:10px 14px;font-size:12px;font-weight:700;cursor:pointer} #growth-engine-mobile .gem-tab.gem-active{background:var(--gem-red);border-color:var(--gem-red);color:#fff} #growth-engine-mobile .gem-cards{display:flex;overflow:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 20px 26px;scrollbar-width:none} #growth-engine-mobile .gem-cards::-webkit-scrollbar{display:none} #growth-engine-mobile .gem-card{scroll-snap-align:center;flex:0 0 calc(100% - 28px);min-height:390px;border:1px solid var(--gem-line);background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border-radius:var(--gem-radius);padding:22px;position:relative;overflow:hidden} #growth-engine-mobile .gem-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(232,35,41,.10);filter:blur(30px);right:-60px;top:-50px} #growth-engine-mobile .gem-card .gem-num{font-size:10px;letter-spacing:.18em;color:var(--gem-red2);font-weight:800} #growth-engine-mobile .gem-card .gem-icon{width:48px;height:48px;border-radius:15px;background:rgba(232,35,41,.12);border:1px solid rgba(232,35,41,.35);display:grid;place-items:center;color:#ff756d;margin:18px 0} #growth-engine-mobile .gem-card .gem-icon svg{width:22px} #growth-engine-mobile .gem-card h4{font-size:24px;letter-spacing:-.03em;margin:0 0 10px} #growth-engine-mobile .gem-card>p{color:#b7bdc8;font-size:14px;line-height:1.6;margin:0} #growth-engine-mobile .gem-path{margin:18px 0;color:#fff;font-size:12px;background:rgba(232,35,41,.08);border:1px solid rgba(232,35,41,.26);border-radius:12px;padding:12px} #growth-engine-mobile .gem-card details{border-top:1px solid var(--gem-line);margin-top:17px;padding-top:14px} #growth-engine-mobile .gem-card summary{cursor:pointer;color:#d6dae1;font-size:13px;font-weight:700;list-style:none} #growth-engine-mobile .gem-card summary::-webkit-details-marker{display:none} #growth-engine-mobile .gem-card ul{padding-left:18px;margin:13px 0 0;color:#9ea6b3;font-size:13px;line-height:1.75} #growth-engine-mobile .gem-card a{display:inline-flex;align-items:center;gap:7px;margin-top:20px;color:#ff6e67;font-size:14px;font-weight:800} #growth-engine-mobile .gem-swipe{padding:0 20px;color:#747d8c;font-size:11px;text-align:center} /* ---------- connected system ---------- */ #growth-engine-mobile .gem-system{margin-top:38px;padding:54px 20px;border-top:1px solid var(--gem-line)} #growth-engine-mobile .gem-system h3{font-size:29px;letter-spacing:-.04em;line-height:1.08;margin:12px 0} #growth-engine-mobile .gem-system p{color:var(--gem-muted);line-height:1.6;font-size:14px} #growth-engine-mobile .gem-steps{margin-top:26px;display:grid;gap:12px} #growth-engine-mobile .gem-step{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;border:1px solid var(--gem-line);background:rgba(255,255,255,.025);padding:13px;border-radius:15px} #growth-engine-mobile .gem-step b{height:34px;border-radius:10px;background:rgba(232,35,41,.12);color:#ff7069;display:grid;place-items:center} #growth-engine-mobile .gem-step span{font-size:13px;color:#d8dce3} /* ---------- CTA ---------- */ #growth-engine-mobile .gem-cta{padding:20px 20px 84px} #growth-engine-mobile .gem-cta-box{padding:28px 22px;border-radius:26px;background:linear-gradient(145deg,#e82329,#a30e17);box-shadow:0 25px 70px rgba(232,35,41,.24)} #growth-engine-mobile .gem-cta-box h3{font-size:28px;line-height:1.05;letter-spacing:-.04em;margin:0 0 12px} #growth-engine-mobile .gem-cta-box p{color:#ffe6e4;font-size:14px;line-height:1.55;margin:0} #growth-engine-mobile .gem-buttons{display:grid;gap:10px;margin-top:22px} #growth-engine-mobile .gem-btn{min-height:50px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;text-align:center;padding:0 18px} #growth-engine-mobile .gem-btn.gem-primary{background:#fff;color:#b9121d} #growth-engine-mobile .gem-btn.gem-secondary{border:1px solid rgba(255,255,255,.38);color:#fff} @media(prefers-reduced-motion:reduce){ #growth-engine-mobile .gem-rings:before{animation:none} }