{"id":11752,"date":"2026-05-11T02:37:53","date_gmt":"2026-05-11T06:37:53","guid":{"rendered":"https:\/\/gradiantstg1.wpenginepowered.com\/?page_id=11752"},"modified":"2026-05-14T07:56:26","modified_gmt":"2026-05-14T11:56:26","slug":"homepage-hero-takeover","status":"publish","type":"page","link":"https:\/\/gradiant.com\/ko\/homepage-hero-takeover\/","title":{"rendered":"homepage-hero-takeover"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11752\" class=\"elementor elementor-11752\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc94e08 e-con-full e-flex e-con e-parent\" data-id=\"fc94e08\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-86e1db8 hypersolved-hero e-con-full e-flex e-con e-child\" data-id=\"86e1db8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eefbe53 elementor-widget__width-inherit elementor-absolute elementor-widget elementor-widget-html\" data-id=\"eefbe53\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* Hero CSS *\/\n.hypersolved-hero {\n  position: relative;\n  height: 100vh;\n  overflow: hidden;\n}\n\n\/* Below the design's own aspect ratio (1440:873 \u2248 1.683), 100vh would leave a black gap above the SVG, so we release to aspect-ratio lock. Hero shrinks\/grows to the SVG's natural height and the SVG fills exactly.\n   `!important` on every property is here to defeat the production `.hero-height { min-height: 102vh !important }` rule. min-height: 0 explicitly zeroes that floor \u2014 without it, height:auto + aspect-ratio still computes to 102vh and the gap returns. *\/\n@media (max-aspect-ratio: 1440 \/ 873) {\n  .hypersolved-hero {\n    height: auto !important;\n    aspect-ratio: 1440 \/ 873 !important;\n    min-height: 0 !important;\n  }\n}\n\n\/* Defensive 600px floor \u2014 only above 1.683 AR, where the hero is already 100vh and 600px is a no-op on any reasonable viewport. Below that AR the hero is sized by the SVG's natural aspect-ratio, and a 600px floor would re-introduce the gap on portrait tablets (where the SVG natural height is ~466px). *\/\n@media (min-aspect-ratio: 1440 \/ 873) {\n  .hypersolved-hero {\n    min-height: 600px;\n  }\n}\n\n\/* Mobile: hero is shorter than the SVG by `bleed` so the SVG extends past the\n   bottom of the hero into the section below. Bleed amount = (svg 100vh) \u2212 (hero height).\n   Tweak the hero height to control how far the SVG drops below the hero.\n   Keep the breakpoint in sync with the .hs-ripple swap below\n   and the Section-2 lineart widget.\n   `!important` and `aspect-ratio: auto` are here to override both the\n   narrow-AR fallback above and the production `.hero-height` rule. *\/\n@media (max-width: 767px) {\n  .hypersolved-hero {\n    height: 110vh !important;        \/* SVG is 100vh, so 4vh of SVG bleeds below the hero *\/\n    aspect-ratio: auto !important;  \/* unset the narrow-AR fallback so 96vh wins *\/\n    min-height: 0 !important;       \/* override production .hero-height min-height: 102vh *\/\n    overflow: visible !important;   \/* don't clip the bleed; !important to defeat any production rule *\/\n  }\n\n  \/* Bubble overflow:visible through the Elementor wrapper chain.\n     Several of these wrappers default to overflow:hidden in many Elementor configs,\n     which clips the mobile SVG bleed at whichever wrapper is the first offender.\n     Without this rule the bleed visibly stops mid-air at the boundary of one of\n     the inner wrappers (typically .elementor-widget-container or\n     .elementor-element-populated). *\/\n  .hypersolved-hero,\n  .hypersolved-hero .elementor-container,\n  .hypersolved-hero .elementor-row,\n  .hypersolved-hero .elementor-column,\n  .hypersolved-hero .elementor-column-wrap,\n  .hypersolved-hero .elementor-element,\n  .hypersolved-hero .elementor-element-populated,\n  .hypersolved-hero .elementor-widget-wrap,\n  .hypersolved-hero .elementor-widget,\n  .hypersolved-hero .elementor-widget-container {\n    overflow: visible !important;\n  }\n}\n<\/style>\n\n<!--\n  HypersolvED Hero \u2014 Section 1 SVG (Version A \u00b7 clip + shimmer)\n  ============================================================\n  Paste the entire contents of this file into a single Elementor HTML widget inside the hero section.\n\n  This widget contains BOTH the desktop SVG (1440 \u00d7 873) and the mobile SVG (390 \u00d7 789).\n  CSS swaps which is visible at the breakpoint defined below \u2014 only one is in the visual flow at a time.\n  Both gate on the same `.is-revealed` class set by video.html, so the video \u2192 reveal connection\n  works for whichever variant is showing.\n\n  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n  \u2502  BREAKPOINT \u2014 change in TWO files to retune:                        \u2502\n  \u2502     1. this widget         \u2192 @media (max-width: 767px) in <style>   \u2502\n  \u2502     2. Section-2 lineart   \u2192 @media (max-width: 767px) in <style>   \u2502\n  \u2502  Keep the numbers in sync. video.html picks its video source        \u2502\n  \u2502  independently and that's fine \u2014 the trigger class fires regardless.\u2502\n  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n\n  ELEMENTOR SETUP (one-time):\n\n  1. Hero SECTION (.hypersolved-hero) \u2014 Advanced > Custom CSS:\n       selector { position: relative; height: 100vh; overflow: hidden; }\n       @media (max-aspect-ratio: 1440\/873) {\n         selector { height: auto; aspect-ratio: 1440\/873; }\n       }\n       @media (max-width: 767px) {\n         selector { height: 96vh; overflow: visible; }   \/* mobile: shorter hero so the 100vh SVG bleeds 4vh below *\/\n       }\n     Set section background to #020022.\n     (These rules are also inlined in the <style> block at the top of this file \u2014\n      keep them in sync if you tweak one place.)\n\n  2. THIS HTML widget \u2014 Advanced > Custom CSS:\n       selector { position: absolute; bottom: 0; left: 0; right: 0; z-index: 0; }\n       @media (max-width: 767px) {\n         selector { top: 0; bottom: auto; }   \/* mobile anchors to TOP \u2014 see why below *\/\n       }\n     DESKTOP behavior: the widget anchors to the BOTTOM of the hero. SVG fills the widget's width\n     and the aspect-ratio drives its height. On wide viewports (\u2265 1.65 aspect) the SVG is taller\n     than 100vh, so its top overflows above the hero and is clipped \u2014 empty navy area, nothing\n     visually important is lost.\n\n     MOBILE behavior: the widget anchors to the TOP of the hero, the wrapper is 100vh tall, and\n     the hero is 90vh \u2014 so the bottom 10vh of the SVG drops below the hero into the section\n     below (the bleed). Top-anchoring means the SVG always starts at the hero's top edge, so\n     the bleed amount is a single predictable number across every device.\n\n  3. Hero text widgets (heading\/subheading\/CTA) \u2014 give each z-index: 1 (or higher) so they\n     layer on top of this widget.\n\n  Animation trigger: .is-revealed on .hypersolved-hero (set by video.html at currentTime \u2265 6s).\n-->\n\n<style>\n  .hs-ripple {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n  }\n  .hs-ripple svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* ---- Desktop \/ mobile swap ----\n     Single source of truth for the breakpoint in this file. Mirror the same number\n     in the Section-2 lineart widget. *\/\n  .hs-ripple--desktop { aspect-ratio: 1440 \/ 873; }\n  .hs-ripple--mobile  {\n    \/* Mobile wrapper is exactly 100vh. The hero section is 96vh, so when the\n       widget is anchored top:0 (see Elementor setup notes above), the bottom\n       4vh of this wrapper bleeds below the hero. Overflow stays visible\n       so nothing here clips the bleed. !important so it defeats the\n       parent .hs-ripple { overflow: hidden } base rule even if specificity ties shift. *\/\n    height: 110vh;\n    display: none;\n    overflow: visible !important;\n  }\n\n  @media (max-width: 767px) {\n    .hs-ripple--desktop { display: none; }\n    .hs-ripple--mobile  { display: block; }\n  }\n\n  \/* ---- INITIAL hidden state ----\n     Rings and bars start hidden. They animate in only when .is-revealed appears\n     on the parent .hypersolved-hero (set by the video script at currentTime >= 6s)\n     OR on .hs-ripple itself (for portability outside the hypersolved page). *\/\n  .hs-ripple svg [data-ring] {\n    transform-box: view-box;\n    transform-origin: 874px 766px;     \/* desktop ring center *\/\n    transform: scale(0.4);\n    opacity: 0;\n    will-change: transform, opacity;\n  }\n  .hs-ripple--mobile svg [data-ring] {\n    transform-origin: 294px 606px;     \/* mobile ring center (different viewBox) *\/\n  }\n  .hs-ripple svg [data-bar] {\n    clip-path: inset(0 100% 0 0);\n    will-change: clip-path;\n  }\n\n  \/* ---- Reveal: rings scale-from-base, innermost first ---- *\/\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-ring],\n  .hs-ripple.is-revealed             svg [data-ring] {\n    animation: hs-ring-in 950ms cubic-bezier(0.22, 1, 0.36, 1) forwards;\n  }\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-ring=\"0\"],\n  .hs-ripple.is-revealed             svg [data-ring=\"0\"] { animation-delay:   0ms; }\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-ring=\"1\"],\n  .hs-ripple.is-revealed             svg [data-ring=\"1\"] { animation-delay:  90ms; }\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-ring=\"2\"],\n  .hs-ripple.is-revealed             svg [data-ring=\"2\"] { animation-delay: 180ms; }\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-ring=\"3\"],\n  .hs-ripple.is-revealed             svg [data-ring=\"3\"] { animation-delay: 270ms; }\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-ring=\"4\"],\n  .hs-ripple.is-revealed             svg [data-ring=\"4\"] { animation-delay: 360ms; }\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-ring=\"5\"],\n  .hs-ripple.is-revealed             svg [data-ring=\"5\"] { animation-delay: 450ms; }\n\n  @keyframes hs-ring-in {\n      0% { transform: scale(0.4); opacity: 0; }\n     60% { opacity: 1; }\n    100% { transform: scale(1);   opacity: 1; }\n  }\n\n  \/* ---- Reveal: bars left-to-right wipe ---- *\/\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-bar],\n  .hs-ripple.is-revealed             svg [data-bar] {\n    animation: hs-bar-wipe 750ms cubic-bezier(0.22, 1, 0.36, 1) forwards;\n  }\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-bar=\"0\"],\n  .hs-ripple.is-revealed             svg [data-bar=\"0\"] { animation-delay: 380ms; }\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-bar=\"1\"],\n  .hs-ripple.is-revealed             svg [data-bar=\"1\"] { animation-delay: 440ms; }\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-bar=\"2\"],\n  .hs-ripple.is-revealed             svg [data-bar=\"2\"] { animation-delay: 500ms; }\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-bar=\"3\"],\n  .hs-ripple.is-revealed             svg [data-bar=\"3\"] { animation-delay: 560ms; }\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-bar=\"4\"],\n  .hs-ripple.is-revealed             svg [data-bar=\"4\"] { animation-delay: 620ms; }\n  .hypersolved-hero.is-revealed .hs-ripple svg [data-bar=\"5\"],\n  .hs-ripple.is-revealed             svg [data-bar=\"5\"] { animation-delay: 680ms; }\n\n  @keyframes hs-bar-wipe {\n    from { clip-path: inset(0 100% 0 0); }\n    to   { clip-path: inset(0   0% 0 0); }\n  }\n\n  \/* ---- Reduced motion: skip stagger, just fade in on reveal ---- *\/\n  @media (prefers-reduced-motion: reduce) {\n    .hypersolved-hero.is-revealed .hs-ripple svg [data-ring],\n    .hypersolved-hero.is-revealed .hs-ripple svg [data-bar],\n    .hs-ripple.is-revealed             svg [data-ring],\n    .hs-ripple.is-revealed             svg [data-bar] {\n      transform: none;\n      clip-path: none;\n      opacity: 1;\n      animation: hs-fade-in 350ms ease-out both;\n    }\n    @keyframes hs-fade-in {\n      from { opacity: 0; }\n      to   { opacity: 1; }\n    }\n  }\n\n<\/style>\n\n<!-- ====== DESKTOP (\u2265 768px) ====== -->\n<div class=\"hs-ripple hs-ripple--desktop\">\n<svg viewBox=\"0 0 1440 873\" preserveAspectRatio=\"xMidYMid slice\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n<g clip-path=\"url(#hs-clip0)\">\n<g clip-path=\"url(#hs-clip1)\">\n\n<path data-bar=\"0\" d=\"M0 671.471H653.19V660H0\" fill=\"url(#hs-paint0)\"\/>\n<path data-bar=\"1\" d=\"M-0.325195 698.247H652.864V686.776H-0.325195\" fill=\"url(#hs-paint1)\"\/>\n<path data-bar=\"2\" d=\"M-0.325195 725.008H652.864V713.537H-0.325195\" fill=\"url(#hs-paint2)\"\/>\n<path data-bar=\"3\" d=\"M-0.325195 751.77H652.864V740.299H-0.325195\" fill=\"url(#hs-paint3)\"\/>\n<path data-bar=\"4\" d=\"M-0.325195 778.545H652.864V767.074H-0.325195\" fill=\"url(#hs-paint4)\"\/>\n<path data-bar=\"5\" d=\"M-0.325195 805.308H652.864V793.837H-0.325195\" fill=\"url(#hs-paint5)\"\/>\n\n<path data-ring=\"5\" d=\"M1089.15 766.285C1089.15 884.768 992.849 981.148 874.469 981.148C756.088 981.148 659.791 884.768 659.791 766.285V201.728C659.791 164.78 629.769 134.733 592.853 134.733C555.937 134.733 525.916 164.793 525.916 201.728L525.929 660.116H539.782L539.769 201.728C539.769 172.432 563.583 148.585 592.866 148.585C622.15 148.585 645.963 172.419 645.963 201.728V766.285C645.963 892.407 748.481 995.013 874.494 995.013C1000.51 995.013 1103.03 892.407 1103.03 766.285V-3.94238H1089.17V766.272L1089.15 766.285Z\" fill=\"url(#hs-paint6)\"\/>\n<path data-ring=\"4\" d=\"M1056.82 766.285C1056.82 866.93 975.014 948.796 874.468 948.796C773.922 948.796 692.114 866.918 692.114 766.285V201.728C692.114 146.956 647.591 102.381 592.853 102.381C538.115 102.381 493.592 146.943 493.592 201.728L493.605 660.116H507.458L507.445 201.728C507.445 154.595 545.76 116.246 592.853 116.246C639.946 116.246 678.261 154.595 678.261 201.728V766.285C678.261 874.569 766.29 962.661 874.468 962.661C982.647 962.661 1070.68 874.569 1070.68 766.285V-3.94238H1056.82V766.272V766.285Z\" fill=\"url(#hs-paint7)\"\/>\n<path data-ring=\"3\" d=\"M1024.51 766.285C1024.51 849.093 957.206 916.457 874.469 916.457C791.732 916.457 724.426 849.093 724.426 766.285V201.728C724.426 129.118 665.401 70.0425 592.854 70.0425C520.306 70.0425 461.281 129.118 461.281 201.728L461.295 660.116H475.148L475.134 201.728C475.134 136.758 527.951 83.9075 592.866 83.9075C657.781 83.9075 710.585 136.77 710.585 201.728V766.285C710.585 856.732 784.112 930.322 874.482 930.322C964.851 930.322 1038.38 856.732 1038.38 766.285V-3.94238H1024.52V766.272L1024.51 766.285Z\" fill=\"url(#hs-paint8)\"\/>\n<path data-ring=\"2\" d=\"M992.188 766.285C992.188 831.256 939.371 884.106 874.469 884.106C809.566 884.106 756.749 831.243 756.749 766.285V201.728C756.749 111.281 683.235 37.6908 592.853 37.6908C502.471 37.6908 428.957 111.281 428.957 201.728L428.97 660.116H442.824L442.81 201.728C442.81 118.92 510.116 51.5558 592.853 51.5558C675.59 51.5558 742.896 118.92 742.896 201.728V766.285C742.896 838.895 801.921 897.971 874.469 897.971C947.016 897.971 1006.04 838.895 1006.04 766.285V-3.94238H992.188V766.272V766.285Z\" fill=\"url(#hs-paint9)\"\/>\n<path data-ring=\"1\" d=\"M959.877 766.285C959.877 813.418 921.562 851.767 874.469 851.767C827.376 851.767 789.061 813.418 789.061 766.285V201.728C789.061 93.4437 701.045 5.35188 592.854 5.35188C484.662 5.35188 396.646 93.4437 396.646 201.728L396.66 660.116H410.513L410.5 201.728C410.5 101.083 492.308 19.2169 592.854 19.2169C693.4 19.2169 775.208 101.096 775.208 201.728V766.285C775.208 821.07 819.744 865.632 874.469 865.632C929.194 865.632 973.73 821.07 973.73 766.285V-3.94238H959.877V766.272V766.285Z\" fill=\"url(#hs-paint10)\"\/>\n<path data-ring=\"0\" d=\"M927.566 766.285C927.566 795.593 903.752 819.427 874.469 819.427C845.185 819.427 821.372 795.593 821.372 766.285V201.728C821.372 75.6061 718.867 -27 592.853 -27C466.84 -27 364.322 75.6061 364.322 201.728L364.336 660.116H378.189L378.175 201.728C378.175 83.258 474.485 -13.135 592.853 -13.135C711.221 -13.135 807.531 83.2453 807.531 201.728V766.285C807.531 803.232 837.565 833.28 874.469 833.28C911.372 833.28 941.406 803.232 941.406 766.285V-3.94258H927.553V766.272L927.566 766.285Z\" fill=\"url(#hs-paint11)\"\/>\n\n<\/g>\n<\/g>\n\n<defs>\n\n<!-- bar gradients (orange \u2192 navy) \u2014 static -->\n<linearGradient id=\"hs-paint0\" x1=\"-28.5\" y1=\"667.105\" x2=\"651.62\" y2=\"699.104\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0.0865385\" stop-color=\"#EE4C01\"\/>\n  <stop offset=\"0.687504\" stop-color=\"#030870\"\/>\n<\/linearGradient>\n<linearGradient id=\"hs-paint1\" x1=\"-28.8252\" y1=\"693.881\" x2=\"651.295\" y2=\"725.88\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0.0865385\" stop-color=\"#EE4C01\"\/>\n  <stop offset=\"0.687504\" stop-color=\"#030870\"\/>\n<\/linearGradient>\n<linearGradient id=\"hs-paint2\" x1=\"-28.8252\" y1=\"720.642\" x2=\"651.295\" y2=\"752.641\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0.0865385\" stop-color=\"#EE4C01\"\/>\n  <stop offset=\"0.687504\" stop-color=\"#030870\"\/>\n<\/linearGradient>\n<linearGradient id=\"hs-paint3\" x1=\"-28.8252\" y1=\"747.404\" x2=\"651.295\" y2=\"779.403\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0.0865385\" stop-color=\"#EE4C01\"\/>\n  <stop offset=\"0.687504\" stop-color=\"#030870\"\/>\n<\/linearGradient>\n<linearGradient id=\"hs-paint4\" x1=\"-28.8252\" y1=\"774.179\" x2=\"651.295\" y2=\"806.178\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0.0865385\" stop-color=\"#EE4C01\"\/>\n  <stop offset=\"0.687504\" stop-color=\"#030870\"\/>\n<\/linearGradient>\n<linearGradient id=\"hs-paint5\" x1=\"-28.8252\" y1=\"800.942\" x2=\"651.295\" y2=\"832.941\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0.0865385\" stop-color=\"#EE4C01\"\/>\n  <stop offset=\"0.687504\" stop-color=\"#030870\"\/>\n<\/linearGradient>\n\n<!-- ring gradients (navy \u2192 cyan) \u2014 static -->\n<linearGradient id=\"hs-paint6\" x1=\"359.649\" y1=\"747.708\" x2=\"1310.95\" y2=\"488.849\" gradientUnits=\"userSpaceOnUse\">\n  <stop stop-color=\"#020022\"\/>\n  <stop offset=\"0.413462\" stop-color=\"#030870\"\/>\n  <stop offset=\"1\" stop-color=\"#30D1FF\"\/>\n<\/linearGradient>\n<linearGradient id=\"hs-paint7\" x1=\"327.332\" y1=\"723.366\" x2=\"1274.16\" y2=\"457.114\" gradientUnits=\"userSpaceOnUse\">\n  <stop stop-color=\"#020022\"\/>\n  <stop offset=\"0.413462\" stop-color=\"#030870\"\/>\n  <stop offset=\"1\" stop-color=\"#30D1FF\"\/>\n<\/linearGradient>\n<linearGradient id=\"hs-paint8\" x1=\"295.018\" y1=\"699.033\" x2=\"1237\" y2=\"424.968\" gradientUnits=\"userSpaceOnUse\">\n  <stop stop-color=\"#020022\"\/>\n  <stop offset=\"0.413462\" stop-color=\"#030870\"\/>\n  <stop offset=\"1\" stop-color=\"#30D1FF\"\/>\n<\/linearGradient>\n<linearGradient id=\"hs-paint9\" x1=\"262.697\" y1=\"674.69\" x2=\"1199.33\" y2=\"392.414\" gradientUnits=\"userSpaceOnUse\">\n  <stop stop-color=\"#020022\"\/>\n  <stop offset=\"0.413462\" stop-color=\"#030870\"\/>\n  <stop offset=\"1\" stop-color=\"#30D1FF\"\/>\n<\/linearGradient>\n<linearGradient id=\"hs-paint10\" x1=\"230.387\" y1=\"650.357\" x2=\"1161.14\" y2=\"359.419\" gradientUnits=\"userSpaceOnUse\">\n  <stop stop-color=\"#020022\"\/>\n  <stop offset=\"0.413462\" stop-color=\"#030870\"\/>\n  <stop offset=\"1\" stop-color=\"#30D1FF\"\/>\n<\/linearGradient>\n<linearGradient id=\"hs-paint11\" x1=\"198.062\" y1=\"620.306\" x2=\"1127.02\" y2=\"326.792\" gradientUnits=\"userSpaceOnUse\">\n  <stop stop-color=\"#020022\"\/>\n  <stop offset=\"0.413462\" stop-color=\"#030870\"\/>\n  <stop offset=\"1\" stop-color=\"#30D1FF\"\/>\n<\/linearGradient>\n\n<clipPath id=\"hs-clip0\"><rect width=\"1440\" height=\"873\" fill=\"white\"\/><\/clipPath>\n<clipPath id=\"hs-clip1\"><rect width=\"1336\" height=\"1022\" fill=\"white\" transform=\"translate(-233 -27)\"\/><\/clipPath>\n\n<\/defs>\n<\/svg>\n<\/div>\n\n<!-- ====== MOBILE (\u2264 767px) ======\n     Same data-bar \/ data-ring conventions as desktop, so the CSS animations apply uniformly:\n       data-bar=\"0..5\"  \u2014 top\u2192bottom bars\n       data-ring=\"0..5\" \u2014 innermost\u2192outermost rings\n     Gradient and clipPath IDs are namespaced (`hsm-`) so they don't collide with the desktop block. -->\n<div class=\"hs-ripple hs-ripple--mobile\">\n<svg viewBox=\"0 0 390 789\" preserveAspectRatio=\"xMidYMid slice\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n<g clip-path=\"url(#hsm-clip0)\">\n<g clip-path=\"url(#hsm-clip1)\">\n\n<path data-bar=\"0\" d=\"M-402.809 530.797H117.959V521.649H-402.809\" fill=\"url(#hsm-paint0)\"\/>\n<path data-bar=\"1\" d=\"M-403.068 552.149H117.699V543.001H-403.068\" fill=\"url(#hsm-paint1)\"\/>\n<path data-bar=\"2\" d=\"M-403.068 573.49H117.699V564.343H-403.068\" fill=\"url(#hsm-paint2)\"\/>\n<path data-bar=\"3\" d=\"M-403.068 594.832H117.699V585.684H-403.068\" fill=\"url(#hsm-paint3)\"\/>\n<path data-bar=\"4\" d=\"M-403.068 616.184H117.699V607.036H-403.068\" fill=\"url(#hsm-paint4)\"\/>\n<path data-bar=\"5\" d=\"M-403.068 637.526H117.699V628.378H-403.068\" fill=\"url(#hsm-paint5)\"\/>\n\n<path data-ring=\"5\" d=\"M465.532 606.407C465.532 700.891 388.758 777.751 294.376 777.751C199.995 777.751 123.22 700.891 123.22 606.407V156.198C123.22 126.733 99.2854 102.772 69.8534 102.772C40.4214 102.772 16.4863 126.743 16.4863 156.198L16.497 521.742H27.5416L27.5309 156.198C27.5309 132.835 46.5167 113.819 69.8635 113.819C93.2103 113.819 112.196 132.825 112.196 156.198V606.407C112.196 706.983 193.93 788.807 294.397 788.807C394.863 788.807 476.597 706.983 476.597 606.407V-7.81569H465.553V606.397L465.532 606.407Z\" fill=\"url(#hsm-paint6)\"\/>\n<path data-ring=\"4\" d=\"M439.761 606.407C439.761 686.667 374.538 751.951 294.376 751.951C214.214 751.951 148.991 686.657 148.991 606.407V156.198C148.991 112.519 113.494 76.9729 69.8527 76.9729C26.2118 76.9729 -9.28516 112.509 -9.28516 156.198L-9.27446 521.742H1.77017L1.75947 156.198C1.75947 118.611 32.3071 88.0296 69.8527 88.0296C107.398 88.0296 137.946 118.611 137.946 156.198V606.407C137.946 692.759 208.128 763.008 294.376 763.008C380.623 763.008 450.806 692.759 450.806 606.407V-7.81569H439.761V606.396V606.407Z\" fill=\"url(#hsm-paint7)\"\/>\n<path data-ring=\"3\" d=\"M414.001 606.407C414.001 672.442 360.34 726.163 294.377 726.163C228.413 726.163 174.752 672.442 174.752 606.407V156.198C174.752 98.2944 127.693 51.184 69.8536 51.184C12.0139 51.184 -35.0449 98.2944 -35.0449 156.198L-35.0342 521.742H-23.9897L-24.0004 156.198C-24.0004 104.386 18.1091 62.2407 69.8636 62.2407C121.618 62.2407 163.718 104.396 163.718 156.198V606.407C163.718 678.534 222.338 737.219 294.387 737.219C366.435 737.219 425.056 678.534 425.056 606.407V-7.81569H414.011V606.396L414.001 606.407Z\" fill=\"url(#hsm-paint8)\"\/>\n<path data-ring=\"2\" d=\"M388.23 606.407C388.23 658.218 346.12 700.363 294.376 700.363C242.632 700.363 200.522 658.208 200.522 606.407V156.198C200.522 84.0699 141.912 25.385 69.8529 25.385C-2.20589 25.385 -60.8164 84.0699 -60.8164 156.198L-60.8057 521.742H-49.7611L-49.7718 156.198C-49.7718 90.1618 3.88944 36.4417 69.8529 36.4417C135.816 36.4417 189.477 90.1618 189.477 156.198V606.407C189.477 664.31 236.536 711.42 294.376 711.42C352.216 711.42 399.274 664.31 399.274 606.407V-7.81569H388.23V606.396V606.407Z\" fill=\"url(#hsm-paint9)\"\/>\n<path data-ring=\"1\" d=\"M362.47 606.407C362.47 643.993 331.922 674.575 294.377 674.575C256.831 674.575 226.284 643.993 226.284 606.407V156.198C226.284 69.8454 156.111 -0.403922 69.8537 -0.403922C-16.4038 -0.403922 -86.5762 69.8454 -86.5762 156.198L-86.5655 521.742H-75.5209L-75.5316 156.198C-75.5316 75.9373 -10.3085 10.6528 69.8537 10.6528C150.016 10.6528 215.239 75.9474 215.239 156.198V606.407C215.239 650.095 250.746 685.631 294.377 685.631C338.008 685.631 373.515 650.095 373.515 606.407V-7.81569H362.47V606.396V606.407Z\" fill=\"url(#hsm-paint10)\"\/>\n<path data-ring=\"0\" d=\"M336.709 606.406C336.709 629.779 317.723 648.785 294.376 648.785C271.029 648.785 252.043 629.779 252.043 606.406V156.197C252.043 55.6207 170.319 -26.2031 69.853 -26.2031C-30.6134 -26.2031 -112.348 55.6207 -112.348 156.197L-112.337 521.742H-101.292L-101.303 156.197C-101.303 61.7228 -24.5181 -15.1464 69.853 -15.1464C164.224 -15.1464 241.009 61.7126 241.009 156.197V606.406C241.009 635.871 264.954 659.832 294.376 659.832C323.798 659.832 347.743 635.871 347.743 606.406V-7.81585H336.699V606.396L336.709 606.406Z\" fill=\"url(#hsm-paint11)\"\/>\n\n<\/g>\n<\/g>\n\n<defs>\n\n<!-- bar gradients (orange \u2192 navy) \u2014 static -->\n<linearGradient id=\"hsm-paint0\" x1=\"-425.531\" y1=\"527.315\" x2=\"116.708\" y2=\"552.821\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0.0865385\" stop-color=\"#EE4C01\"\/>\n  <stop offset=\"0.687504\" stop-color=\"#030870\"\/>\n<\/linearGradient>\n<linearGradient id=\"hsm-paint1\" x1=\"-425.791\" y1=\"548.667\" x2=\"116.448\" y2=\"574.173\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0.0865385\" stop-color=\"#EE4C01\"\/>\n  <stop offset=\"0.687504\" stop-color=\"#030870\"\/>\n<\/linearGradient>\n<linearGradient id=\"hsm-paint2\" x1=\"-425.791\" y1=\"570.008\" x2=\"116.448\" y2=\"595.515\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0.0865385\" stop-color=\"#EE4C01\"\/>\n  <stop offset=\"0.687504\" stop-color=\"#030870\"\/>\n<\/linearGradient>\n<linearGradient id=\"hsm-paint3\" x1=\"-425.791\" y1=\"591.35\" x2=\"116.448\" y2=\"616.856\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0.0865385\" stop-color=\"#EE4C01\"\/>\n  <stop offset=\"0.687504\" stop-color=\"#030870\"\/>\n<\/linearGradient>\n<linearGradient id=\"hsm-paint4\" x1=\"-425.791\" y1=\"612.702\" x2=\"116.448\" y2=\"638.208\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0.0865385\" stop-color=\"#EE4C01\"\/>\n  <stop offset=\"0.687504\" stop-color=\"#030870\"\/>\n<\/linearGradient>\n<linearGradient id=\"hsm-paint5\" x1=\"-425.791\" y1=\"634.044\" x2=\"116.448\" y2=\"659.55\" gradientUnits=\"userSpaceOnUse\">\n  <stop offset=\"0.0865385\" stop-color=\"#EE4C01\"\/>\n  <stop offset=\"0.687504\" stop-color=\"#030870\"\/>\n<\/linearGradient>\n\n<!-- ring gradients (navy \u2192 cyan) \u2014 static -->\n<linearGradient id=\"hsm-paint6\" x1=\"-116.073\" y1=\"591.593\" x2=\"642.397\" y2=\"385.254\" gradientUnits=\"userSpaceOnUse\">\n  <stop stop-color=\"#020022\"\/>\n  <stop offset=\"0.413462\" stop-color=\"#030870\"\/>\n  <stop offset=\"1\" stop-color=\"#30D1FF\"\/>\n<\/linearGradient>\n<linearGradient id=\"hsm-paint7\" x1=\"-141.839\" y1=\"572.18\" x2=\"613.063\" y2=\"359.949\" gradientUnits=\"userSpaceOnUse\">\n  <stop stop-color=\"#020022\"\/>\n  <stop offset=\"0.413462\" stop-color=\"#030870\"\/>\n  <stop offset=\"1\" stop-color=\"#30D1FF\"\/>\n<\/linearGradient>\n<linearGradient id=\"hsm-paint8\" x1=\"-167.602\" y1=\"552.776\" x2=\"583.44\" y2=\"334.316\" gradientUnits=\"userSpaceOnUse\">\n  <stop stop-color=\"#020022\"\/>\n  <stop offset=\"0.413462\" stop-color=\"#030870\"\/>\n  <stop offset=\"1\" stop-color=\"#30D1FF\"\/>\n<\/linearGradient>\n<linearGradient id=\"hsm-paint9\" x1=\"-193.37\" y1=\"533.364\" x2=\"553.403\" y2=\"308.358\" gradientUnits=\"userSpaceOnUse\">\n  <stop stop-color=\"#020022\"\/>\n  <stop offset=\"0.413462\" stop-color=\"#030870\"\/>\n  <stop offset=\"1\" stop-color=\"#30D1FF\"\/>\n<\/linearGradient>\n<linearGradient id=\"hsm-paint10\" x1=\"-219.13\" y1=\"513.959\" x2=\"522.964\" y2=\"282.048\" gradientUnits=\"userSpaceOnUse\">\n  <stop stop-color=\"#020022\"\/>\n  <stop offset=\"0.413462\" stop-color=\"#030870\"\/>\n  <stop offset=\"1\" stop-color=\"#30D1FF\"\/>\n<\/linearGradient>\n<linearGradient id=\"hsm-paint11\" x1=\"-244.901\" y1=\"489.995\" x2=\"495.761\" y2=\"256.031\" gradientUnits=\"userSpaceOnUse\">\n  <stop stop-color=\"#020022\"\/>\n  <stop offset=\"0.413462\" stop-color=\"#030870\"\/>\n  <stop offset=\"1\" stop-color=\"#30D1FF\"\/>\n<\/linearGradient>\n\n<clipPath id=\"hsm-clip0\"><rect width=\"390\" height=\"789\" fill=\"white\"\/><\/clipPath>\n<clipPath id=\"hsm-clip1\"><rect width=\"758\" height=\"815\" fill=\"white\" transform=\"translate(-281.422 -26.2031)\"\/><\/clipPath>\n\n<\/defs>\n<\/svg>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ebac9c elementor-widget__width-inherit elementor-absolute hero-poster elementor-widget elementor-widget-html\" data-id=\"9ebac9c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Preload poster for LCP priority -->\n<link\n  rel=\"preload\"\n  as=\"image\"\n  href=\"\/wp-content\/uploads\/2026\/05\/loading-frame-FPO.webp\"\n  type=\"image\/webp\"\n  media=\"(min-width: 768px)\"\n  fetchpriority=\"high\"\n>\n<link\n  rel=\"preload\"\n  as=\"image\"\n  href=\"\/wp-content\/uploads\/2026\/05\/loading-frame-FPO.webp\"\n  type=\"image\/webp\"\n  media=\"(max-width: 767px)\"\n  fetchpriority=\"high\"\n>\n\n<!-- Preload the hero intro video at LOW priority. Starts the fetch during HTML\n     parse so the first chunks (moov + first frames) are buffering in parallel\n     with the poster \u2014 but yields bandwidth to the poster (LCP) via fetchpriority.\n     By the time JS creates the <source>, the browser reuses this preload from\n     cache and decodes the first frame without a fresh round-trip. -->\n<link\n  rel=\"preload\"\n  as=\"video\"\n  href=\"\/wp-content\/uploads\/2026\/05\/hypersolved-f-c.mp4\"\n  type=\"video\/mp4\"\n  media=\"(min-width: 768px)\"\n  fetchpriority=\"low\"\n>\n<link\n  rel=\"preload\"\n  as=\"video\"\n  href=\"\/wp-content\/uploads\/2026\/05\/hypersolved-vertical-fc.mp4\"\n  type=\"video\/mp4\"\n  media=\"(max-width: 767px)\"\n  fetchpriority=\"low\"\n>\n\n<style>\n  .hero-poster {\n    position: absolute;\n    inset: 0;\n    z-index: 99;\n  }\n\n  .hero-poster__img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center;\n  }\n\n  .hero-poster--hidden {\n    display: none;\n  }\n\n  .hero-video {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center;\n    z-index: 0;\n    pointer-events: none;\n  }\n\n  #heroVideoLoop {\n    opacity: 0;\n  }\n  #heroVideoLoop.hero-video--active {\n  opacity: 1;\n}\n  .hero-video--active {\n    opacity: 1;\n  }\n\n  \/* ========== HERO ENTRANCE ==========\n     Triggered by .is-revealed being added to .hypersolved-hero (see script below \u2014 fires at video currentTime >= 6s,\n     or immediately on reduced-motion \/ save-data \/ autoplay-blocked \/ error, or after a 10s safety timeout).\n     The SVG widgets gate their own animations on the same class. See SVG animation files for those rules. *\/\n\n  .hypersolved-hero .hypersolved-hero-heading,\n  .hypersolved-hero .hypersolved-hero-subheading,\n  .hypersolved-hero .hypersolved-hero-cta {\n    opacity: 0;\n    transform: translateY(28px);\n    transition:\n      opacity   1100ms cubic-bezier(0.22, 1, 0.36, 1),\n      transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);\n    will-change: opacity, transform;\n  }\n\n  \/* Overlay (full-section tint\/gradient layer) \u2014 pure opacity fade, no slide.\n     Matches the heading's 200ms delay so the overlay, heading, and SVG entrance all\n     land together rather than the overlay racing ahead of the rest. *\/\n  .hypersolved-hero .hypersolved-hero-overlay {\n    opacity: 0;\n    transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1);\n    will-change: opacity;\n  }\n\n  .hypersolved-hero.is-revealed .hypersolved-hero-heading {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 200ms;\n  }\n  .hypersolved-hero.is-revealed .hypersolved-hero-subheading {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 420ms;\n  }\n  .hypersolved-hero.is-revealed .hypersolved-hero-cta {\n    opacity: 1;\n    transform: translateY(0);\n    transition-delay: 640ms;\n  }\n  .hypersolved-hero.is-revealed .hypersolved-hero-overlay {\n    opacity: 1;\n    transition-delay: 200ms;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .hypersolved-hero .hypersolved-hero-heading,\n    .hypersolved-hero .hypersolved-hero-subheading,\n    .hypersolved-hero .hypersolved-hero-cta,\n    .hypersolved-hero .hypersolved-hero-overlay {\n      transform: none;\n      transition: opacity 350ms ease-out;\n      transition-delay: 0ms !important;\n    }\n  }\n<\/style>\n\n<!-- Poster image: this IS the LCP element -->\n<picture class=\"hero-poster\" id=\"heroPoster\">\n  <source\n    srcset=\"\/wp-content\/uploads\/2026\/05\/loading-frame-FPO.webp\"\n    media=\"(max-width: 767px)\"\n    type=\"image\/webp\"\n  >\n  <source\n    srcset=\"\/wp-content\/uploads\/2026\/05\/loading-frame-FPO.webp\"\n    type=\"image\/webp\"\n  >\n  <img fetchpriority=\"high\" decoding=\"async\"\n    src=\"\/wp-content\/uploads\/2026\/05\/loading-frame-FPO.webp\"\n    alt=\"\"\n    role=\"presentation\"\n    class=\"hero-poster__img\"\n    fetchpriority=\"high\"\n    width=\"1920\"\n    height=\"1080\"\n  >\n<\/picture>\n\n<!-- Video: starts empty, JS injects the correct source -->\n<video\n  class=\"hero-video\"\n  id=\"heroVideo\"\n  muted\n  playsinline\n  preload=\"none\"\n  aria-hidden=\"true\"\n><\/video>\n\n<!-- Loop video: starts empty + hidden, JS injects source after intro is playing,\n     takes over on intro 'ended' via instant opacity swap. -->\n<video\n  class=\"hero-video\"\n  id=\"heroVideoLoop\"\n  muted\n  playsinline\n  preload=\"none\"\n  loop\n  aria-hidden=\"true\"\n><\/video>\n\n<script>\n  (function () {\n    var REVEAL_AT_SECONDS = 6;       \/\/ moment in the video where the hero entrance fires\n    var SAFETY_TIMEOUT_MS = 10000;   \/\/ ultimate fallback if nothing else triggers reveal\n    var PLAY_WATCHDOG_MS  = 800;     \/\/ after play() resolves, how long we wait for the video to actually advance before falling back\n\n    \/\/ Branded still shown whenever the video fails to autoplay (iOS Low Power Mode, autoplay\n    \/\/ blocked, decode error, etc.). Distinct from loading-frame-FPO.webp, which is just the\n    \/\/ brief pre-video placeholder. Picked per viewport at swap time.\n    var FALLBACK_DESKTOP = '\/wp-content\/uploads\/2026\/05\/hypersolved-updated-server-scaled.webp';\n    var FALLBACK_MOBILE  = '\/wp-content\/uploads\/2026\/05\/hypersolved-updated-server-mobile.webp';\n    function staticFallbackSrc() {\n      return window.innerWidth <= 767 ? FALLBACK_MOBILE : FALLBACK_DESKTOP;\n    }\n\n    var video     = document.getElementById('heroVideo');\n    var videoLoop = document.getElementById('heroVideoLoop');\n    var poster    = document.getElementById('heroPoster');\n    var hero      = document.querySelector('.hypersolved-hero');\n\n    \/\/ Single-fire reveal trigger.\n    \/\/ Flips two classes:\n    \/\/   1. `.is-revealed` on .hypersolved-hero \u2014 gates the hero text fade-up + the section-1 SVG (bars + filled rings)\n    \/\/   2. `.is-hero-revealed` on <body> \u2014 gates the section-2 SVG (lineart) which lives outside .hypersolved-hero\n    \/\/ Section-1 and section-2 SVG animations both fire from the same trigger, so they stay frame-locked.\n    var revealed = false;\n    function triggerReveal() {\n      if (revealed) return;\n      revealed = true;\n      if (hero) hero.classList.add('is-revealed');\n      document.body.classList.add('is-hero-revealed');\n    }\n\n    \/\/ Idempotent fallback: swap to the branded static image, stop the video, fire the reveal.\n    \/\/ Called from every \"video didn't actually play\" path (reduced-motion, save-data,\n    \/\/ autoplay rejected, play-resolved-but-stalled, decode error, safety timeout).\n    var fellBack = false;\n    function fallbackToStaticImage() {\n      if (fellBack) {\n        triggerReveal();\n        return;\n      }\n      fellBack = true;\n\n      if (poster) {\n        var fallbackSrc = staticFallbackSrc();\n        \/\/ Override the <source>s so they don't shadow the <img> swap on browsers that picked them.\n        \/\/ Mobile <source> gets the mobile crop; everything else gets the desktop crop.\n        var sources = poster.querySelectorAll('source');\n        for (var i = 0; i < sources.length; i++) {\n          var s = sources[i];\n          var media = s.getAttribute('media') || '';\n          s.srcset = \/max-width:\\s*767px\/.test(media) ? FALLBACK_MOBILE : FALLBACK_DESKTOP;\n        }\n        var img = poster.querySelector('img');\n        if (img) img.src = fallbackSrc;\n        poster.classList.remove('hero-poster--hidden');\n      }\n\n      if (video) {\n        try {\n          video.pause();\n          video.removeAttribute('src');\n          \/\/ Detach any <source> children so load() actually unbinds the network resource.\n          while (video.firstChild) video.removeChild(video.firstChild);\n          video.load();\n        } catch (e) { \/* best-effort cleanup *\/ }\n      }\n\n      if (videoLoop) {\n        try {\n          videoLoop.pause();\n          videoLoop.removeAttribute('src');\n          while (videoLoop.firstChild) videoLoop.removeChild(videoLoop.firstChild);\n          videoLoop.load();\n        } catch (e) { \/* best-effort cleanup *\/ }\n      }\n\n      triggerReveal();\n    }\n\n    \/\/ Ultimate safety net: if no other reveal trigger fires within SAFETY_TIMEOUT_MS, force the\n    \/\/ reveal so the hero text is never stuck hidden. This MUST NOT swap to the static fallback \u2014\n    \/\/ a working video that just hasn't yet hit currentTime >= 6s should keep playing untouched.\n    \/\/ The fallback image is reserved for genuine failure paths (reduced-motion, save-data,\n    \/\/ autoplay rejected, decode error, iOS Low Power play-watchdog).\n    setTimeout(triggerReveal, SAFETY_TIMEOUT_MS);\n\n    if (!video || !poster) {\n      \/\/ Markup missing \u2014 reveal so any text\/SVG that gates on the class still becomes visible.\n      triggerReveal();\n      return;\n    }\n\n    var reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;\n    var saveData      = navigator.connection && navigator.connection.saveData;\n\n    if (reducedMotion || saveData) {\n      \/\/ Skip the video entirely. Show the branded still and reveal so the user sees the hero content.\n      fallbackToStaticImage();\n      return;\n    }\n\n    \/\/ Pick source based on viewport. Mobile gets the vertical crop; tablet + desktop share the horizontal.\n    var w = window.innerWidth;\n    var VIDEO_DESKTOP_TABLET = '\/wp-content\/uploads\/2026\/05\/hypersolved-f-c.mp4';\n    var VIDEO_MOBILE         = '\/wp-content\/uploads\/2026\/05\/hypersolved-vertical-fc.mp4';\n    var LOOP_DESKTOP_TABLET  = '\/wp-content\/uploads\/2026\/05\/hypersolved-loop-fc.mp4';\n    var LOOP_MOBILE          = '\/wp-content\/uploads\/2026\/05\/hypersolved-vertical-loop-fc-noaudio.mp4';\n    var src     = w <= 767 ? VIDEO_MOBILE : VIDEO_DESKTOP_TABLET;\n    var loopSrc = w <= 767 ? LOOP_MOBILE  : LOOP_DESKTOP_TABLET;\n\n    \/\/ Preload the loop video as soon as the intro's first frame is decoded\n    \/\/ (we call this from 'loadeddata' below). Idempotent so it's safe to call\n    \/\/ from multiple triggers. By the time the intro ends, the loop is ready.\n    var loopPreloaded = false;\n    function preloadLoop() {\n      if (loopPreloaded || !videoLoop) return;\n      loopPreloaded = true;\n      videoLoop.preload = 'auto';\n      var s = document.createElement('source');\n      s.src  = loopSrc;\n      s.type = 'video\/mp4';\n      videoLoop.appendChild(s);\n      videoLoop.addEventListener('error', fallbackToStaticImage);\n      videoLoop.load();\n    }\n\n    \/\/ Hand off intro -> loop on the intro's 'ended' event. Both videos are stacked\n    \/\/ at identical positioning; the swap is an instant opacity flip. Because the\n    \/\/ loop's first frame matches the intro's last frame, the swap is frame-identical.\n    var LOOP_READY_TIMEOUT_MS = 3000; \/\/ hard cap on waiting for the loop to be playable\n    function handoffToLoop() {\n      if (!videoLoop) return;\n      function swap() {\n        videoLoop.classList.add('hero-video--active');\n        video.style.opacity = '0';\n        try {\n          video.pause();\n          video.removeAttribute('src');\n          while (video.firstChild) video.removeChild(video.firstChild);\n          video.load();\n        } catch (e) { \/* best-effort cleanup *\/ }\n      }\n      function startLoop() {\n        var p = videoLoop.play();\n        if (p && typeof p.then === 'function') {\n          p.then(swap).catch(fallbackToStaticImage);\n        } else {\n          swap();\n        }\n      }\n      \/\/ If the loop already has enough data to play, go now.\n      \/\/ Otherwise wait for canplay with a hard timeout so we never hang\n      \/\/ on a permanently-pending play() (the failure mode we just hit).\n      if (videoLoop.readyState >= 2) {\n        startLoop();\n        return;\n      }\n      var done = false;\n      function onReady() {\n        if (done) return;\n        done = true;\n        videoLoop.removeEventListener('canplay', onReady);\n        startLoop();\n      }\n      videoLoop.addEventListener('canplay', onReady);\n      setTimeout(function () {\n        if (done) return;\n        done = true;\n        videoLoop.removeEventListener('canplay', onReady);\n        fallbackToStaticImage();\n      }, LOOP_READY_TIMEOUT_MS);\n    }\n\n    function loadVideo() {\n      var source = document.createElement('source');\n      source.src = src;\n      source.type = 'video\/mp4';\n      video.appendChild(source);\n\n      \/\/ Hide poster once first frame is decoded, then start playback\n      video.addEventListener(\n        'loadeddata',\n        function () {\n          poster.classList.add('hero-poster--hidden');\n\n          \/\/ Kick off the loop preload now \u2014 guaranteed entry point.\n          \/\/ The original 'playing'-based trigger had a race (playing can fire\n          \/\/ before play()'s promise resolves) that left the loop with no source.\n          preloadLoop();\n\n          var playPromise = video.play();\n          \/\/ Older browsers don't return a promise from play(); skip the watchdog there.\n          if (!playPromise || typeof playPromise.then !== 'function') return;\n\n          playPromise.then(function () {\n            \/\/ play() resolved \u2014 but on iOS Low Power Mode the video may still be paused.\n            \/\/ Confirm by waiting for the first 'playing' event; bail out to the static image\n            \/\/ if it never fires within PLAY_WATCHDOG_MS.\n            var playingFired = false;\n            function onPlaying() {\n              playingFired = true;\n              video.removeEventListener('playing', onPlaying);\n              \/\/ Intro is verified playing \u2014 start fetching the loop now.\n              preloadLoop();\n            }\n            video.addEventListener('playing', onPlaying);\n            setTimeout(function () {\n              if (playingFired) return;\n              video.removeEventListener('playing', onPlaying);\n              if (video.paused || video.currentTime === 0) fallbackToStaticImage();\n            }, PLAY_WATCHDOG_MS);\n          }).catch(fallbackToStaticImage);\n        },\n        { once: true }\n      );\n\n      \/\/ Primary trigger: video has played REVEAL_AT_SECONDS seconds.\n      \/\/ timeupdate fires ~4\u00d7\/s during playback, so this is accurate to ~250 ms.\n      video.addEventListener('timeupdate', function () {\n        if (video.currentTime >= REVEAL_AT_SECONDS) triggerReveal();\n      });\n\n      \/\/ Intro finished \u2014 hand off to the looping video.\n      video.addEventListener('ended', handoffToLoop);\n\n      \/\/ If the video errors out at any point, fall back so the page still works.\n      video.addEventListener('error', fallbackToStaticImage);\n\n      video.load();\n    }\n\n    \/\/ Start the video fetch as soon as the poster image is in cache. We used\n    \/\/ to defer with requestIdleCallback(timeout: 1500), which added up to 1.5s\n    \/\/ of latency before the browser even knew it should fetch the video. The\n    \/\/ <link rel=\"preload\" as=\"video\"> in <head> already started the fetch in\n    \/\/ parallel with the page; this just lets the <video> element pick up that\n    \/\/ preload and hand us back loadeddata as soon as the first frame decodes.\n    var img = poster.querySelector('img');\n    if (img && img.complete) loadVideo();\n    else if (img) img.addEventListener('load', loadVideo, { once: true });\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2dae7ef e-con-full hypersolved-hero-overlay e-flex e-con e-child\" data-id=\"2dae7ef\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-98939a2 e-con-full e-flex e-con e-child\" data-id=\"98939a2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-924e064 elementor-widget-mobile__width-initial elementor-widget__width-initial elementor-widget-tablet__width-initial hypersolved-hero-subheading elementor-widget elementor-widget-heading\" data-id=\"924e064\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Introducing<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0757362 hypersolved-hero-heading elementor-widget elementor-widget-heading\" data-id=\"0757362\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"><span>H<\/span>YPER<span>S<\/span>OLVED<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-368cfc7 elementor-widget-mobile__width-initial elementor-widget__width-initial elementor-widget-tablet__width-initial hypersolved-hero-subheading elementor-widget elementor-widget-heading\" data-id=\"368cfc7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">The most complete cooling water solution for AI Data Centers<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bad33f0 elementor-align-center hypersolved-hero-cta elementor-widget elementor-widget-button\" data-id=\"bad33f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"\/solutions\/hypersolved\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">learn more<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d39a2b9 e-con-full sticky-homepage-video e-flex e-con e-child\" data-id=\"d39a2b9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/gradiant-homepage-takeover-ripple.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted\" role=\"presentation\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div>\t\t<div class=\"elementor-element elementor-element-03e7af3 hero-heading elementor-widget elementor-widget-heading\" data-id=\"03e7af3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">A DIFFERENT KIND OF<\/p>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bcb832f hero-heading elementor-widget elementor-widget-heading\" data-id=\"bcb832f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">WATER COMPANY<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-00b4da9 e-con-full reveal-spacer e-flex e-con e-child\" data-id=\"00b4da9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-05f08c7 e-flex e-con-boxed e-con e-child\" data-id=\"05f08c7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-253eafc e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"253eafc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInDown&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b088231 e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"b088231\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInDown&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1bda24 text-gradient-secondary elementor-widget elementor-widget-heading\" data-id=\"a1bda24\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">It\u2019s time to rethink water as the value stream most critical to the world\u2019s leading industries<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c9740dc e-con-full elementor-hidden-mobile e-flex elementor-invisible e-con e-child\" data-id=\"c9740dc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInDown&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-234a8de e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"234a8de\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;,&quot;animation_delay&quot;:200}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e828696 elementor-widget elementor-widget-text-editor\" data-id=\"e828696\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>At Gradiant, we understand that water is our most precious resource. That\u2019s why, as a leading water treatment company, we\u2019re committed to ensuring clean, fresh water for generations to come.<\/p>\n<p>\u00a0<\/p>\n<p>Addressing the problem of global water scarcity starts by focusing on one of the most intensive users \u2014 industry. Through our unique offerings, we help the world\u2019s leading brands reduce, reclaim, and renew the water they use by leveraging cutting-edge water treatment technology.<\/p>\n<p>\u00a0<\/p>\n<p>Water is not just a piece of the puzzle \u2014 it IS the puzzle.<\/p>\n<p>\u00a0<\/p>\n<p>We\u2019re dedicated to partnering with our customers by delivering unparalleled service and innovation to solve our customers&#8217; toughest water treatment challenges.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-82b6887 elementor-align-left elementor-invisible elementor-widget elementor-widget-button\" data-id=\"82b6887\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInDown&quot;}\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#what-our-clients-are-saying\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">see the benefits<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0d37392 e-con-full elementor-hidden-mobile e-flex elementor-invisible e-con e-child\" data-id=\"0d37392\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInDown&quot;}\">\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b9d697d elementor-column-offset-1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b9d697d\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-7c8661c\" data-id=\"7c8661c\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;animation&quot;:&quot;none&quot;,&quot;animation_delay&quot;:100}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2771174 text-gradient-secondary elementor-widget-mobile__width-initial elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"2771174\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInDown&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">SINGULARLY FOCUSED ON WATER<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-af4f0fd elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-invisible\" data-id=\"af4f0fd\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-dce89a9\" data-id=\"dce89a9\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2d97d1f elementor-widget elementor-widget-text-editor\" data-id=\"2d97d1f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><strong>We are the industry\u2019s only complete, site-wide solution.<\/strong><\/p>\n<p>\u00a0<\/p>\n<p>Deploying a proprietary technology stack that combines award-winning water treatment technology solutions with best-in-class engineering and customized\u00a0chemicals.<\/p>\n<p>\u00a0<\/p>\n<p>Delivered precisely with the power of the industry\u2019s most advanced AI to achieve lower capital and life-cycle costs, operational ease, increased reliability, and improved safety \u2014 all with a reduced environmental footprint.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-7e33e0d\" data-id=\"7e33e0d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-b9c7952 elementor-hidden-tablet elementor-hidden-mobile\" data-id=\"b9c7952\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6151bea elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"6151bea\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ff214a0\" data-id=\"ff214a0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0977a92 elementor-absolute static-md-down elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-image\" data-id=\"0977a92\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;_animation&quot;:&quot;fadeInDown&quot;,&quot;_animation_delay&quot;:300}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"704\" height=\"690\" src=\"https:\/\/gradiant.com\/wp-content\/uploads\/2024\/10\/ellipse-copia.webp\" class=\"attachment-full size-full wp-image-10579\" alt=\"Illustration of water held in shape, symbolizing Gradiant\u2019s mission to give nature water back.\" srcset=\"https:\/\/gradiant.com\/wp-content\/uploads\/2024\/10\/ellipse-copia.webp 704w, https:\/\/gradiant.com\/wp-content\/uploads\/2024\/10\/ellipse-copia-300x294.webp 300w, https:\/\/gradiant.com\/wp-content\/uploads\/2024\/10\/ellipse-copia-12x12.webp 12w, https:\/\/gradiant.com\/wp-content\/uploads\/2024\/10\/ellipse-copia-64x64.webp 64w, https:\/\/gradiant.com\/wp-content\/uploads\/2024\/10\/ellipse-copia-150x147.webp 150w\" sizes=\"auto, (max-width: 704px) 100vw, 704px\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Introducing HYPERSOLVED The most complete cooling water solution for AI Data Centers learn more A DIFFERENT KIND OF WATER COMPANY It\u2019s time to rethink water as the value stream most critical to the world\u2019s leading industries At Gradiant, we understand that water is our most precious resource. That\u2019s why, as a leading water treatment company, [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-11752","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>homepage-hero-takeover - Gradiant<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gradiant.com\/ko\/homepage-hero-takeover\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"homepage-hero-takeover - Gradiant\" \/>\n<meta property=\"og:description\" content=\"Introducing HYPERSOLVED The most complete cooling water solution for AI Data Centers learn more A DIFFERENT KIND OF WATER COMPANY It\u2019s time to rethink water as the value stream most critical to the world\u2019s leading industries At Gradiant, we understand that water is our most precious resource. That\u2019s why, as a leading water treatment company, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gradiant.com\/ko\/homepage-hero-takeover\/\" \/>\n<meta property=\"og:site_name\" content=\"Gradiant\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-14T11:56:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/gradiant.com\/wp-content\/uploads\/2024\/10\/ellipse-copia.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Gradiant_Corp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"11\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/gradiant.com\\\/homepage-hero-takeover\\\/\",\"url\":\"https:\\\/\\\/gradiant.com\\\/homepage-hero-takeover\\\/\",\"name\":\"homepage-hero-takeover - Gradiant\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/gradiant.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/gradiant.com\\\/homepage-hero-takeover\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/gradiant.com\\\/homepage-hero-takeover\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/gradiant.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/ellipse-copia.webp\",\"datePublished\":\"2026-05-11T06:37:53+00:00\",\"dateModified\":\"2026-05-14T11:56:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/gradiant.com\\\/homepage-hero-takeover\\\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/gradiant.com\\\/homepage-hero-takeover\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\\\/\\\/gradiant.com\\\/homepage-hero-takeover\\\/#primaryimage\",\"url\":\"https:\\\/\\\/gradiant.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/ellipse-copia.webp\",\"contentUrl\":\"https:\\\/\\\/gradiant.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/ellipse-copia.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/gradiant.com\\\/homepage-hero-takeover\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Gradiant\",\"item\":\"https:\\\/\\\/gradiant.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"homepage-hero-takeover\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/gradiant.com\\\/#website\",\"url\":\"https:\\\/\\\/gradiant.com\\\/\",\"name\":\"Gradiant\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/gradiant.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/gradiant.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Corporation\",\"@id\":\"https:\\\/\\\/www.gradiant.com\\\/#organization\",\"name\":\"Gradiant\",\"legalName\":\"Gradiant Corporation\",\"url\":\"https:\\\/\\\/www.gradiant.com\\\/\",\"description\":\"Gradiant is a global water technology company that designs, builds, and operates advanced water and wastewater treatment systems for industrial clients. An MIT spinout founded in 2013, Gradiant helps companies reduce freshwater consumption, reclaim wastewater, and recover valuable resources through proprietary technologies achieving up to 99% water recovery.\",\"slogan\":\"Ensuring water for generations to come\",\"foundingDate\":\"2013\",\"foundingLocation\":{\"@type\":\"Place\",\"name\":\"Massachusetts Institute of Technology\",\"address\":{\"@type\":\"PostalAddress\",\"addressLocality\":\"Cambridge\",\"addressRegion\":\"MA\",\"addressCountry\":\"US\"}},\"founder\":[{\"@type\":\"Person\",\"name\":\"Anurag Bajpayee\",\"jobTitle\":\"Chief Executive Officer\"},{\"@type\":\"Person\",\"name\":\"Prakash Govindan\",\"jobTitle\":\"Chief Operating Officer\"}],\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":1000,\"maxValue\":1500},\"address\":{\"@type\":\"PostalAddress\",\"streetAddress\":\"130 New Boston St, Suite 200\",\"addressLocality\":\"Woburn\",\"addressRegion\":\"MA\",\"postalCode\":\"01801\",\"addressCountry\":\"US\"},\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.gradiant.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.gradiant.com\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/Gradiant.svg\",\"contentUrl\":\"https:\\\/\\\/www.gradiant.com\\\/wp-content\\\/uploads\\\/2023\\\/01\\\/Gradiant.svg\",\"width\":117,\"height\":26,\"caption\":\"Gradiant\"},\"image\":{\"@id\":\"https:\\\/\\\/www.gradiant.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/Gradiant_Corp\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/gradiant-corporation\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@gradiantcorp\"],\"subOrganization\":[{\"@type\":\"Organization\",\"name\":\"alkaLi\",\"url\":\"https:\\\/\\\/alkali3.com\\\/\",\"description\":\"Gradiant spin-out company specializing in direct lithium extraction from produced water and brines using proprietary EC\u00b2 technology.\"},{\"@type\":\"Organization\",\"name\":\"Gradiant Energy Services\",\"description\":\"Gradiant subsidiary providing produced water treatment solutions for oil and gas operations.\"}],\"areaServed\":{\"@type\":\"Place\",\"name\":\"Worldwide\"},\"knowsAbout\":[\"Industrial water treatment\",\"Wastewater treatment\",\"Water recycling\",\"Desalination\",\"PFAS removal\",\"Ultrapure water\",\"Zero liquid discharge\",\"Direct lithium extraction\",\"Semiconductor water treatment\",\"Produced water treatment\"],\"award\":[\"Global Water Intelligence Water Technology Company of the Year 2024\",\"Global Water Intelligence Water Technology Company of the Year 2022\",\"TIME Best Inventions 2024\",\"Gold Edison Award 2025\",\"Global Cleantech 100 2023\"],\"naics\":\"221310\",\"isicV4\":\"3600\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"homepage-hero-takeover - Gradiant","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/gradiant.com\/ko\/homepage-hero-takeover\/","og_locale":"ko_KR","og_type":"article","og_title":"homepage-hero-takeover - Gradiant","og_description":"Introducing HYPERSOLVED The most complete cooling water solution for AI Data Centers learn more A DIFFERENT KIND OF WATER COMPANY It\u2019s time to rethink water as the value stream most critical to the world\u2019s leading industries At Gradiant, we understand that water is our most precious resource. That\u2019s why, as a leading water treatment company, [&hellip;]","og_url":"https:\/\/gradiant.com\/ko\/homepage-hero-takeover\/","og_site_name":"Gradiant","article_modified_time":"2026-05-14T11:56:26+00:00","og_image":[{"url":"https:\/\/gradiant.com\/wp-content\/uploads\/2024\/10\/ellipse-copia.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Gradiant_Corp","twitter_misc":{"Est. reading time":"11\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/gradiant.com\/homepage-hero-takeover\/","url":"https:\/\/gradiant.com\/homepage-hero-takeover\/","name":"homepage-hero-takeover - Gradiant","isPartOf":{"@id":"https:\/\/gradiant.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/gradiant.com\/homepage-hero-takeover\/#primaryimage"},"image":{"@id":"https:\/\/gradiant.com\/homepage-hero-takeover\/#primaryimage"},"thumbnailUrl":"https:\/\/gradiant.com\/wp-content\/uploads\/2024\/10\/ellipse-copia.webp","datePublished":"2026-05-11T06:37:53+00:00","dateModified":"2026-05-14T11:56:26+00:00","breadcrumb":{"@id":"https:\/\/gradiant.com\/homepage-hero-takeover\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gradiant.com\/homepage-hero-takeover\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/gradiant.com\/homepage-hero-takeover\/#primaryimage","url":"https:\/\/gradiant.com\/wp-content\/uploads\/2024\/10\/ellipse-copia.webp","contentUrl":"https:\/\/gradiant.com\/wp-content\/uploads\/2024\/10\/ellipse-copia.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/gradiant.com\/homepage-hero-takeover\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Gradiant","item":"https:\/\/gradiant.com\/"},{"@type":"ListItem","position":2,"name":"homepage-hero-takeover"}]},{"@type":"WebSite","@id":"https:\/\/gradiant.com\/#website","url":"https:\/\/gradiant.com\/","name":"Gradiant","description":"","publisher":{"@id":"https:\/\/gradiant.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gradiant.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Corporation","@id":"https:\/\/www.gradiant.com\/#organization","name":"Gradiant","legalName":"Gradiant Corporation","url":"https:\/\/www.gradiant.com\/","description":"Gradiant is a global water technology company that designs, builds, and operates advanced water and wastewater treatment systems for industrial clients. An MIT spinout founded in 2013, Gradiant helps companies reduce freshwater consumption, reclaim wastewater, and recover valuable resources through proprietary technologies achieving up to 99% water recovery.","slogan":"Ensuring water for generations to come","foundingDate":"2013","foundingLocation":{"@type":"Place","name":"Massachusetts Institute of Technology","address":{"@type":"PostalAddress","addressLocality":"Cambridge","addressRegion":"MA","addressCountry":"US"}},"founder":[{"@type":"Person","name":"Anurag Bajpayee","jobTitle":"Chief Executive Officer"},{"@type":"Person","name":"Prakash Govindan","jobTitle":"Chief Operating Officer"}],"numberOfEmployees":{"@type":"QuantitativeValue","minValue":1000,"maxValue":1500},"address":{"@type":"PostalAddress","streetAddress":"130 New Boston St, Suite 200","addressLocality":"Woburn","addressRegion":"MA","postalCode":"01801","addressCountry":"US"},"logo":{"@type":"ImageObject","@id":"https:\/\/www.gradiant.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.gradiant.com\/wp-content\/uploads\/2023\/01\/Gradiant.svg","contentUrl":"https:\/\/www.gradiant.com\/wp-content\/uploads\/2023\/01\/Gradiant.svg","width":117,"height":26,"caption":"Gradiant"},"image":{"@id":"https:\/\/www.gradiant.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/Gradiant_Corp","https:\/\/www.linkedin.com\/company\/gradiant-corporation\/","https:\/\/www.youtube.com\/@gradiantcorp"],"subOrganization":[{"@type":"Organization","name":"alkaLi","url":"https:\/\/alkali3.com\/","description":"Gradiant spin-out company specializing in direct lithium extraction from produced water and brines using proprietary EC\u00b2 technology."},{"@type":"Organization","name":"Gradiant Energy Services","description":"Gradiant subsidiary providing produced water treatment solutions for oil and gas operations."}],"areaServed":{"@type":"Place","name":"Worldwide"},"knowsAbout":["Industrial water treatment","Wastewater treatment","Water recycling","Desalination","PFAS removal","Ultrapure water","Zero liquid discharge","Direct lithium extraction","Semiconductor water treatment","Produced water treatment"],"award":["Global Water Intelligence Water Technology Company of the Year 2024","Global Water Intelligence Water Technology Company of the Year 2022","TIME Best Inventions 2024","Gold Edison Award 2025","Global Cleantech 100 2023"],"naics":"221310","isicV4":"3600"}]}},"_links":{"self":[{"href":"https:\/\/gradiant.com\/ko\/wp-json\/wp\/v2\/pages\/11752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gradiant.com\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gradiant.com\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gradiant.com\/ko\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/gradiant.com\/ko\/wp-json\/wp\/v2\/comments?post=11752"}],"version-history":[{"count":0,"href":"https:\/\/gradiant.com\/ko\/wp-json\/wp\/v2\/pages\/11752\/revisions"}],"wp:attachment":[{"href":"https:\/\/gradiant.com\/ko\/wp-json\/wp\/v2\/media?parent=11752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}