:root{--pond-darkest:#081C15;--pond-deep:#1B4332;--forest:#2D6A4F;--moss:#40916C;--stem:#52B788;--duckweed:#74C69D;--lily:#95D5B2;--mist:#D8F3DC;--morning:#F0FFF4;--white:#FFFFFF;--jf-color:#4DB5E5;--nc-color:#0082C9;--im-color:#D4960A;--font-display:'Fredoka One','Arial Rounded MT Bold',cursive;--font-body:'Nunito','Segoe UI',system-ui,sans-serif;--sp-2xs:4px;--sp-xs:8px;--sp-sm:12px;--sp-md:16px;--sp-lg:24px;--sp-xl:40px;--sp-2xl:64px;--r-sm:8px;--r-md:16px;--r-lg:24px;--r-full:9999px;--shadow-sm:0 1px 3px rgba(8,28,21,.08),0 1px 2px rgba(8,28,21,.05);--shadow-md:0 4px 12px rgba(8,28,21,.11),0 2px 4px rgba(8,28,21,.07);--shadow-lg:0 10px 28px rgba(8,28,21,.14),0 4px 10px rgba(8,28,21,.09);--shadow-lift:0 18px 40px rgba(8,28,21,.17),0 6px 14px rgba(8,28,21,.11)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);background-color:var(--morning);color:var(--pond-darkest);line-height:1.65;min-height:100vh;overflow-x:hidden}a{color:inherit;text-decoration:none}ul{list-style:disc;padding-left:var(--sp-lg)}.pond-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}.water-ring{position:absolute;border-radius:50%;border:2px solid rgba(82,183,136,0.14);animation:pondPulse 9s ease-in-out infinite}.ring-1{width:700px;height:700px;top:-200px;right:-250px;animation-delay:0s}.ring-2{width:480px;height:480px;bottom:5%;left:-160px;animation-delay:3s}.ring-3{width:340px;height:340px;bottom:28%;right:8%;animation-delay:6s}@keyframes pondPulse{0%,100%{transform:scale(0.88);opacity:0.55}50%{transform:scale(1.06);opacity:0.25}}.deco-leaf{position:absolute;pointer-events:none;user-select:none;font-size:5rem;opacity:0.055;animation:leafSway 12s ease-in-out infinite}.leaf-1{top:18%;left:3%;transform:rotate(-18deg);animation-delay:0s}.leaf-2{bottom:12%;right:3%;transform:rotate(14deg);font-size:7rem;animation-delay:4s;animation-name:leafSway2}.leaf-3{top:60%;left:1%;transform:rotate(8deg);font-size:4rem;animation-delay:2s}@keyframes leafSway{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(-10deg)}}@keyframes leafSway2{0%,100%{transform:rotate(14deg)}50%{transform:rotate(6deg)}}.site-header,.site-footer,main{position:relative;z-index:1}.site-header{background:linear-gradient(150deg,var(--pond-deep) 0%,var(--forest) 55%,var(--moss) 100%);padding:var(--sp-2xl) var(--sp-xl) calc(var(--sp-2xl) + 30px);text-align:center;overflow:hidden}.site-header::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:58px;background:var(--morning);clip-path:ellipse(55% 100% at 50% 100%)}.site-header::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 120px,rgba(255,255,255,0.015) 120px,rgba(255,255,255,0.015) 240px);pointer-events:none}.header-inner{max-width:740px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--sp-lg)}.frog-wrap{width:190px;height:190px;cursor:pointer;filter:drop-shadow(0 10px 22px rgba(8,28,21,.4));transition:transform .22s ease,filter .22s ease;flex-shrink:0;border-radius:50%;outline:none}.frog-wrap:hover,.frog-wrap:focus-visible{transform:scale(1.07) translateY(-5px);filter:drop-shadow(0 14px 28px rgba(8,28,21,.5))}.frog-wrap:focus-visible{outline:3px solid var(--duckweed);outline-offset:6px}.frog-svg{width:100%;height:100%}@keyframes frogJump{0%{transform:scale(1,1) translateY(0)}18%{transform:scale(1.06,.94) translateY(0)}42%{transform:scale(.94,1.06) translateY(-22px)}68%{transform:scale(1.03,.97) translateY(-6px)}84%{transform:scale(.98,1.02) translateY(0)}100%{transform:scale(1,1) translateY(0)}}.frog-wrap.jumping{animation:frogJump .52s cubic-bezier(.4,0,.2,1) forwards}@keyframes ribbitPop{0%{transform:translate(-50%,-50%) scale(0.4);opacity:0}30%{transform:translate(-50%,-70%) scale(1.15);opacity:1}70%{transform:translate(-50%,-90%) scale(1);opacity:0.9}100%{transform:translate(-50%,-120%) scale(0.9);opacity:0}}.ribbit-bubble{position:fixed;z-index:9000;pointer-events:none;font-family:var(--font-display);font-size:1.7rem;color:var(--stem);text-shadow:0 2px 8px rgba(8,28,21,.2);animation:ribbitPop 1.1s ease forwards}.header-text h1{font-family:var(--font-display);font-size:clamp(2.8rem,7vw,4.8rem);color:var(--white);letter-spacing:.03em;line-height:1.05;text-shadow:0 3px 14px rgba(8,28,21,.35)}.tagline{font-size:1.15rem;color:var(--lily);font-weight:600;margin-top:var(--sp-xs)}.tagline-sub{font-size:.95rem;color:var(--duckweed);margin-top:var(--sp-2xs)}main{max-width:920px;margin:0 auto;padding:0 var(--sp-lg) var(--sp-2xl)}.section-title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.05rem);color:var(--forest);text-align:center;margin-bottom:var(--sp-xs)}.section-sub{text-align:center;color:var(--moss);font-size:.92rem;margin-bottom:var(--sp-xl)}.services-section{margin-top:var(--sp-2xl)}.services-section .section-title{margin-bottom:var(--sp-xl)}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-md)}.service-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--white);border-radius:var(--r-lg);padding:var(--sp-xl) var(--sp-lg) var(--sp-lg);box-shadow:var(--shadow-md);border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.service-card:hover,.service-card:focus-visible{transform:translateY(-7px);box-shadow:var(--shadow-lift)}.service-card:focus-visible{outline:3px solid var(--forest);outline-offset:3px}#card-jellyfin:hover,#card-jellyfin:focus-visible{border-color:var(--jf-color)}#card-nextcloud:hover,#card-nextcloud:focus-visible{border-color:var(--nc-color)}#card-immich:hover,#card-immich:focus-visible{border-color:var(--im-color)}.card-icon-wrap{width:76px;height:76px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-md);transition:transform .2s ease}.service-card:hover .card-icon-wrap{transform:scale(1.08)}.jellyfin-ic{background:rgba(77,181,229,0.11);color:var(--jf-color)}.nextcloud-ic{background:rgba(0,130,201,0.10);color:var(--nc-color)}.immich-ic{background:rgba(212,150,10,0.12);color:var(--im-color)}.card-icon{width:46px;height:46px;flex-shrink:0}.card-body h3{font-family:var(--font-display);font-size:1.45rem;color:var(--pond-deep);line-height:1.15}.card-body p{font-size:.87rem;color:var(--moss);margin-top:var(--sp-2xs)}.card-arrow{margin-top:var(--sp-md);color:var(--stem);width:22px;height:22px;transition:transform .2s ease,color .2s ease}.card-arrow svg{width:100%;height:100%}.service-card:hover .card-arrow{transform:translateX(5px);color:var(--moss)}.ripple-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:var(--r-lg)}.ripple-wave{position:absolute;border-radius:50%;transform:scale(0);background:rgba(82,183,136,0.22);animation:pondRippleClick .72s ease-out forwards;pointer-events:none}@keyframes pondRippleClick{to{transform:scale(5);opacity:0}}.wrong-pond-section{margin:var(--sp-xl) 0}.wrong-pond-card{background:linear-gradient(135deg,var(--mist) 0%,#e5f7ed 100%);border:1.5px solid var(--lily);border-radius:var(--r-lg);padding:var(--sp-lg) var(--sp-xl);display:flex;align-items:center;gap:var(--sp-lg);flex-wrap:wrap}.wrong-pond-emoji{font-size:2.1rem;flex-shrink:0;line-height:1}.wrong-pond-text{flex:1;min-width:180px}.wrong-pond-heading{font-family:var(--font-display);font-size:1.15rem;color:var(--forest);line-height:1.3}.wrong-pond-sub{font-size:.86rem;color:var(--moss);margin-top:var(--sp-2xs)}.portfolio-btn{display:inline-block;background:var(--forest);color:var(--white);padding:10px 22px;border-radius:var(--r-full);font-weight:700;font-size:.9rem;white-space:nowrap;flex-shrink:0;transition:background .2s ease,transform .15s ease}.portfolio-btn:hover{background:var(--pond-deep);transform:translateY(-2px)}.portfolio-btn:focus-visible{outline:3px solid var(--moss);outline-offset:3px}.faq-section{margin:var(--sp-xl) 0 0}.faq-list{display:flex;flex-direction:column;gap:var(--sp-xl)}.faq-group{display:flex;flex-direction:column;gap:var(--sp-xs)}.faq-group-label{font-family:var(--font-display);font-size:1rem;color:var(--forest);letter-spacing:.05em;padding-bottom:var(--sp-xs);border-bottom:2px solid var(--mist);margin-bottom:var(--sp-xs)}.jellyfin-lbl{color:#2D8BB8}.nextcloud-lbl{color:#0062a0}.immich-lbl{color:#9a6e07}.faq-item{background:var(--white);border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden;border:1.5px solid transparent;transition:border-color .2s ease,box-shadow .2s ease}.faq-item:has(.faq-question[aria-expanded="true"]){border-color:var(--lily);box-shadow:var(--shadow-md)}.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);padding:var(--sp-md) var(--sp-lg);background:transparent;border:none;cursor:pointer;text-align:left;font-family:var(--font-body);font-size:.96rem;font-weight:700;color:var(--pond-deep);transition:background .15s ease;line-height:1.4}.faq-question:hover{background:var(--morning)}.faq-question:focus-visible{outline:3px solid var(--moss);outline-offset:-3px;border-radius:var(--r-sm)}.faq-question span{flex:1}.faq-chevron{width:20px;height:20px;flex-shrink:0;color:var(--stem);transition:transform .32s cubic-bezier(.4,0,.2,1)}.faq-question[aria-expanded="true"] .faq-chevron{transform:rotate(180deg)}.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1)}.faq-answer.open{grid-template-rows:1fr}.faq-answer-inner{overflow:hidden;padding:0 var(--sp-lg) 0;transition:padding .35s cubic-bezier(.4,0,.2,1)}.faq-answer.open .faq-answer-inner{padding-bottom:var(--sp-lg)}.faq-answer-inner p{font-size:.91rem;color:var(--forest);line-height:1.7}.faq-answer-inner p+p{margin-top:var(--sp-sm)}.faq-answer-inner ul{margin-top:var(--sp-sm);display:flex;flex-direction:column;gap:var(--sp-2xs)}.faq-answer-inner li{font-size:.91rem;color:var(--forest);line-height:1.6}.faq-answer-inner li::marker{color:var(--stem)}.faq-answer-inner strong{color:var(--pond-deep);font-weight:700}.faq-answer-inner code{font-family:'Courier New',Courier,monospace;background:var(--mist);color:var(--forest);padding:1px 6px;border-radius:5px;font-size:.86em}.site-footer{background:var(--pond-deep);color:var(--lily);padding:var(--sp-xl) var(--sp-lg);text-align:center}.footer-inner{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2xs)}.footer-frog{font-size:1.6rem;display:block;margin-bottom:var(--sp-xs)}.footer-inner p{font-size:.9rem;font-weight:600}.footer-tech{font-size:.78rem;color:var(--duckweed);font-weight:400!important}@media(min-width:640px){.header-inner{flex-direction:row;text-align:left;gap:var(--sp-2xl);padding:0 var(--sp-xl)}.header-text h1{font-size:clamp(2.4rem,5vw,4.2rem)}}@media(max-width:639px){.site-header{padding:var(--sp-xl) var(--sp-md) calc(var(--sp-xl) + 30px)}main{padding:0 var(--sp-md) var(--sp-xl)}.services-section{margin-top:var(--sp-xl)}.card-grid{grid-template-columns:1fr}.wrong-pond-card{flex-direction:column;text-align:center;padding:var(--sp-lg)}.faq-question{padding:var(--sp-sm) var(--sp-md)}.faq-answer-inner{padding:0 var(--sp-md) 0}.faq-answer.open .faq-answer-inner{padding-bottom:var(--sp-md)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(forced-colors:active){.service-card{border:2px solid ButtonText}.portfolio-btn{forced-color-adjust:none;background:ButtonFace;color:ButtonText;border:2px solid ButtonText}}
