/*
Theme Name: SpyderNet Reference Match
Theme URI: https://spydernet.com/
Author: SpyderNet
Description: A clean, modern Gutenberg block theme for SpyderNet digital services.
Version: 1.2.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: spydernet
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, wide-blocks
*/

:root{--sn-orange:#f15a24;--sn-ink:#111318;--sn-charcoal:#242832;--sn-silver:#aeb5be;--sn-mist:#f3f5f7}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
a{transition:color .2s ease,background-color .2s ease,transform .2s ease}
a:hover{color:var(--sn-orange)}
.wp-site-blocks{overflow:hidden}
.site-header{position:relative;z-index:20;background:#fff;border-bottom:1px solid #eceef0}
.header-inner{min-height:72px;padding-top:6px;padding-bottom:6px}
.spydernet-brand{display:block;flex:0 0 auto;line-height:0}
.spydernet-brand img{display:block;width:min(367px,28vw);height:auto;max-height:86px;object-fit:contain}
.header-right{gap:26px}
.header-right .wp-block-navigation a{color:var(--sn-ink);text-decoration:none}
.header-right .wp-block-navigation a:hover{color:var(--sn-orange)}
.wp-block-button__link{background:var(--sn-orange);color:#fff!important;padding:14px 24px;border-radius:999px;font-weight:750;box-shadow:0 8px 22px rgba(241,90,36,.18)}
.wp-block-button__link:hover{background:#d94714;transform:translateY(-2px)}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--sn-ink)!important;border:1px solid #cbd0d6;box-shadow:none}
.wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:var(--sn-orange);color:var(--sn-orange)!important}
.hero-section{padding:clamp(38px,5vw,66px) 24px 42px;background:radial-gradient(circle at 82% 42%,rgba(241,90,36,.09),transparent 28%),linear-gradient(180deg,#fff 0%,#fafbfc 100%)}
.hero-grid{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(220px,.75fr);align-items:center;gap:4vw}
.hero-copy{max-width:720px}
.hero-copy h1{max-width:590px;font-size:clamp(2.8rem,5vw,4.5rem)!important;margin:12px 0 16px;letter-spacing:-.065em;line-height:.99}
.accent-text{color:var(--sn-orange)}
.eyebrow{font-size:12px!important;letter-spacing:.18em;font-weight:800;color:var(--sn-orange);text-transform:uppercase;margin-bottom:16px}
.eyebrow-dot{display:inline-block;width:8px;height:8px;background:var(--sn-orange);border-radius:50%;margin-right:9px;box-shadow:0 0 0 5px rgba(241,90,36,.12)}
.hero-actions{margin-top:28px;gap:12px}
.hero-note{margin-top:25px;color:#737b85}
.hero-art{min-height:280px;display:flex;align-items:center;justify-content:center}
.spider-orbit{width:min(100%,300px);aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center}
.orbit{position:absolute;border:1px solid rgba(174,181,190,.65);border-radius:50%;transform:rotate(-28deg)}
.orbit-one{width:88%;height:58%}
.orbit-two{width:72%;height:82%;transform:rotate(42deg)}
.orbit-three{width:105%;height:34%;transform:rotate(18deg);border-color:rgba(241,90,36,.45)}
.spider-mark{width:145px;height:170px;position:relative;z-index:2;filter:drop-shadow(0 20px 25px rgba(17,19,24,.16))}
.spider-mark:before,.spider-mark:after{content:"";position:absolute;top:28px;width:62px;height:118px;border:10px solid var(--sn-ink);border-top-color:transparent;border-bottom-color:transparent}
.spider-mark:before{left:-12px;transform:rotate(22deg);border-radius:70% 0 0 70%}
.spider-mark:after{right:-12px;transform:rotate(-22deg);border-radius:0 70% 70% 0}
.spider-mark i{position:absolute;z-index:2;left:34px;top:8px;width:78px;height:112px;background:linear-gradient(145deg,#333943,#08090c);border:3px solid #aeb5be;border-radius:48% 48% 52% 52% / 35% 35% 65% 65%;clip-path:polygon(50% 0,100% 18%,92% 68%,50% 100%,8% 68%,0 18%)}
.spider-mark b{position:absolute;z-index:3;left:58px;top:39px;width:30px;height:47px;background:var(--sn-orange);clip-path:polygon(0 0,100% 0,68% 50%,100% 100%,0 100%,32% 50%)}
.orbit-caption{position:absolute;bottom:4%;font-size:10px;letter-spacing:.24em;font-weight:800;color:#77808a}
.value-strip{background:var(--sn-ink);color:#fff;padding:18px 24px}
.value-strip .wp-block-group{gap:18px}
.value-strip p{margin:0;color:#cbd0d6;font-size:13px;letter-spacing:.04em}
.value-strip strong{color:#fff;letter-spacing:.12em}
.services-section{padding:64px 24px 80px}
.services-section h2{max-width:760px;letter-spacing:-.045em}
.services-section>.wp-block-group>p:not(.eyebrow){max-width:660px}
.service-grid{margin-top:28px;align-items:stretch;gap:16px!important}
.service-grid>.wp-block-column{display:flex}
.service-card{height:100%;width:100%;box-sizing:border-box;padding:22px 18px 20px;border:1px solid #e5e8eb;border-radius:18px;background:#fff;box-shadow:0 12px 34px rgba(17,19,24,.035);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.service-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(17,19,24,.09);border-color:#f5b29a}
.service-card-featured{background:#fff8f5;border-color:#f4c1ad}
.service-number{font-size:10px!important;font-weight:800;letter-spacing:.15em;color:var(--sn-orange);margin-bottom:18px}
.service-card h3{font-size:24px;letter-spacing:-.04em}
.service-card p{font-size:14px;color:#626a74}
.service-card .service-link{margin-top:25px;font-size:13px;font-weight:800}
.service-link a{color:var(--sn-ink)}
.service-link a:hover{color:var(--sn-orange)}
.approach-section{background:var(--sn-ink);padding:100px 24px;color:#fff}
.approach-section h2{letter-spacing:-.05em}
.approach-section .wp-block-column:first-child>p:not(.eyebrow){max-width:540px}
.approach-points{gap:0}
.approach-point{padding:18px 0;border-bottom:1px solid #343943;gap:20px}
.approach-point:last-child{border-bottom:0}
.approach-point h3{font-size:19px;margin:0 0 5px}
.approach-point p{margin-top:0}
.point-index{font-size:12px!important;font-weight:800;color:var(--sn-orange);letter-spacing:.1em;margin:5px 0 0}
.cta-section{padding:85px 24px}
.cta-panel{padding:clamp(34px,6vw,70px);text-align:center;border:1px solid #e8ebee;border-radius:26px;background:radial-gradient(circle at 50% 0,rgba(241,90,36,.11),transparent 45%),#f7f8f9}
.cta-panel h2{max-width:800px;margin:0 auto 18px;letter-spacing:-.05em}
.cta-panel .eyebrow{text-align:center}
.site-footer{background:#111318;color:#fff;padding:68px 24px 20px}
.footer-main{gap:48px;padding-bottom:38px}
.site-footer h3{font-size:28px;letter-spacing:-.04em}
.site-footer h4{font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.site-footer a{color:#cbd0d6;text-decoration:none}
.site-footer a:hover{color:#fff}
.site-footer .wp-block-list{padding-left:18px;font-size:14px}
.footer-rule{opacity:.35;margin-top:8px;margin-bottom:20px}
.footer-bottom p{margin:0}
.error-page{padding:120px 24px}
.post-card{padding:24px;border:1px solid #e7eaed;border-radius:18px;margin-bottom:24px}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-art{min-height:310px;max-width:440px;margin:10px auto 0}.service-grid{flex-wrap:wrap!important}.service-grid>.wp-block-column{flex-basis:calc(50% - 10px)!important}.header-right{gap:12px}}
@media(max-width:600px){.header-inner{min-height:70px}.spydernet-brand img{width:min(220px,42vw);max-height:62px}.header-right{gap:8px}.header-right .wp-block-buttons{display:none}.hero-section{padding-top:64px;padding-bottom:55px}.hero-copy h1{font-size:clamp(2.7rem,13vw,4.2rem)!important}.hero-art{min-height:260px}.spider-mark{transform:scale(.8)}.value-strip .wp-block-group{justify-content:flex-start!important;display:grid!important;grid-template-columns:1fr 1fr}.services-section,.approach-section{padding-top:68px;padding-bottom:68px}.service-grid>.wp-block-column{flex-basis:100%!important}.approach-section .wp-block-columns{gap:28px}.footer-main{gap:28px}.site-footer{padding-top:52px}.cta-section{padding:55px 18px}.cta-panel{padding:36px 22px}}

/* Reference-layout refinements */
.spydernet-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--sn-ink)}
.brand-spider{width:34px;height:38px;flex:0 0 auto}
.brand-wordmark{font-size:19px;font-weight:900;letter-spacing:-.07em;line-height:1;color:#111318}
.brand-wordmark span{color:var(--sn-orange)}
.brand-tagline{display:block;margin-top:3px;font-size:6px;font-weight:800;letter-spacing:.16em;color:#555e68}
.hero-copy h1{max-width:560px}
.hero-copy>p.has-large-font-size{max-width:540px;line-height:1.55}
.hero-note{font-size:10px!important}
.service-card{border-radius:12px;box-shadow:0 5px 18px rgba(17,19,24,.045)}
.approach-section{padding-top:70px;padding-bottom:70px}
@media(max-width:900px){.hero-section{padding-top:42px}.hero-grid{grid-template-columns:1fr}.hero-art{min-height:220px;max-width:300px}.service-grid>.wp-block-column{flex-basis:calc(50% - 10px)!important}}
@media(max-width:600px){.brand-wordmark{font-size:16px}.brand-tagline{font-size:5px}.hero-section{padding-top:40px}.hero-art{min-height:210px}.service-grid>.wp-block-column{flex-basis:100%!important}}


/* Service page patterns */
.service-hero{padding:clamp(54px,7vw,90px) 24px;background:linear-gradient(135deg,#fff 0%,#f5f6f8 100%);border-bottom:1px solid #e9ecef}
.service-hero-inner{max-width:1120px;margin:0 auto}
.service-hero h1{max-width:760px;font-size:clamp(2.6rem,5vw,4.25rem);line-height:1.02;letter-spacing:-.06em;margin:12px 0 18px}
.service-hero .service-intro{max-width:720px;font-size:clamp(1.05rem,1.6vw,1.25rem);color:#59616b}
.service-content{padding:62px 24px}
.service-content h2{letter-spacing:-.04em}
.service-feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.service-feature{padding:20px;border:1px solid #e5e8eb;border-radius:16px;background:#fff}
.service-feature h3{font-size:19px;margin:0 0 8px}
.service-feature p{margin:0;color:#626a74;font-size:14px}
.service-quote{margin:10px 24px 72px;padding:clamp(30px,5vw,58px);border-radius:22px;background:#171a20;color:#fff;text-align:center}
.service-quote h2{color:#fff;max-width:700px;margin:0 auto 12px;letter-spacing:-.04em}
.service-quote p{color:#cbd0d6;max-width:650px;margin:0 auto 22px}
.service-quote .wp-block-button__link{background:var(--sn-orange)}
@media(max-width:700px){.service-feature-list{grid-template-columns:1fr}.service-hero{padding-top:48px;padding-bottom:52px}.service-content{padding-top:44px;padding-bottom:44px}}