.marketing-page.marketing-index-page {
    --font-heading: "Montserrat", sans-serif;
    --font-body: "Inter", sans-serif;
    --marketing-index-green: #22a745;
    --marketing-index-green-dark: #168638;
    --marketing-index-green-soft: #e8f6ed;
    --marketing-index-charcoal: #10202d;
    --marketing-index-charcoal-deep: #0b1724;
    --marketing-index-text: #172b3d;
    --marketing-index-muted: #61748a;
    --marketing-index-border: #dfe6eb;
    --marketing-index-surface: #ffffff;
    --marketing-index-surface-alt: #f6faf8;
    --marketing-index-shadow: 0 20px 55px rgba(16, 32, 45, 0.14);
    --marketing-index-radius: 16px;
    position: relative;
    overflow: hidden;
    background: var(--marketing-index-surface);
    color: var(--marketing-index-text);
}
.marketing-index-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.marketing-index-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.marketing-index-eyebrow { margin: 0 0 12px; color: var(--marketing-index-green); font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.marketing-index-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.marketing-index-button:hover { transform: translateY(-2px); }.marketing-index-button-primary { background: var(--marketing-index-green); color: #fff; box-shadow: 0 8px 22px rgba(34, 167, 69, .22); }.marketing-index-button-primary:hover { background: var(--marketing-index-green-dark); color: #fff; box-shadow: 0 12px 28px rgba(34, 167, 69, .3); }.marketing-index-button-secondary { background: rgba(255, 255, 255, .92); border-color: #cbd6df; color: var(--marketing-index-charcoal); }.marketing-index-button-secondary:hover { background: #fff; border-color: var(--marketing-index-green); color: var(--marketing-index-green-dark); }
.marketing-index-theme-toggle { position: fixed; z-index: 100; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--marketing-index-border); border-radius: 999px; background: var(--marketing-index-surface); color: var(--marketing-index-text); box-shadow: 0 8px 28px rgba(16, 32, 45, .16); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease; }.marketing-index-theme-toggle:hover { transform: translateY(-2px); }.marketing-index-theme-toggle-icon { display: inline-grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--marketing-index-green-soft); color: var(--marketing-index-green); font-size: 13px; }
.marketing-index-hero { position: relative; min-height: 590px; display: flex; align-items: center; overflow: hidden; isolation: isolate; }.marketing-index-hero-background { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 43%, rgba(255,255,255,.48) 74%, rgba(255,255,255,.15) 100%), url("/images/marketing/golfgripper-hero-01-course-sunrise.jpg") center / cover no-repeat; }.marketing-index-hero-background::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(232,246,237,.28)); content: ""; }.marketing-index-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(360px,.9fr) minmax(560px,1.35fr); align-items: center; gap: 10px; padding: 70px 0 62px; }.marketing-index-hero-content { position: relative; z-index: 3; max-width: 570px; }.marketing-index-hero h1 { max-width: 600px; margin: 0; color: var(--marketing-index-charcoal); font-size: clamp(42px,5vw,67px); font-weight: 800; letter-spacing: -.045em; line-height: .98; }.marketing-index-hero h1 span { color: var(--marketing-index-green); }.marketing-index-hero-copy { max-width: 500px; margin: 24px 0 28px; color: #4e6275; font-size: 16px; line-height: 1.65; }.marketing-index-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }.marketing-index-hero-note { display: flex; align-items: center; gap: 9px; margin-top: 20px; color: #61748a; font-size: 12px; }.marketing-index-hero-note-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--marketing-index-green); box-shadow: 0 0 0 5px rgba(34,167,69,.1); }
.marketing-index-product-stage { position: relative; min-height: 430px; display: flex; align-items: center; justify-content: center; perspective: 1600px; }.marketing-index-device-glow { position: absolute; z-index: -1; width: 470px; height: 300px; border-radius: 50%; background: rgba(34,167,69,.16); filter: blur(55px); }.marketing-index-laptop { position: relative; z-index: 2; width: min(690px,100%); transform: rotateY(var(--marketing-index-product-rotate-y, -4deg)) rotateX(var(--marketing-index-product-rotate-x, 1deg)); transform-style: preserve-3d; transition: transform 500ms ease; }.marketing-index-product-stage:hover .marketing-index-laptop { transform: rotateY(-1deg) rotateX(0deg) translateY(-4px); }.marketing-index-laptop-frame { position: relative; padding: 11px; border: 3px solid #111c25; border-radius: 14px 14px 9px 9px; background: #17242e; box-shadow: 0 35px 60px rgba(10,25,35,.34), inset 0 0 0 1px rgba(255,255,255,.16); }.marketing-index-laptop-screen { position: relative; overflow: hidden; aspect-ratio: 1.55; border-radius: 5px; background: #fff; }.marketing-index-laptop-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }.marketing-index-laptop-base { position: relative; width: 112%; height: 16px; margin: -1px -6%; border-radius: 0 0 24px 24px; background: linear-gradient(180deg,#b7c0c6,#5e6971); box-shadow: 0 10px 18px rgba(10,25,35,.22); }.marketing-index-laptop-base::after { position: absolute; top: 2px; left: 50%; width: 18%; height: 3px; border-radius: 0 0 4px 4px; background: #818b91; content: ""; transform: translateX(-50%); }.marketing-index-phone { position: absolute; z-index: 4; right: 1%; bottom: 20px; width: 148px; transform: rotate(3deg); filter: drop-shadow(0 22px 24px rgba(10,25,35,.32)); }.marketing-index-phone-frame { position: relative; padding: 7px; border: 3px solid #111820; border-radius: 23px; background: #1d2730; }.marketing-index-phone-screen { overflow: hidden; aspect-ratio: .49; border-radius: 16px; background: #fff; }.marketing-index-phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }.marketing-index-phone-speaker { position: absolute; z-index: 2; top: 6px; left: 50%; width: 35%; height: 4px; border-radius: 999px; background: #0b1015; transform: translateX(-50%); }.marketing-index-phone-home { position: absolute; z-index: 2; bottom: 4px; left: 50%; width: 25%; height: 3px; border-radius: 999px; background: #7d858a; transform: translateX(-50%); }.marketing-index-product-caption { position: absolute; right: 16%; bottom: 3px; display: flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; background: rgba(255,255,255,.78); color: var(--marketing-index-charcoal); font-size: 10px; font-weight: 700; backdrop-filter: blur(10px); }.marketing-index-product-caption-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--marketing-index-green); }
.marketing-index-capabilities { position: relative; z-index: 2; background: var(--marketing-index-surface); border-top: 1px solid rgba(223,230,235,.7); border-bottom: 1px solid rgba(223,230,235,.7); }.marketing-index-capability-grid { display: grid; grid-template-columns: repeat(4,1fr); }.marketing-index-capability { min-height: 142px; display: flex; align-items: center; gap: 16px; padding: 24px 30px; border-right: 1px solid var(--marketing-index-border); }.marketing-index-capability:last-child { border-right: 0; }.marketing-index-capability-icon, .marketing-index-tool-icon { display: grid; flex: 0 0 auto; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--marketing-index-green-soft); color: var(--marketing-index-green); font-size: 21px; font-weight: 800; }.marketing-index-capability h3 { margin: 0 0 7px; color: var(--marketing-index-charcoal); font-size: 15px; }.marketing-index-capability p { margin: 0; color: var(--marketing-index-muted); font-size: 12px; line-height: 1.55; }
.marketing-index-professional { background: linear-gradient(135deg,#f7fbf9,#eef8f2); }.marketing-index-professional-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: center; gap: 58px; padding: 54px 0; }.marketing-index-professional-image { overflow: hidden; min-height: 280px; border-radius: 12px; box-shadow: 0 18px 40px rgba(16,32,45,.15); }.marketing-index-professional-image img { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; }.marketing-index-professional-content h2 { margin: 0 0 18px; color: var(--marketing-index-charcoal); font-size: clamp(30px,3vw,43px); letter-spacing: -.035em; line-height: 1.06; }.marketing-index-professional-content > p:not(.marketing-index-eyebrow) { max-width: 520px; margin: 0 0 25px; color: var(--marketing-index-muted); font-size: 15px; line-height: 1.7; }
.marketing-index-tools { padding: 70px 0 76px; background: var(--marketing-index-surface); }.marketing-index-section-heading { max-width: 720px; margin: 0 auto 40px; text-align: center; }.marketing-index-section-heading h2 { margin: 0 0 9px; color: var(--marketing-index-charcoal); font-size: clamp(30px,3.4vw,44px); letter-spacing: -.035em; line-height: 1.05; }.marketing-index-section-heading > p:not(.marketing-index-eyebrow) { margin: 0; color: var(--marketing-index-muted); font-size: 14px; line-height: 1.6; }.marketing-index-tool-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }.marketing-index-tool-card { position: relative; min-height: 285px; padding: 25px; border: 1px solid var(--marketing-index-border); border-radius: 12px; background: var(--marketing-index-surface); box-shadow: 0 7px 24px rgba(16,32,45,.05); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }.marketing-index-tool-card:hover { border-color: rgba(34,167,69,.4); box-shadow: 0 16px 34px rgba(16,32,45,.1); transform: translateY(-5px); }.marketing-index-tool-number { position: absolute; top: 24px; right: 24px; color: var(--marketing-index-green); font-size: 10px; font-weight: 800; letter-spacing: .08em; }.marketing-index-tool-card h3 { margin: 20px 0 10px; color: var(--marketing-index-charcoal); font-size: 16px; }.marketing-index-tool-card p { margin: 0 0 23px; color: var(--marketing-index-muted); font-size: 13px; line-height: 1.65; }.marketing-index-tool-card a { color: var(--marketing-index-green); font-size: 12px; font-weight: 800; text-decoration: none; }.marketing-index-tool-card a:hover { color: var(--marketing-index-green-dark); }
 .marketing-index-cta { position: relative; min-height: 265px; display: grid; place-items: center; overflow: hidden; isolation: isolate; }.marketing-index-cta-background { position: absolute; z-index: -2; inset: 0; background: linear-gradient(rgba(8,35,27,.74),rgba(8,35,27,.82)), url("/images/marketing/golf-course-hero.jpg") center / cover no-repeat; }.marketing-index-cta-content { position: relative; z-index: 2; padding: 55px 0; text-align: center; }.marketing-index-cta-content .marketing-index-eyebrow { margin-bottom: 7px; }.marketing-index-cta h2 { margin: 0 0 10px; color: #fff; font-size: clamp(28px,3vw,39px); letter-spacing: -.03em; line-height: 1.1; }.marketing-index-cta-content > p:not(.marketing-index-eyebrow) { margin: 0 0 24px; color: rgba(255,255,255,.84); font-size: 14px; }.marketing-index-cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }.marketing-index-button-cta-secondary { border-color: rgba(255,255,255,.7); background: transparent; color: #fff; }.marketing-index-button-cta-secondary:hover { background: #fff; border-color: #fff; color: var(--marketing-index-charcoal); }
.marketing-index-page [data-marketing-index-reveal] { opacity: 1; transform: none; }.marketing-index-page.marketing-index-js [data-marketing-index-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 650ms ease, transform 650ms ease; }.marketing-index-page.marketing-index-js [data-marketing-index-reveal].marketing-index-is-visible { opacity: 1; transform: translateY(0); }.marketing-index-page:focus-visible, .marketing-index-page a:focus-visible, .marketing-index-page button:focus-visible { outline: 3px solid rgba(34,167,69,.45); outline-offset: 4px; }
.marketing-index-page[data-marketing-index-theme="dark"] { --marketing-index-text: #eef5f2; --marketing-index-muted: #a7b8bd; --marketing-index-border: #29404a; --marketing-index-surface: #0d2028; --marketing-index-surface-alt: #102a31; --marketing-index-charcoal: #f3f8f6; --marketing-index-green-soft: #123f31; --marketing-index-shadow: 0 20px 55px rgba(0,0,0,.32); }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-hero-background { background: linear-gradient(90deg,rgba(7,23,29,.97) 0%,rgba(7,23,29,.91) 43%,rgba(7,23,29,.62) 74%,rgba(7,23,29,.3) 100%), url("/images/marketing/golfgripper-hero-01-course-sunrise.jpg") center / cover no-repeat; }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-hero-background::after { background: linear-gradient(180deg,rgba(7,23,29,.18),rgba(8,46,35,.38)); }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-hero-copy { color: #b9c8cc; }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-button-secondary { background: rgba(13,32,40,.8); border-color: #52666e; color: #f0f7f4; }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-button-secondary:hover { background: #17343c; border-color: var(--marketing-index-green); color: #fff; }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-product-caption { border-color: rgba(130,162,158,.5); background: rgba(13,32,40,.8); color: #fff; }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-capabilities { background: #0c1d25; }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-professional { background: linear-gradient(135deg,#102a30,#0c222a); }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-tools { background: #0d2028; }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-tool-card { background: #102a31; box-shadow: none; }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-tool-card:hover { background: #12313a; }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-capability-icon, .marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-tool-icon { background: #123f31; }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-theme-toggle { background: #0e1d2d; border-color: #314550; color: #fff; }.marketing-index-page[data-marketing-index-theme="dark"] .marketing-index-theme-toggle-icon { background: #173d32; }
@media (max-width: 1100px) { .marketing-index-hero-grid { grid-template-columns: minmax(320px,.85fr) minmax(470px,1.15fr); }.marketing-index-hero h1 { font-size: clamp(40px,5vw,58px); }.marketing-index-phone { right: 0; width: 125px; }.marketing-index-capability { padding: 22px 18px; }.marketing-index-capability-icon { width: 42px; height: 42px; } }
@media (max-width: 900px) { .marketing-index-hero { min-height: auto; }.marketing-index-hero-grid { grid-template-columns: 1fr; padding: 72px 0 48px; }.marketing-index-hero-content { max-width: 700px; }.marketing-index-product-stage { min-height: 370px; margin-top: 10px; }.marketing-index-capability-grid { grid-template-columns: repeat(2,1fr); }.marketing-index-capability:nth-child(2) { border-right: 0; }.marketing-index-capability:nth-child(-n+2) { border-bottom: 1px solid var(--marketing-index-border); }.marketing-index-professional-grid { grid-template-columns: 1fr; gap: 35px; }.marketing-index-professional-image { min-height: 300px; }.marketing-index-tool-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .marketing-index-container { width: min(100% - 32px,1180px); }.marketing-index-theme-toggle { right: 14px; bottom: 14px; }.marketing-index-hero-grid { padding-top: 55px; }.marketing-index-hero h1 { font-size: clamp(38px,12vw,52px); }.marketing-index-hero-copy { font-size: 14px; }.marketing-index-hero-actions { align-items: stretch; flex-direction: column; }.marketing-index-button { width: 100%; }.marketing-index-product-stage { min-height: 270px; margin: 5px -14px 0; }.marketing-index-laptop { width: 92%; }.marketing-index-phone { right: 1%; bottom: 4px; width: 83px; }.marketing-index-product-caption { display: none; }.marketing-index-capability-grid { grid-template-columns: 1fr; }.marketing-index-capability { min-height: 110px; border-right: 0; border-bottom: 1px solid var(--marketing-index-border); }.marketing-index-capability:last-child { border-bottom: 0; }.marketing-index-professional-grid { padding: 38px 0; }.marketing-index-professional-image, .marketing-index-professional-image img { min-height: 220px; }.marketing-index-professional-content h2 { font-size: 31px; }.marketing-index-tools { padding: 52px 0 58px; }.marketing-index-tool-grid { grid-template-columns: 1fr; }.marketing-index-tool-card { min-height: auto; }.marketing-index-cta-content { padding: 48px 0; }.marketing-index-cta-actions { flex-direction: column; align-items: stretch; width: min(100%,330px); margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .marketing-index-page *, .marketing-index-page *::before, .marketing-index-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }.marketing-index-page [data-marketing-index-reveal] { opacity: 1; transform: none; } }