:root{--navy:#062c46;--deep:#053d62;--blue:#0879b6;--aqua:#20d1c1;--coral:#ff735f;--yellow:#ffd45c;--ink:#12334c;--muted:#557184;--white:#fff;--paper:#f6fbfd;--shadow:0 20px 50px rgba(4,48,76,.14);--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);line-height:1.65}img,canvas{max-width:100%}a{color:inherit}.container{width:min(1120px,calc(100% - 32px));margin:auto}.skip-link{position:fixed;left:12px;top:-100px;z-index:100;background:#fff;padding:10px 14px;border-radius:10px}.skip-link:focus{top:12px}.site-header{position:sticky;top:0;z-index:40;background:rgba(5,44,70,.94);backdrop-filter:blur(14px);color:#fff}.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}.logo{font-weight:900;text-decoration:none;letter-spacing:-.03em;font-size:1.2rem}.logo span{color:var(--yellow)}.nav-links{display:flex;align-items:center;gap:20px}.nav-links a{text-decoration:none;font-weight:700;font-size:.92rem}.nav-links a:hover{color:var(--yellow)}.menu-toggle{display:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:10px;padding:8px 12px;font:inherit}.hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 80% 18%,rgba(32,209,193,.35),transparent 28%),linear-gradient(155deg,#07324f 10%,#086b9d 58%,#15b6b2);padding:86px 0 76px}.hero:after{content:"";position:absolute;inset:auto 0 0;height:70px;background:linear-gradient(170deg,transparent 49%,var(--paper) 50%)}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:50px}.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:800;font-size:.84rem}.hero h1{font-size:clamp(2.5rem,5.5vw,5rem);line-height:1.02;letter-spacing:-.055em;margin:18px 0}.hero p{font-size:1.16rem;max-width:650px;color:#defaff}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 20px;border:0;border-radius:14px;font:800 1rem/1 inherit;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn:focus-visible,.menu-toggle:focus-visible,.game-icon:focus-visible,.faq summary:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}.btn-primary{background:var(--yellow);color:#17364b;box-shadow:0 10px 28px rgba(255,212,92,.28)}.btn-secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.42)}.hero-art{position:relative;min-height:410px;border-radius:48% 52% 42% 58%;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,62,98,.08));border:1px solid rgba(255,255,255,.25);box-shadow:inset 0 0 60px rgba(255,255,255,.08)}.hero-art .sun{position:absolute;width:110px;height:110px;border-radius:50%;background:var(--yellow);top:40px;right:55px;box-shadow:0 0 60px rgba(255,212,92,.45)}.hero-art .boat{position:absolute;left:18%;top:38%;width:62%;height:55px;background:var(--coral);border-radius:8px 8px 55% 55%;transform:rotate(-3deg)}.hero-art .person{position:absolute;left:44%;top:20%;width:72px;height:100px;background:#f8cb77;border-radius:50% 50% 18px 18px;border-top:25px solid #9a5b32}.hero-art .rod{position:absolute;left:53%;top:27%;width:180px;height:3px;background:#d9f7f4;transform:rotate(18deg);transform-origin:left}.hero-art .line{position:absolute;right:13%;top:36%;width:1px;height:175px;background:#d9f7f4}.hero-art .fish-shape{position:absolute;width:80px;height:42px;border-radius:52% 45% 45% 52%;background:var(--yellow);right:18%;bottom:18%;animation:swim 3s ease-in-out infinite}.hero-art .fish-shape:after{content:"";position:absolute;left:-24px;top:7px;border-right:28px solid var(--yellow);border-top:14px solid transparent;border-bottom:14px solid transparent}.bubble{position:absolute;border:2px solid rgba(255,255,255,.5);border-radius:50%;animation:rise 4s infinite}.b1{width:16px;height:16px;left:15%;bottom:15%}.b2{width:28px;height:28px;right:12%;bottom:8%;animation-delay:1s}.b3{width:10px;height:10px;left:70%;bottom:25%;animation-delay:2s}@keyframes rise{50%{transform:translateY(-45px);opacity:.4}}@keyframes swim{50%{transform:translateX(-30px) rotate(-4deg)}}.section{padding:82px 0}.section-head{max-width:720px;margin:0 auto 34px;text-align:center}.section-head h2,.content-page h1{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.045em;line-height:1.1;margin:0 0 14px}.section-head p{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid #dcecf2;border-radius:var(--radius);padding:26px;box-shadow:0 10px 30px rgba(4,48,76,.06)}.card-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#e3fbf8;font-size:1.4rem}.card h3{margin:14px 0 6px}.card p{margin:0;color:var(--muted)}.game-section{background:#e8f7fa}.game-shell{background:var(--navy);border-radius:30px;padding:18px;box-shadow:var(--shadow);color:#fff}.game-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.stat-group{display:flex;gap:10px;flex-wrap:wrap}.stat{min-width:105px;background:rgba(255,255,255,.1);padding:7px 13px;border-radius:12px}.stat small{display:block;color:#aee9ee}.stat strong{font-size:1.2rem}.game-actions{display:flex;gap:8px}.game-icon{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;border-radius:11px;padding:9px 12px;cursor:pointer;font:700 .9rem inherit}.canvas-wrap{position:relative;overflow:hidden;border-radius:20px;background:#0879b6;aspect-ratio:16/9;min-height:280px}.canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:manipulation}.game-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:rgba(3,35,58,.7);padding:20px;backdrop-filter:blur(5px)}.game-overlay[hidden]{display:none}.overlay-card{max-width:470px}.overlay-card h3{font-size:clamp(1.8rem,5vw,3.2rem);margin:0 0 10px}.overlay-card p{color:#d6f5f7}.touch-controls{display:flex;justify-content:center;margin-top:14px}.touch-controls .btn{min-width:min(100%,320px)}.game-note{text-align:center;color:#b9e5e8;font-size:.88rem;margin:12px 0 0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step}.step{position:relative;padding:24px 22px 22px 68px;background:#fff;border-radius:18px;border:1px solid #dcecf2}.step:before{counter-increment:step;content:counter(step);position:absolute;left:18px;top:20px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--coral);color:#fff;font-weight:900}.step h3{margin:0 0 5px;font-size:1rem}.step p{margin:0;color:var(--muted);font-size:.94rem}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:start}.prose{background:#fff;border-radius:var(--radius);padding:32px;border:1px solid #dcecf2}.prose p:first-child{margin-top:0}.tips{display:grid;gap:12px}.tip{display:flex;gap:14px;background:#fff;padding:18px;border-radius:16px;border:1px solid #dcecf2}.tip strong{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--yellow)}.faq-list{max-width:820px;margin:auto;display:grid;gap:12px}.faq{background:#fff;border:1px solid #dcecf2;border-radius:16px;overflow:hidden}.faq summary{cursor:pointer;font-weight:850;padding:19px 52px 19px 20px;position:relative}.faq summary:after{content:"+";position:absolute;right:20px;font-size:1.5rem;top:12px}.faq[open] summary:after{content:"−"}.faq p{margin:0;padding:0 20px 20px;color:var(--muted)}.cta-band{background:linear-gradient(135deg,var(--deep),var(--blue));color:#fff;border-radius:28px;padding:44px;text-align:center}.site-footer{background:#052b44;color:#d6ecf2;padding:54px 0 26px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px}.site-footer h2,.site-footer h3{color:#fff}.footer-links{display:grid;gap:8px}.footer-links a{color:#d6ecf2;text-decoration:none}.footer-links a:hover{color:var(--yellow)}.fineprint{border-top:1px solid rgba(255,255,255,.13);margin-top:36px;padding-top:20px;font-size:.86rem;color:#9fc3cf}.content-hero{background:linear-gradient(135deg,#063553,#087aa8);color:#fff;padding:68px 0}.content-page{padding:58px 0}.content-page article{max-width:850px;margin:auto;background:#fff;padding:clamp(24px,5vw,54px);border-radius:24px;border:1px solid #dcecf2}.notice{background:#fff8dd;border-left:4px solid var(--yellow);padding:16px 18px;border-radius:10px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.placeholder{font-family:ui-monospace,monospace;background:#eef4f6;padding:2px 6px;border-radius:5px}.muted{color:var(--muted)}
@media(max-width:820px){.hero-grid,.split,.footer-grid{grid-template-columns:1fr}.hero-art{min-height:320px}.cards,.steps{grid-template-columns:1fr 1fr}.nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:#07324f;padding:18px 16px;flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.menu-toggle{display:block}.game-toolbar{align-items:flex-start;flex-direction:column}.game-actions{align-self:stretch}.game-icon{flex:1}.contact-grid{grid-template-columns:1fr}}
@media(max-width:540px){.hero{padding-top:54px}.hero h1{font-size:2.65rem}.hero-art{min-height:270px}.cards,.steps{grid-template-columns:1fr}.section{padding:60px 0}.game-shell{padding:10px;border-radius:20px}.canvas-wrap{min-height:360px;aspect-ratio:4/5}.stat{min-width:82px}.cta-band{padding:30px 20px}.content-page article{padding:24px}.actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}
.hero-art{border-radius:42px;overflow:hidden;border:1px solid rgba(255,255,255,.3);box-shadow:0 28px 70px rgba(2,30,50,.35);transform:rotate(1.5deg);background:none}.hero-art img{display:block;width:100%;height:100%;min-height:410px;object-fit:cover}.hero-art:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 50px rgba(4,35,60,.15);pointer-events:none}