/* SEOGIDTALK / KINETIC DESIGN SYSTEM / 2026-10-14
   Progressive visual layer. The HTML, navigation, text and CTAs stay usable without JS.
   Brand palette and original logo are intentionally unchanged. */
:root{--sg-neon:#d6fa7a;--sg-cyan:#72e7cc;--sg-mint:#4fd1ac;--sg-bg:#0c1516;--sg-motion:1;--sg-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:96px}
body{background:var(--sg-bg);background-image:radial-gradient(ellipse 85rem 48rem at 104% -12%,rgba(44,125,101,.09),transparent 72%)}
.header{background:rgba(12,21,22,.92);border-bottom:1px solid rgba(166,247,192,.12);transition:border-color .3s,background .3s}
.header:before{content:"";position:absolute;inset:auto 0 0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(214,250,122,.48),transparent);opacity:.6}
.brand{position:relative}.brand img{transition:filter .4s ease;transform:none!important}.brand:hover img{filter:drop-shadow(0 0 12px rgba(214,250,122,.4))}
.brand small{letter-spacing:.18em;text-transform:uppercase}.nav a{transition:color .25s ease}.nav a:hover{color:var(--sg-neon)}
/* Cinematic first fold — no video request, background is GPU-friendly CSS only. */
.solo-hero{isolation:isolate;overflow:hidden;background:linear-gradient(115deg,rgba(12,21,22,.96) 18%,rgba(17,36,34,.93) 100%);border-bottom:1px solid rgba(214,250,122,.1)}
.solo-hero:before{content:"";position:absolute;z-index:-2;inset:-20%;pointer-events:none;background:radial-gradient(ellipse 24% 40% at 74% 32%,rgba(111,222,174,.18),transparent 76%),radial-gradient(ellipse 29% 34% at 98% 90%,rgba(214,250,122,.09),transparent 74%);animation:sg-ambient 19s ease-in-out infinite alternate;will-change:transform}
.solo-hero:after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.21;background-image:linear-gradient(rgba(178,217,197,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(178,217,197,.13) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(90deg,transparent 4%,#000 73%);-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 73%)}
.solo-home-hero{min-height:min(790px,calc(100svh - 75px));display:flex;align-items:center;padding-block:84px 92px}
.solo-home-hero .solo-wrap{position:relative;z-index:1}
.solo-kicker{display:inline-flex;align-items:center;gap:12px;position:relative;letter-spacing:.17em;font-size:11px;color:var(--sg-neon);max-width:100%}
.solo-kicker:before{content:"";width:18px;height:1px;flex:0 0 18px;background:var(--sg-neon);box-shadow:0 0 14px rgba(214,250,122,.65)}
.solo-hero .solo-kicker:before{width:7px;height:7px;flex-basis:7px;border-radius:50%;box-shadow:0 0 0 5px rgba(214,250,122,.07),0 0 25px rgba(214,250,122,.55);animation:sg-beacon 3s ease-in-out infinite}
.solo-home-hero h1{font-weight:840;line-height:1.075;letter-spacing:-.06em;max-width:770px}
.solo-hero h1 em{position:relative;display:inline-block;color:var(--sg-neon);text-shadow:0 0 55px rgba(214,250,122,.17)}
.solo-home-hero h1 em{background-image:linear-gradient(95deg,#d6fa7a 8%,#eefebd 39%,#7ae4c7 76%,#d6fa7a 100%);background-size:180% 100%;color:transparent;-webkit-background-clip:text;background-clip:text;animation:sg-ink-shift 8s ease-in-out infinite alternate}
.sg-headline-line{display:block;opacity:0;transform:translate3d(0,28px,0);animation:sg-headline-in 950ms var(--sg-ease) forwards;animation-delay:calc(90ms + var(--sg-order,0)*140ms)}
.solo-hero .solo-lead{max-width:660px;color:#d1dfd9;line-height:1.78}
.solo-home-hero .solo-lead{max-width:600px}
.solo-home-hero .solo-actions,.solo-home-hero .solo-note{animation:sg-simple-in .85s var(--sg-ease) both;animation-delay:.68s}
.solo-home-hero .solo-note{animation-delay:.88s;letter-spacing:.015em}
.sg-hero-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 4px;color:#b9c9bf;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:750}
.sg-hero-meta span{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.sg-hero-meta span:before{content:"";display:block;height:6px;width:6px;border-radius:50%;background:#8addaf;box-shadow:0 0 12px #8addaf50}
.sg-hero-meta .sg-meta-sep{opacity:.3;width:18px;height:1px;background:#b9c9bf}
.sg-hero-meta .sg-meta-sep:before{display:none}
/* Visual SEO workflow — illustrative, deliberately no fictitious scores. */
.signal-panel{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(159,225,181,.35);border-radius:28px;background:linear-gradient(148deg,rgba(36,63,55,.96),rgba(11,29,29,.98) 58%,rgba(15,36,31,.97));box-shadow:0 45px 100px rgba(0,0,0,.35),inset 0 1px rgba(226,255,217,.06);transform-style:preserve-3d;animation:sg-panel-enter 1.15s var(--sg-ease) .25s both}
.signal-panel:before{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(115deg,transparent 16%,rgba(215,255,207,.045) 45%,transparent 62%);background-size:220% 100%;animation:sg-panel-shimmer 10s linear infinite}
.signal-panel:after{content:"";position:absolute;right:-110px;top:-150px;width:300px;height:300px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(214,250,122,.13),transparent 70%)}
.signal-top{position:relative;z-index:1;display:flex;align-items:center;gap:10px;font-weight:700;color:#d2e7d7;border-color:#365348;padding:20px 24px}
.signal-dot{box-shadow:0 0 0 4px #d6fa7a14,0 0 24px #d6fa7a9c;animation:sg-beacon 3s ease-in-out infinite}
.sg-window-dots{display:inline-flex;gap:5px;margin-left:auto}.sg-window-dots i{display:block;width:5px;height:5px;background:#a6cfaa;border-radius:50%;opacity:.5}
.signal-orbit{height:280px;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,rgba(214,250,122,.14),transparent 63%)}
.signal-orbit:before{inset:36px 22%;border:1px dashed rgba(165,249,178,.37);animation:sg-orbit-rotate 38s linear infinite}
.signal-orbit:after{inset:18px 13%;border:1px solid rgba(154,239,181,.14);animation:sg-orbit-counter 48s linear infinite}
.signal-orbit>span{padding:8px 13px;color:#def8db;border:1px solid rgba(130,230,175,.27);font-size:11px;font-weight:750;box-shadow:0 15px 35px rgba(0,0,0,.2)}
.signal-orbit>span:first-child{transform:translateY(-30px)}.signal-orbit>span:last-child{transform:translateY(30px)}
.signal-orbit strong{position:relative;z-index:2;font-size:clamp(44px,4vw,57px);line-height:.9;letter-spacing:-.07em;color:#d6fa7a;filter:drop-shadow(0 0 20px rgba(214,250,122,.22));animation:sg-core-pulse 5s ease-in-out infinite}
.signal-orbit strong small{display:block;margin-top:12px;font-size:11px;letter-spacing:.07em;color:#deefe0;font-weight:600}
.sg-radar-sweep{pointer-events:none;position:absolute;inset:14px 50px;border-radius:50%;background:conic-gradient(from 80deg,transparent 0 63%,rgba(184,250,170,.095) 87%,transparent 100%);animation:sg-orbit-rotate 18s linear infinite}
.sg-signal-track{height:2px;margin:0 24px 10px;border-radius:10px;background:rgba(214,250,122,.16);overflow:hidden}.sg-signal-track span{display:block;height:100%;width:25%;background:linear-gradient(90deg,transparent,var(--sg-neon),transparent);animation:sg-track 6s ease-in-out infinite}
.signal-panel ol{position:relative;z-index:1}.signal-panel li{border-color:rgba(184,220,185,.14)}.signal-panel li>span{color:var(--sg-neon);font-variant-numeric:tabular-nums;font-weight:750}.signal-panel li p{color:#b1c8bd}.signal-bottom{color:#b9d5bb;border-top:1px solid #385246;border-bottom:0;font-weight:650}
/* Distinct service grid cards: dimensional border / luminous active corner. */
.solo-section{position:relative;isolation:isolate}
.solo-section.solo-tint{background:linear-gradient(145deg,#102223,#111e20 70%,#0d191a)}
.solo-section.solo-tint:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.18;background:radial-gradient(circle at 94% 30%,#7bd0ac52,transparent 42%)}
.solo-section h2,.solo-contact-band h2{font-weight:800;letter-spacing:-.048em;line-height:1.13;text-wrap:balance}
.solo-section h2{position:relative;max-width:900px}
.solo-section .solo-section-lead{max-width:770px}
.solo-service-card,.solo-tile,.solo-need,.solo-step,.solo-method,.solo-plan,.sgcard-article{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(144,192,166,.23);background:linear-gradient(140deg,rgba(31,55,51,.94),rgba(16,32,32,.96));border-radius:22px;box-shadow:inset 0 1px rgba(232,255,219,.03);transition:transform .44s var(--sg-ease),border-color .3s ease,box-shadow .44s var(--sg-ease),background .3s ease}
.solo-service-card:before,.solo-tile:before,.solo-need:before,.solo-step:before,.solo-plan:before{content:"";position:absolute;pointer-events:none;inset:0;background:radial-gradient(circle 270px at var(--sg-pointer-x,85%) var(--sg-pointer-y,15%),rgba(214,250,122,.10),transparent 83%);opacity:0;transition:opacity .55s ease}
.solo-service-card:after{content:"↗";position:absolute;right:20px;top:16px;width:35px;height:35px;border:1px solid rgba(214,250,122,.28);display:grid;place-items:center;border-radius:50%;font-size:17px;color:var(--sg-neon);opacity:.82;transition:background .35s,color .35s,transform .35s}
.solo-service-card h3,.solo-need h3,.solo-step h3{position:relative;z-index:1;font-weight:770;letter-spacing:-.034em;max-width:94%}
.solo-service-card p,.solo-need p,.solo-step p{position:relative;z-index:1}
.solo-service-card strong{color:var(--sg-neon);font-variant-numeric:tabular-nums}
.solo-card-number{letter-spacing:.12em;color:#9ac3a5}
.solo-card-link,.solo-inline-link{position:relative;font-weight:730;text-decoration-thickness:1px;text-underline-offset:6px;transition:color .2s}
.solo-service-card:hover,.solo-tile:hover,.solo-need:hover,.solo-step:hover,.solo-plan:hover,.sgcard-article:hover{transform:translate3d(0,-7px,0);border-color:rgba(214,250,122,.53);box-shadow:0 30px 60px rgba(0,0,0,.17),0 0 0 1px rgba(214,250,122,.05),inset 0 1px rgba(237,255,210,.1)}
.solo-service-card:hover:before,.solo-need:hover:before,.solo-plan:hover:before,.solo-step:hover:before{opacity:1}
.solo-service-card:hover:after{background:var(--sg-neon);color:#142018;transform:rotate(45deg)}
.solo-need a{display:inline-flex;gap:12px;align-items:center;text-underline-offset:5px}
.solo-step b{color:var(--sg-neon);font-size:clamp(26px,3vw,34px);line-height:1;font-variant-numeric:tabular-nums}
.solo-outcomes>div{border-color:rgba(214,250,122,.14)}
/* Editorial layout stays calm; only content framing/hover is animated. */
.sgarticle h1,.sghero h1{letter-spacing:-.045em;text-wrap:balance}
.sgarticlecover{overflow:hidden;border-radius:20px;border:1px solid rgba(202,236,203,.15)}
.sgarticlecover img{display:block;border-radius:20px;transition:transform 1.1s var(--sg-ease)}
.sgarticlecover:hover img{transform:scale(1.025)}
.sgcard-article img{transition:transform .7s var(--sg-ease)}.sgcard-article:hover img{transform:scale(1.045)}
.sgprose h2,.prose h2{scroll-margin-top:120px}
.sgprose blockquote,.prose blockquote{background:linear-gradient(110deg,#1a3029,#142426);border-left-color:var(--sg-neon)}
.sgprose a:hover{text-decoration-color:var(--sg-neon)}
/* CTA bands / buttons: luminous edge, without moving the fixed bottom control. */
.solo-contact-band{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#15332b,#102423 65%,#122a2a)}
.solo-contact-band:before{content:"";pointer-events:none;position:absolute;z-index:-1;inset:-50% 30% -50% -10%;background:radial-gradient(ellipse,rgba(214,250,122,.14),transparent 61%);animation:sg-ambient 19s ease-in-out infinite alternate}
.solo-contact-band:after{content:"";position:absolute;right:-90px;bottom:-105px;height:280px;width:280px;pointer-events:none;border:1px solid rgba(214,250,122,.15);border-radius:50%;box-shadow:0 0 0 45px rgba(214,250,122,.015),0 0 0 90px rgba(214,250,122,.01)}
.btn,.solo-btn{position:relative;isolation:isolate;overflow:hidden;transition:background-color .25s,color .25s,transform .3s var(--sg-ease),box-shadow .3s var(--sg-ease),border-color .3s}
.btn:not(.white):not(.dark):not(.outline):hover,.solo-btn-main:hover{box-shadow:0 13px 30px rgba(214,250,122,.15)}
.solo-btn:after,.header .btn:after{content:"";position:absolute;pointer-events:none;top:-100%;left:-50%;width:40%;height:300%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.23),transparent);transform:rotate(24deg) translateX(-320%);transition:transform .7s ease}
.solo-btn:hover:after,.header .btn:hover:after{transform:rotate(24deg) translateX(680%)}
.solo-faq details{border-color:rgba(148,201,171,.25);transition:border-color .3s,background .3s}
.solo-faq details:hover,.solo-faq details[open]{border-color:rgba(214,250,122,.35)}
.solo-faq details[open]>p,.solo-faq details[open]>div{animation:sg-accordion .35s var(--sg-ease) both}
/* Scroll entrance ONLY activates after JS has observed below-fold items. */
.sg-reveal[data-sg-pending="1"]{opacity:0;transform:translate3d(0,23px,0);transition:opacity .8s var(--sg-ease),transform .8s var(--sg-ease);transition-delay:var(--sg-delay,0ms)}
.sg-reveal[data-sg-pending="1"].sg-visible{opacity:1;transform:none}
/* Fixed panel: deliberate equal safe-area margins, no hover translate of the panel. */
.sticky{box-sizing:border-box!important;left:50%!important;right:auto!important;width:min(460px,calc(100% - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))!important;margin:0!important;transform:translateX(-50%)!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:stretch;gap:8px;border:1px solid rgba(206,243,204,.23)}
.sticky>.btn{width:100%;min-width:0;padding-inline:8px;white-space:normal;text-align:center;transform:none!important;line-height:1.25}
.sticky>.btn:hover{transform:none!important}
/* Desktop and touch refinements. */
@media (max-width:1020px){.solo-home-hero{min-height:auto}.solo-hero-grid{gap:36px}.signal-orbit{height:235px}}
@media (max-width:760px){
 .solo-home-hero{padding-block:46px 62px}
 .solo-hero:after{background-size:39px 39px;opacity:.13}
 .solo-home-hero h1{font-size:clamp(38px,10vw,56px);letter-spacing:-.055em}
 .solo-hero h1 em{max-width:100%}
 .sg-hero-meta{gap:10px;font-size:10px}
 .signal-panel{border-radius:22px}
 .signal-orbit{height:215px}
 .solo-section{padding-block:56px}
 .solo-section h2{font-size:clamp(29px,7vw,40px)}
 .solo-service-card,.solo-need,.solo-step,.solo-plan{border-radius:19px}
 .sticky{width:calc(100% - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))!important;bottom:max(10px,env(safe-area-inset-bottom,0px))}
 .sticky>.btn{min-height:46px}
}
@media (max-width:480px){.solo-home-hero h1{font-size:clamp(36px,10.6vw,48px)}.sg-hero-meta .sg-meta-sep{display:none}.sg-hero-meta{row-gap:8px}.signal-orbit{height:198px}.solo-service-card:after{right:17px;top:15px}.solo-service-card h3{padding-right:0}}
@media (hover:none),(pointer:coarse){.solo-service-card:hover,.solo-tile:hover,.solo-need:hover,.solo-step:hover,.solo-plan:hover,.sgcard-article:hover{transform:none}.solo-service-card:hover:before,.solo-step:hover:before,.solo-need:hover:before,.solo-plan:hover:before{opacity:0}.solo-service-card:hover:after{transform:none;background:transparent;color:var(--sg-neon)}}
@media (prefers-reduced-motion:reduce){
 :root{--sg-motion:0}html{scroll-behavior:auto!important}
 .solo-hero:before,.solo-contact-band:before,.signal-panel,.signal-panel:before,.signal-orbit:before,.signal-orbit:after,.sg-radar-sweep,.sg-signal-track span,.signal-orbit strong,.solo-hero .solo-kicker:before,.solo-home-hero h1 em,.solo-home-hero .solo-actions,.solo-home-hero .solo-note,.sg-headline-line,.signal-dot{animation:none!important}
 .sg-headline-line{opacity:1!important;transform:none!important}
 .sg-reveal[data-sg-pending="1"]{opacity:1!important;transform:none!important}
 .solo-service-card,.solo-tile,.solo-need,.solo-step,.solo-method,.solo-plan,.sgcard-article,.sgarticlecover img,.btn,.solo-btn{transition:none!important}
 .solo-service-card:hover,.solo-tile:hover,.solo-need:hover,.solo-step:hover,.solo-plan:hover,.sgcard-article:hover,.sgarticlecover:hover img{transform:none!important}
}
@keyframes sg-ambient{0%{transform:translate3d(-1.5%,0,0) scale(1)}100%{transform:translate3d(2.5%,1.5%,0) scale(1.04)}}
@keyframes sg-ink-shift{0%{background-position:0% 50%}100%{background-position:95% 50%}}
@keyframes sg-beacon{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes sg-headline-in{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes sg-simple-in{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes sg-panel-enter{from{opacity:0;transform:translate3d(0,32px,0) scale(.97)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes sg-panel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes sg-orbit-rotate{to{transform:rotate(360deg)}}
@keyframes sg-orbit-counter{to{transform:rotate(-360deg)}}
@keyframes sg-core-pulse{0%,100%{filter:drop-shadow(0 0 12px rgba(214,250,122,.16))}50%{filter:drop-shadow(0 0 25px rgba(214,250,122,.35))}}
@keyframes sg-track{0%{transform:translateX(-100%)}100%{transform:translateX(480%)}}
@keyframes sg-accordion{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Ads exist only on real article pages; no empty containers are emitted when disabled. */
.sg-ad-slot{position:relative;width:min(100%,850px);margin:30px auto;clear:both;isolation:isolate;overflow:hidden;border:1px solid rgba(155,189,161,.15);border-radius:15px;background:linear-gradient(110deg,#101e20,#142627);text-align:center;box-sizing:border-box;padding:20px 12px 12px}
.sg-ad-slot.sg-ad-inline{max-width:750px;margin:42px auto}.sg-ad-slot.sg-ad-wide{max-width:770px;margin:23px auto}
.sg-ad-label{position:absolute;top:6px;left:12px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#9db1aa}
.sg-ad-slot .sg-ad-frame{display:block;width:100%;margin:auto}.sg-ad-slot img{display:block;width:min(100%,728px);height:auto;aspect-ratio:728/90;object-fit:contain;margin:0 auto;border-radius:5px}
@media(max-width:760px){.sg-ad-slot{margin:24px auto;padding:19px 6px 6px;border-radius:10px}.sg-ad-slot.sg-ad-inline{margin:28px auto}}
/* All public pages receive motion language, without hiding their main content. */
.sgarticle h1,.sgcategory-hero h1,.sghero h1,.solo-hero h1{animation:sg-simple-in .78s var(--sg-ease) both}
.sgarticle .sglead,.sgcategory-hero>p,.sghero>p{animation:sg-simple-in .9s var(--sg-ease) .12s both}
.sgprose h2,.sgprose h3,.prose h2,.solo-section h2{position:relative;text-wrap:balance}
.sgcard-article,.sgcategory-chip,.sgpagination .sgpage{transition:border-color .3s,box-shadow .35s,transform .35s var(--sg-ease),background .3s}
.sgcategory-chip:hover,.sgpagination .sgpage:hover{box-shadow:0 5px 20px rgba(214,250,122,.1);border-color:rgba(214,250,122,.5)}
.sgarticlecover img{transform:translateZ(0)}
@media(prefers-reduced-motion:reduce){.sgarticle h1,.sgcategory-hero h1,.sghero h1,.sgarticle .sglead,.sgcategory-hero>p,.sghero>p{animation:none!important}}

/* RSYA 2026 — reserve space, avoid sticky CTA overlap, preserve feed height. */
.sg-ad-slot.sg-ad-feed{width:min(100%,860px);max-width:860px;margin:36px auto 42px;padding:22px 10px 12px;overflow:visible}
.sg-ad-slot.sg-ad-feed .sg-ad-frame{min-height:340px;overflow:visible}
.sg-ad-slot.sg-ad-wide .sg-ad-frame{min-height:90px}
.sg-ad-slot .sg-ad-label{z-index:1;pointer-events:none}
.sg-ad-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px;margin:16px 0 22px}
.sg-ad-admin input[type=number]{max-width:220px}
@media(max-width:760px){.sg-ad-slot.sg-ad-feed{max-width:100%;padding:22px 6px 8px;margin:25px auto 34px}.sg-ad-slot .sg-ad-frame{max-width:100%}}