{"id":1909,"date":"2026-07-21T01:38:49","date_gmt":"2026-07-21T05:38:49","guid":{"rendered":"https:\/\/amir.farm\/blue-guard\/"},"modified":"2026-07-22T00:28:21","modified_gmt":"2026-07-22T04:28:21","slug":"blue-guard","status":"publish","type":"page","link":"https:\/\/amir.farm\/fa\/blue-guard\/","title":{"rendered":"\u0628\u0644\u0648 \u06af\u0627\u0631\u062f (\u0631\u0628\u0627\u062a \u0622\u0628\u0632\u06cc \u067e\u0631\u0648\u0631\u06cc)"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\r\n\r\n\r\n\r\n\r\n\u0628\u0644\u0648\u06af\u0627\u0631\u062f \u2014 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0632\u06cc\u0631\u0622\u0628\u06cc<\/title>\r\n<style>\r\n@font-face {\r\n font-family: 'Yekan';\r\n src: url('\/wp-content\/themes\/hello-elementor\/font\/Yekan.woff2') format('woff2'),\r\n url('\/wp-content\/themes\/hello-elementor\/font\/Yekan.woff') format('woff');\r\n font-weight: normal;\r\n font-style: normal;\r\n font-display: swap;\r\n}\r\n<\/style>\r\n<style>\r\n :root{\r\n --bg:#020B12;\r\n --primary:#00E5FF;\r\n --primary-dim:#0b93a3;\r\n --deep:#005DFF;\r\n --accent:#00FF96;\r\n --warn:#FFC24B;\r\n --danger:#FF7A45;\r\n --text:#FFFFFF;\r\n --muted:#7c99a8;\r\n --glass-border:rgba(0,229,255,0.16);\r\n --card:rgba(255,255,255,0.025);\r\n --display:'Yekan', Tahoma, sans-serif;\r\n --body:'Yekan', Tahoma, sans-serif;\r\n --mono:'Yekan', Tahoma, sans-serif;\r\n }\r\n *{margin:0;padding:0;box-sizing:border-box;}\r\n html{scroll-behavior:smooth;}\r\n body{background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden;position:relative;\r\n direction:rtl;text-align:right;font-synthesis:none;-webkit-font-smoothing:antialiased;}\r\n h1,h2,h3,h4,h5,h6{font-family:'Yekan', Tahoma, sans-serif !important;}\r\n ::selection{background:var(--primary);color:#000;}\r\n ::-webkit-scrollbar{width:8px;}\r\n ::-webkit-scrollbar-track{background:var(--bg);}\r\n ::-webkit-scrollbar-thumb{background:rgba(0,229,255,0.3);border-radius:4px;}\r\n\r\n #ocean-bg{position:fixed;inset:0;z-index:0;pointer-events:none;}\r\n .noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.03;\r\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");}\r\n .cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:2;\r\n background:radial-gradient(circle, rgba(0,229,255,0.07) 0%, rgba(0,229,255,0) 70%);\r\n transform:translate(-50%,-50%);left:-9999px;top:-9999px;}\r\n\r\n section{position:relative;z-index:3;}\r\n .container{max-width:1320px;margin:0 auto;padding:0 5vw;}\r\n .py{padding:150px 0;}\r\n .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);\r\n box-shadow:0 0 12px var(--accent), 0 0 24px var(--accent);animation:pulse-dot 2.4s ease-in-out infinite;}\r\n @keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(0.7);}}\r\n\r\n .btn-primary{font-family:var(--body);background:var(--primary);color:#000;border:none;padding:11px 22px;\r\n border-radius:100px;font-weight:600;font-size:0.82rem;cursor:pointer;\r\n transition:transform .3s cubic-bezier(.19,1,.22,1), box-shadow .3s ease;}\r\n .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,229,255,0.4);}\r\n .btn-ghost{font-family:var(--body);background:transparent;color:var(--text);border:1px solid rgba(255,255,255,0.15);\r\n padding:11px 22px;border-radius:100px;font-weight:500;font-size:0.82rem;cursor:pointer;transition:all .3s ease;\r\n display:inline-flex;align-items:center;gap:8px;}\r\n .btn-ghost:hover{border-color:var(--primary);background:rgba(0,229,255,0.07);}\r\n .btn-mini{font-family:var(--mono);background:rgba(0,229,255,0.08);color:var(--primary);border:1px solid var(--glass-border);\r\n padding:7px 15px;border-radius:100px;font-size:0.68rem;font-weight:600;cursor:pointer;transition:all .3s ease;}\r\n .btn-mini:hover, .btn-mini.active{background:var(--primary);color:#000;}\r\n\r\n .reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1);}\r\n .reveal.in{opacity:1;transform:translateY(0);}\r\n\r\n .section-head{text-align:center;max-width:660px;margin:0 auto 64px;}\r\n .section-eyebrow{font-family:var(--mono);font-size:0.78rem;color:var(--primary);margin-bottom:16px;}\r\n .section-head h2{font-family:var(--display);font-weight:600;font-size:clamp(2rem, 3.6vw, 3rem);line-height:1.15;margin-bottom:16px;}\r\n .section-head p{color:var(--muted);font-size:1rem;line-height:1.7;font-weight:300;}\r\n\r\n \/* ---------- hero ---------- *\/\r\n .hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 5vw;position:relative;overflow:hidden;text-align:center;}\r\n .hero-stage{position:relative;width:100%;max-width:900px;height:420px;margin-bottom:20px;}\r\n #sub-canvas{width:100%;height:100%;}\r\n .hero h1{font-family:var(--display);font-weight:700;font-size:clamp(3rem, 8vw, 6rem);letter-spacing:0.08em;\r\n color:var(--primary);text-shadow:0 0 50px rgba(0,229,255,0.5);margin-bottom:10px;}\r\n .hero-tagline{font-family:var(--mono);font-size:1rem;color:var(--text);opacity:0.85;margin-bottom:30px;}\r\n .hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}\r\n\r\n \/* ---------- stats ---------- *\/\r\n .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}\r\n .stat-card{background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:20px 18px;\r\n transition:transform .4s cubic-bezier(.19,1,.22,1), border-color .4s ease;}\r\n .stat-card:hover{transform:translateY(-4px);border-color:rgba(0,229,255,0.3);}\r\n .stat-label{font-family:var(--mono);font-size:0.75rem;color:var(--muted);margin-bottom:10px;}\r\n .stat-value{font-family:var(--display);font-size:1.5rem;font-weight:600;}\r\n .stat-value .unit{font-size:0.8rem;color:var(--primary);margin-left:4px;}\r\n\r\n \/* ---------- digital twin ---------- *\/\r\n .twin-stage{position:relative;height:460px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);}\r\n #twin-canvas{width:100%;height:100%;}\r\n .twin-tabs{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap;}\r\n\r\n \/* ---------- fish scan HUD ---------- *\/\r\n .scan-panel{position:relative;max-width:640px;margin:0 auto;height:380px;border-radius:20px;overflow:hidden;border:1px solid var(--glass-border);background:#010609;}\r\n #scan-canvas{width:100%;height:100%;}\r\n .hud-box{position:absolute;top:16px;right:16px;background:rgba(2,11,18,0.75);border:1px solid var(--glass-border);border-radius:12px;\r\n padding:16px 18px;font-family:var(--mono);font-size:0.76rem;min-width:180px;}\r\n .hud-row{display:flex;justify-content:space-between;padding:4px 0;color:var(--text);}\r\n .hud-row span:first-child{color:var(--muted);}\r\n .hud-row span:last-child{color:var(--primary);}\r\n\r\n \/* ---------- water intelligence ---------- *\/\r\n .water-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}\r\n .crystal-card{background:linear-gradient(160deg, rgba(0,229,255,0.08), rgba(0,93,255,0.02));\r\n border:1px solid var(--glass-border);border-radius:14px;padding:22px 18px;text-align:center;transition:all .35s ease;}\r\n .crystal-card:hover{transform:translateY(-4px);border-color:var(--primary);}\r\n .crystal-card .l{font-family:var(--mono);font-size:0.7rem;color:var(--muted);margin-bottom:10px;}\r\n .crystal-card .v{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--primary);}\r\n\r\n \/* ---------- threat detection ---------- *\/\r\n .threat-panel{max-width:760px;margin:0 auto;border:1px solid var(--glass-border);border-radius:20px;overflow:hidden;background:#010609;}\r\n .threat-visual{height:260px;position:relative;}\r\n #threat-canvas{width:100%;height:100%;}\r\n .threat-status{text-align:center;font-family:var(--mono);font-size:0.85rem;padding:20px;border-top:1px solid rgba(255,255,255,0.06);}\r\n .threat-controls{text-align:center;padding-bottom:24px;}\r\n\r\n \/* ---------- robot fleet ---------- *\/\r\n .fleet-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}\r\n .fleet-card{background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:26px 16px;text-align:center;\r\n transition:all .35s ease;}\r\n .fleet-card:hover{border-color:var(--primary);transform:translateY(-5px);background:rgba(0,229,255,0.04);}\r\n .fleet-icon{width:40px;height:40px;margin:0 auto 14px;color:var(--primary);filter:drop-shadow(0 0 8px rgba(0,229,255,0.4));}\r\n .fleet-icon svg{width:100%;height:100%;}\r\n .fleet-card h5{font-family:var(--display);font-size:0.82rem;font-weight:600;}\r\n\r\n \/* ---------- fish counter ---------- *\/\r\n .counter-stage{position:relative;height:380px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);margin-bottom:24px;}\r\n #counter-canvas{width:100%;height:100%;}\r\n\r\n \/* ---------- disease detection ---------- *\/\r\n .disease-panel{max-width:560px;margin:0 auto;border:1px solid var(--glass-border);border-radius:20px;overflow:hidden;background:#010609;}\r\n .disease-visual{height:280px;position:relative;}\r\n #disease-canvas{width:100%;height:100%;}\r\n .disease-info{padding:20px;display:flex;justify-content:space-around;border-top:1px solid rgba(255,255,255,0.06);}\r\n .disease-info div{text-align:center;}\r\n .disease-info .l{font-family:var(--mono);font-size:0.66rem;color:var(--muted);}\r\n .disease-info .v{font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--primary);margin-top:4px;}\r\n\r\n \/* ---------- network ---------- *\/\r\n .network-svg{width:100%;max-width:820px;height:auto;display:block;margin:0 auto;}\r\n .net-node{fill:var(--card);stroke:rgba(255,255,255,0.15);stroke-width:1;}\r\n .net-node.center{stroke:var(--primary);fill:rgba(0,229,255,0.07);}\r\n .net-label{font-family:var(--mono);font-size:10px;fill:var(--text);text-anchor:middle;}\r\n .net-line{stroke:rgba(0,229,255,0.25);stroke-width:1;fill:none;stroke-dasharray:5 5;animation:dash 4s linear infinite;}\r\n @keyframes dash{to{stroke-dashoffset:-100;}}\r\n\r\n \/* ---------- terminal ---------- *\/\r\n .terminal{max-width:760px;margin:0 auto;background:#010609;border:1px solid var(--glass-border);border-radius:14px;\r\n overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.5);}\r\n .terminal-bar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);}\r\n .tdot{width:10px;height:10px;border-radius:50%;}\r\n .terminal-body{font-family:var(--mono);font-size:0.86rem;padding:26px;min-height:240px;line-height:1.9;color:var(--primary);}\r\n .terminal-body .ok{color:var(--accent);}\r\n\r\n \/* ---------- footer ---------- *\/\r\n .footer-stage{position:relative;height:320px;border-radius:24px;overflow:hidden;border:1px solid var(--glass-border);\r\n display:flex;align-items:flex-end;justify-content:center;padding-bottom:30px;}\r\n #footer-canvas{position:absolute;inset:0;width:100%;height:100%;}\r\n .footer-content{position:relative;z-index:2;text-align:center;}\r\n .footer-content .brand{font-family:var(--display);font-size:1.1rem;letter-spacing:0.2em;color:var(--primary);opacity:0.7;}\r\n\r\n \/* ---------- palette \/ tech chips ---------- *\/\r\n .chip-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}\r\n .chip{font-family:var(--mono);font-size:0.78rem;color:var(--text);border:1px solid rgba(255,255,255,0.1);\r\n padding:9px 18px;border-radius:100px;background:var(--card);transition:all .3s ease;}\r\n .chip:hover{border-color:var(--primary);color:var(--primary);}\r\n\r\n @media (max-width:980px){\r\n .stat-grid{grid-template-columns:repeat(2,1fr);}\r\n .water-grid{grid-template-columns:repeat(2,1fr);}\r\n .fleet-grid{grid-template-columns:repeat(3,1fr);}\r\n .hud-box{position:static;margin:16px auto 0;max-width:280px;}\r\n }\r\n @media (max-width:600px){\r\n .stat-grid{grid-template-columns:1fr 1fr;}\r\n .water-grid{grid-template-columns:1fr 1fr;}\r\n .fleet-grid{grid-template-columns:1fr 1fr;}\r\n .py{padding:100px 0;}\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<canvas id=\"ocean-bg\"><\/canvas>\r\n<div class=\"noise\"><\/div>\r\n<div class=\"cursor-glow\" id=\"cursorGlow\"><\/div>\r\n\r\n<!-- HERO -->\r\n<section class=\"hero\" id=\"top\">\r\n <div class=\"hero-stage\"><canvas id=\"sub-canvas\"><\/canvas><\/div>\r\n <h1>BLUE GUARD<\/h1>\r\n <div class=\"hero-tagline\">\u0622\u06cc\u0646\u062f\u0647 \u0622\u0628\u0632\u06cc\u200c\u067e\u0631\u0648\u0631\u06cc \u0647\u0648\u0634\u0645\u0646\u062f<\/div>\r\n <div class=\"hero-cta\">\r\n <button class=\"btn-primary\" onclick=\"document.getElementById('twin').scrollIntoView({behavior:'smooth'})\">\u06a9\u0627\u0648\u0634 \u062f\u0631 \u0645\u0623\u0645\u0648\u0631\u06cc\u062a<\/button>\r\n <button class=\"btn-ghost\" onclick=\"document.getElementById('scan').scrollIntoView({behavior:'smooth'})\">\u25b6 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u06a9\u0646 \u0632\u0646\u062f\u0647<\/button>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- LIVE OCEAN DIGITAL TWIN -->\r\n<section class=\"py\" id=\"twin\" style=\"background:rgba(255,255,255,0.012);\">\r\n <div class=\"container\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"section-eyebrow\">\u062f\u0648\u0642\u0644\u0648\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0632\u0646\u062f\u0647 \u0627\u0642\u06cc\u0627\u0646\u0648\u0633<\/div>\r\n <h2>\u06cc\u06a9 \u0639\u06a9\u0633 \u0646\u06cc\u0633\u062a. \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u0632\u0646\u062f\u0647\u200c\u0633\u062a.<\/h2>\r\n <p>\u06cc\u06a9 \u0627\u0633\u062a\u062e\u0631\u060c \u06cc\u06a9 \u0642\u0641\u0633 \u062f\u0631\u06cc\u0627\u06cc\u06cc\u060c \u06cc\u06a9 \u062f\u0631\u06cc\u0627\u0686\u0647 \u2014 \u0647\u0632\u0627\u0631\u0627\u0646 \u0645\u0627\u0647\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0634\u0646\u0627\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 BLUE GUARD \u0628\u06cc\u0646\u0634\u0648\u0646 \u062d\u0631\u06a9\u062a \u0645\u06cc\u200c\u06a9\u0646\u0647\u060c \u0632\u0646\u062f\u0647.<\/p>\r\n <\/div>\r\n <div class=\"twin-stage reveal\"><canvas id=\"twin-canvas\"><\/canvas><\/div>\r\n <div class=\"twin-tabs reveal\" id=\"twinTabs\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- AI FISH SCAN -->\r\n<section class=\"py\" id=\"scan\">\r\n <div class=\"container\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"section-eyebrow\">\u0627\u0633\u06a9\u0646 \u0647\u0648\u0634\u0645\u0646\u062f \u0645\u0627\u0647\u06cc<\/div>\r\n <h2>\u0647\u0631 \u0645\u0627\u0647\u06cc\u060c \u062f\u0631 \u06cc\u06a9 \u0644\u062d\u0638\u0647 \u062e\u0648\u0646\u062f\u0647 \u0645\u06cc\u200c\u0634\u0647<\/h2>\r\n <\/div>\r\n <div class=\"scan-panel reveal\">\r\n <canvas id=\"scan-canvas\"><\/canvas>\r\n <div class=\"hud-box\">\r\n <div class=\"hud-row\"><span>\u06af\u0648\u0646\u0647<\/span><span>\u0642\u0632\u0644\u200c\u0622\u0644\u0627\u06cc \u0631\u0646\u06af\u06cc\u0646\u200c\u06a9\u0645\u0627\u0646<\/span><\/div>\r\n <div class=\"hud-row\"><span>\u0633\u0644\u0627\u0645\u062a<\/span><span>98%<\/span><\/div>\r\n <div class=\"hud-row\"><span>\u0648\u0632\u0646<\/span><span>2.84 kg<\/span><\/div>\r\n <div class=\"hud-row\"><span>\u0631\u06cc\u0633\u06a9 \u0628\u06cc\u0645\u0627\u0631\u06cc<\/span><span>1%<\/span><\/div>\r\n <div class=\"hud-row\"><span>\u0633\u0637\u062d \u0627\u0633\u062a\u0631\u0633<\/span><span>\u067e\u0627\u06cc\u06cc\u0646<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- WATER INTELLIGENCE -->\r\n<section class=\"py\" id=\"water\" style=\"background:rgba(255,255,255,0.012);\">\r\n <div class=\"container\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"section-eyebrow\">\u0647\u0648\u0634 \u0622\u0628<\/div>\r\n <h2>\u062e\u0648\u062f \u0622\u0628\u060c \u0642\u0627\u0628\u0644\u200c\u062e\u0648\u0627\u0646\u062f\u0646 \u0634\u062f\u0647<\/h2>\r\n <\/div>\r\n <div class=\"water-grid reveal\" id=\"waterGrid\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- AI THREAT DETECTION -->\r\n<section class=\"py\" id=\"threat\">\r\n <div class=\"container\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"section-eyebrow\">\u062a\u0634\u062e\u06cc\u0635 \u0647\u0648\u0634\u0645\u0646\u062f \u062a\u0647\u062f\u06cc\u062f<\/div>\r\n <h2>\u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 \u0645\u0634\u06a9\u0644\u060c \u0642\u0628\u0644 \u0627\u0632 \u06af\u0633\u062a\u0631\u0634\u0634<\/h2>\r\n <\/div>\r\n <div class=\"threat-panel reveal\">\r\n <div class=\"threat-visual\"><canvas id=\"threat-canvas\"><\/canvas><\/div>\r\n <div class=\"threat-status\" id=\"threatStatus\">\u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u062f\u06cc \u2014 \u0647\u0645\u0647 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0646\u0631\u0645\u0627\u0644 \u0647\u0633\u062a\u0646.<\/div>\r\n <div class=\"threat-controls\"><button class=\"btn-primary\" id=\"threatBtn\">\u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u0647\u062f\u06cc\u062f<\/button><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- UNDERWATER ROBOT FLEET -->\r\n<section class=\"py\" id=\"fleet\" style=\"background:rgba(255,255,255,0.012);\">\r\n <div class=\"container\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"section-eyebrow\">\u0646\u0627\u0648\u06af\u0627\u0646 \u0631\u0628\u0627\u062a\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631\u0622\u0628\u06cc<\/div>\r\n <h2>\u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u0632\u06cc\u0631 \u0633\u0637\u062d \u0622\u0628<\/h2>\r\n <\/div>\r\n <div class=\"fleet-grid reveal\" id=\"fleetGrid\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- FISH POPULATION COUNTER -->\r\n<section class=\"py\" id=\"counter\">\r\n <div class=\"container\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"section-eyebrow\">\u0634\u0645\u0627\u0631\u0634\u06af\u0631 \u062c\u0645\u0639\u06cc\u062a \u0645\u0627\u0647\u06cc<\/div>\r\n <h2>\u0647\u0631 \u0645\u0627\u0647\u06cc\u060c \u0632\u0646\u062f\u0647 \u0634\u0645\u0631\u062f\u0647 \u0645\u06cc\u200c\u0634\u0647<\/h2>\r\n <\/div>\r\n <div class=\"counter-stage reveal\"><canvas id=\"counter-canvas\"><\/canvas><\/div>\r\n <div class=\"stat-grid\">\r\n <div class=\"stat-card\"><div class=\"stat-label\">\u0634\u0646\u0627\u0633\u0627\u06cc\u06cc\u200c\u0634\u062f\u0647<\/div><div class=\"stat-value\" data-target=\"18482\">0<span class=\"unit\">\u0645\u0627\u0647\u06cc<\/span><\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">\u0645\u06cc\u0627\u0646\u06af\u06cc\u0646 \u0648\u0632\u0646<\/div><div class=\"stat-value\" data-target=\"2.43\" data-decimal=\"2\">0<span class=\"unit\">kg<\/span><\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">\u0632\u06cc\u0633\u062a\u200c\u062a\u0648\u062f\u0647 \u062a\u062e\u0645\u06cc\u0646\u06cc<\/div><div class=\"stat-value\" data-target=\"44.9\" data-decimal=\"1\">0<span class=\"unit\">\u062a\u0646<\/span><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- DISEASE DETECTION -->\r\n<section class=\"py\" id=\"disease\" style=\"background:rgba(255,255,255,0.012);\">\r\n <div class=\"container\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"section-eyebrow\">\u062a\u0634\u062e\u06cc\u0635 \u0628\u06cc\u0645\u0627\u0631\u06cc<\/div>\r\n <h2>\u0632\u0648\u0645 \u0631\u0648\u06cc \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u0627\u0647\u0645\u06cc\u062a \u062f\u0627\u0631\u0647<\/h2>\r\n <\/div>\r\n <div class=\"disease-panel reveal\">\r\n <div class=\"disease-visual\"><canvas id=\"disease-canvas\"><\/canvas><\/div>\r\n <div class=\"disease-info\">\r\n <div><div class=\"l\">\u0627\u0637\u0645\u06cc\u0646\u0627\u0646<\/div><div class=\"v\">99.87%<\/div><\/div>\r\n <div><div class=\"l\">\u062f\u0631\u0645\u0627\u0646<\/div><div class=\"v\">\u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0634\u062f<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- LIVE MISSION CONTROL -->\r\n<section class=\"py\" id=\"mission\">\r\n <div class=\"container\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"section-eyebrow\">\u0645\u0631\u06a9\u0632 \u06a9\u0646\u062a\u0631\u0644 \u0645\u0623\u0645\u0648\u0631\u06cc\u062a \u0632\u0646\u062f\u0647<\/div>\r\n <h2>\u06a9\u0644 \u0639\u0645\u0644\u06cc\u0627\u062a\u060c \u0632\u0646\u062f\u0647<\/h2>\r\n <\/div>\r\n <div class=\"stat-grid\">\r\n <div class=\"stat-card\"><div class=\"stat-label\">\u0631\u0628\u0627\u062a\u200c\u0647\u0627\u06cc \u0641\u0639\u0627\u0644<\/div><div class=\"stat-value\" data-target=\"24\">0<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">\u0645\u0627\u0647\u06cc\u200c\u0647\u0627\u06cc \u067e\u0627\u06cc\u0634\u200c\u0634\u062f\u0647<\/div><div class=\"stat-value\" data-target=\"2418542\">0<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">\u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u0622\u0628<\/div><div class=\"stat-value\" data-target=\"482104\">0<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">\u062a\u0635\u0645\u06cc\u0645\u0627\u062a \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/div><div class=\"stat-value\" data-target=\"14.8\" data-decimal=\"1\">0<span class=\"unit\">M<\/span><\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">\u0647\u0634\u062f\u0627\u0631\u0647\u0627<\/div><div class=\"stat-value\" data-target=\"3\">0<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">\u0645\u0648\u0641\u0642\u06cc\u062a \u0645\u0623\u0645\u0648\u0631\u06cc\u062a<\/div><div class=\"stat-value\" data-target=\"99.99\" data-decimal=\"2\">0<span class=\"unit\">%<\/span><\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">\u0628\u0627\u062a\u0631\u06cc<\/div><div class=\"stat-value\" data-target=\"96\" data-suffix=\"%\">0%<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">\u0639\u0645\u0642<\/div><div class=\"stat-value\" data-target=\"28\" data-suffix=\" m\">0<span class=\"unit\">m<\/span><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- OCEAN INTELLIGENCE NETWORK -->\r\n<section class=\"py\" id=\"network\" style=\"background:rgba(255,255,255,0.012);\">\r\n <div class=\"container\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"section-eyebrow\">\u0634\u0628\u06a9\u0647 \u0647\u0648\u0634 \u0627\u0642\u06cc\u0627\u0646\u0648\u0633\u06cc<\/div>\r\n <h2>\u0647\u0631 \u0645\u0632\u0631\u0639\u0647\u060c \u06cc\u06a9 \u0647\u0648\u0634 \u0648\u0627\u062d\u062f<\/h2>\r\n <\/div>\r\n <svg class=\"network-svg reveal\" id=\"networkSvg\" viewBox=\"0 0 800 460\"><\/svg>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- AI COMMAND TERMINAL -->\r\n<section class=\"py\" id=\"terminal-section\">\r\n <div class=\"container\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"section-eyebrow\">\u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0641\u0631\u0645\u0627\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/div>\r\n <h2>\u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0627 \u0646\u0627\u0648\u06af\u0627\u0646 \u0635\u062d\u0628\u062a \u06a9\u0646<\/h2>\r\n <\/div>\r\n <div class=\"terminal reveal\">\r\n <div class=\"terminal-bar\">\r\n <div class=\"tdot\" style=\"background:#ff5f57;\"><\/div>\r\n <div class=\"tdot\" style=\"background:#febc2e;\"><\/div>\r\n <div class=\"tdot\" style=\"background:#28c840;\"><\/div>\r\n <\/div>\r\n <div class=\"terminal-body\" id=\"terminalBody\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- TECH STACK -->\r\n<section class=\"py\" id=\"stack\" style=\"background:rgba(255,255,255,0.012);\">\r\n <div class=\"container\">\r\n <div class=\"section-head reveal\">\r\n <div class=\"section-eyebrow\">\u0641\u0646\u0627\u0648\u0631\u06cc<\/div>\r\n <h2>\u0633\u0627\u062e\u062a\u0647\u200c\u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0647\u0648\u0634 \u0632\u06cc\u0631\u0622\u0628\u06cc \u0644\u062d\u0638\u0647\u200c\u0627\u06cc<\/h2>\r\n <\/div>\r\n <div class=\"chip-row reveal\">\r\n <span class=\"chip\">Three.js<\/span><span class=\"chip\">React Three Fiber<\/span><span class=\"chip\">GSAP<\/span>\r\n <span class=\"chip\">WebGL<\/span><span class=\"chip\">Framer Motion<\/span><span class=\"chip\">Lenis<\/span>\r\n <span class=\"chip\">Blender<\/span><span class=\"chip\">Lottie<\/span><span class=\"chip\">GLSL Shaders<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- FOOTER -->\r\n<section class=\"py\" id=\"footer-section\">\r\n <div class=\"container\">\r\n <div class=\"footer-stage reveal\">\r\n <canvas id=\"footer-canvas\"><\/canvas>\r\n <div class=\"footer-content\">\r\n <div class=\"brand\">BLUE GUARD<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/* cursor glow *\/\r\nconst glow = document.getElementById('cursorGlow');\r\nlet mouseX = window.innerWidth\/2, mouseY = window.innerHeight\/2;\r\nwindow.addEventListener('pointermove', (e) => {\r\n glow.style.left = e.clientX + 'px'; glow.style.top = e.clientY + 'px';\r\n mouseX = e.clientX; mouseY = e.clientY;\r\n}, {passive:true});\r\n\r\n\/* scroll reveal *\/\r\nconst io = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => { if(entry.isIntersecting){ entry.target.classList.add('in'); io.unobserve(entry.target); } });\r\n}, {threshold:0.15});\r\ndocument.querySelectorAll('.reveal').forEach(el => io.observe(el));\r\n\r\n\/* background \u2014 rising bubbles + drifting particles *\/\r\n(function(){\r\n const canvas = document.getElementById('ocean-bg');\r\n const ctx = canvas.getContext('2d');\r\n let w,h,particles;\r\n function resize(){ w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; }\r\n function init(){\r\n resize();\r\n const count = Math.min(70, Math.floor(w\/22));\r\n particles = Array.from({length:count}, () => ({x:Math.random()*w,y:Math.random()*h,vy:-(0.08+Math.random()*0.2),r:Math.random()*1.3+0.3}));\r\n }\r\n function draw(){\r\n ctx.clearRect(0,0,w,h);\r\n ctx.fillStyle='rgba(0,229,255,0.35)';\r\n for(const p of particles){\r\n p.y += p.vy;\r\n if(p.y < -10){ p.y = h+10; p.x = Math.random()*w; }\r\n ctx.globalAlpha=0.3; ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2); ctx.fill();\r\n }\r\n requestAnimationFrame(draw);\r\n }\r\n window.addEventListener('resize', init);\r\n init(); draw();\r\n})();\r\n\r\n\/* helper: draw a simple fish shape *\/\r\nfunction drawFish(ctx, x, y, size, angle, color){\r\n ctx.save();\r\n ctx.translate(x,y);\r\n ctx.rotate(angle);\r\n ctx.fillStyle = color;\r\n ctx.beginPath();\r\n ctx.ellipse(0,0,size,size*0.4,0,0,Math.PI*2);\r\n ctx.fill();\r\n ctx.beginPath();\r\n ctx.moveTo(-size,0); ctx.lineTo(-size*1.6,-size*0.5); ctx.lineTo(-size*1.6,size*0.5); ctx.closePath();\r\n ctx.fill();\r\n ctx.restore();\r\n}\r\n\r\n\/* hero submarine canvas *\/\r\n(function(){\r\n const canvas = document.getElementById('sub-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let w,h,t=0;\r\n function resize(){\r\n const rect = canvas.parentElement.getBoundingClientRect();\r\n w = canvas.width = rect.width; h = canvas.height = rect.height;\r\n }\r\n window.addEventListener('resize', resize); resize();\r\n const bg = Array.from({length:10}, () => ({x:Math.random(), y:Math.random(), s:0.5+Math.random()}));\r\n let scanX = -100;\r\n\r\n function draw(){\r\n ctx.clearRect(0,0,w,h); t += 0.02;\r\n const cx = w\/2, cy = h*0.55 + Math.sin(t)*6;\r\n\r\n bg.forEach((f,i) => {\r\n const angle = 0;\r\n drawFish(ctx, f.x*w, f.y*h*0.6, 6*f.s, angle, 'rgba(0,229,255,0.12)');\r\n });\r\n\r\n \/\/ sub body\r\n ctx.strokeStyle='rgba(0,229,255,0.8)'; ctx.fillStyle='rgba(2,15,22,0.9)'; ctx.lineWidth=2;\r\n ctx.beginPath(); ctx.ellipse(cx,cy,110,32,0,0,Math.PI*2); ctx.fill(); ctx.stroke();\r\n ctx.beginPath(); ctx.arc(cx-60,cy-18,14,0,Math.PI*2); ctx.fillStyle='rgba(0,229,255,0.15)'; ctx.fill(); ctx.stroke();\r\n\r\n \/\/ headlights\r\n const lg = ctx.createLinearGradient(cx-110,cy,cx-220,cy);\r\n lg.addColorStop(0,'rgba(0,229,255,0.3)'); lg.addColorStop(1,'rgba(0,229,255,0)');\r\n ctx.fillStyle=lg;\r\n ctx.beginPath(); ctx.moveTo(cx-110,cy-14); ctx.lineTo(cx-230,cy-50); ctx.lineTo(cx-230,cy+50); ctx.lineTo(cx-110,cy+14); ctx.closePath(); ctx.fill();\r\n\r\n \/\/ propeller\r\n ctx.strokeStyle='rgba(0,229,255,0.5)';\r\n ctx.beginPath(); ctx.arc(cx+112,cy,10,0,Math.PI*2); ctx.stroke();\r\n\r\n \/\/ scan wave sweeping across\r\n scanX += 3;\r\n if(scanX > w+200) scanX = -200;\r\n const sg = ctx.createLinearGradient(scanX-60,0,scanX+60,0);\r\n sg.addColorStop(0,'rgba(0,229,255,0)'); sg.addColorStop(0.5,'rgba(0,229,255,0.15)'); sg.addColorStop(1,'rgba(0,229,255,0)');\r\n ctx.fillStyle = sg;\r\n ctx.fillRect(scanX-60,0,120,h);\r\n\r\n requestAnimationFrame(draw);\r\n }\r\n draw();\r\n})();\r\n\r\n\/* counters *\/\r\nconst counterObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if(entry.isIntersecting){\r\n const el = entry.target;\r\n const target = parseFloat(el.dataset.target);\r\n const decimals = parseInt(el.dataset.decimal || '0');\r\n let start = performance.now();\r\n function tick(now){\r\n const p = Math.min(1,(now-start)\/1500);\r\n const eased = 1 - Math.pow(1-p,3);\r\n const cur = target*eased;\r\n el.childNodes[0].nodeValue = decimals>0 ? cur.toFixed(decimals) : Math.round(cur).toLocaleString();\r\n if(p<1) requestAnimationFrame(tick);\r\n }\r\n requestAnimationFrame(tick);\r\n counterObserver.unobserve(el);\r\n }\r\n });\r\n}, {threshold:0.4});\r\ndocument.querySelectorAll('.stat-value[data-target]').forEach(c => counterObserver.observe(c));\r\n\r\n\/* digital twin \u2014 pond\/cage\/lake with swimming fish + BLUE GUARD *\/\r\n(function(){\r\n const canvas = document.getElementById('twin-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let w,h;\r\n function resize(){\r\n const rect = canvas.parentElement.getBoundingClientRect();\r\n w = canvas.width = rect.width; h = canvas.height = rect.height;\r\n }\r\n window.addEventListener('resize', resize); resize();\r\n const fish = Array.from({length:40}, () => ({\r\n x:Math.random()*1, y:0.2+Math.random()*0.7, speed:0.0006+Math.random()*0.0008, dir:Math.random()<0.5?1:-1, size:4+Math.random()*4, phase:Math.random()*10\r\n }));\r\n const guard = {x:0.5, phase:0};\r\n\r\n function draw(t){\r\n ctx.clearRect(0,0,w,h);\r\n const g = ctx.createLinearGradient(0,0,0,h);\r\n g.addColorStop(0,'rgba(0,93,255,0.08)'); g.addColorStop(1,'rgba(0,10,20,0.5)');\r\n ctx.fillStyle=g; ctx.fillRect(0,0,w,h);\r\n\r\n fish.forEach(f => {\r\n f.x += f.speed*f.dir;\r\n if(f.x>1.05){ f.x=-0.05; } if(f.x<-0.05){ f.x=1.05; }\r\n const y = f.y*h + Math.sin((t||0)*0.001+f.phase)*8;\r\n drawFish(ctx, f.x*w, y, f.size, f.dir>0?0:Math.PI, 'rgba(0,229,255,0.5)');\r\n });\r\n\r\n guard.phase += 0.006;\r\n const gx = (Math.sin(guard.phase)*0.5+0.5)*w;\r\n const gy = h*0.5 + Math.sin(guard.phase*2)*40;\r\n ctx.strokeStyle='rgba(0,255,150,0.8)'; ctx.fillStyle='rgba(2,15,22,0.9)'; ctx.lineWidth=1.5;\r\n ctx.beginPath(); ctx.ellipse(gx,gy,20,7,0,0,Math.PI*2); ctx.fill(); ctx.stroke();\r\n\r\n requestAnimationFrame(draw);\r\n }\r\n requestAnimationFrame(draw);\r\n})();\r\nconst twinTabs = document.getElementById('twinTabs');\r\n['\u0642\u0641\u0633 \u062f\u0631\u06cc\u0627\u06cc\u06cc','\u0627\u0633\u062a\u062e\u0631','\u062f\u0631\u06cc\u0627\u0686\u0647'].forEach((label,i) => {\r\n const btn = document.createElement('button');\r\n btn.className = 'btn-mini' + (i===0?' active':'');\r\n btn.textContent = label;\r\n btn.addEventListener('click', () => {\r\n document.querySelectorAll('#twinTabs .btn-mini').forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n });\r\n twinTabs.appendChild(btn);\r\n});\r\n\r\n\/* AI fish scan *\/\r\n(function(){\r\n const canvas = document.getElementById('scan-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let w,h,t=0;\r\n function resize(){\r\n const rect = canvas.parentElement.getBoundingClientRect();\r\n w = canvas.width = rect.width; h = canvas.height = rect.height;\r\n }\r\n window.addEventListener('resize', resize); resize();\r\n function draw(){\r\n ctx.clearRect(0,0,w,h); t += 0.02;\r\n ctx.fillStyle='rgba(0,93,255,0.04)'; ctx.fillRect(0,0,w,h);\r\n const cx = w*0.4, cy = h*0.5 + Math.sin(t)*10;\r\n drawFish(ctx, cx, cy, 46, 0, 'rgba(0,229,255,0.35)');\r\n \/\/ laser scan line\r\n const lx = cx - 60 + ((t*40)%180);\r\n ctx.strokeStyle='rgba(0,229,255,0.9)'; ctx.lineWidth=2;\r\n ctx.beginPath(); ctx.moveTo(lx,cy-70); ctx.lineTo(lx,cy+70); ctx.stroke();\r\n ctx.strokeStyle='rgba(0,229,255,0.25)';\r\n ctx.beginPath(); ctx.ellipse(cx,cy,80,50,0,0,Math.PI*2); ctx.stroke();\r\n requestAnimationFrame(draw);\r\n }\r\n draw();\r\n})();\r\n\r\n\/* water intelligence crystals *\/\r\nconst waterParams = [\r\n ['\u062f\u0645\u0627','18.4\u00b0C'],['\u0627\u06a9\u0633\u06cc\u0698\u0646','7.2 mg\/L'],['pH','7.6'],['\u0634\u0648\u0631\u06cc','32 ppt'],\r\n ['\u0622\u0645\u0648\u0646\u06cc\u0627\u06a9','0.02 mg\/L'],['\u06a9\u062f\u0648\u0631\u062a','\u067e\u0627\u06cc\u06cc\u0646'],['\u0646\u06cc\u062a\u0631\u0627\u062a','4.1 mg\/L'],['\u0646\u0631\u062e \u062c\u0631\u06cc\u0627\u0646','1.4 m\/s']\r\n];\r\nconst waterGrid = document.getElementById('waterGrid');\r\nwaterParams.forEach(([label,val]) => {\r\n const c = document.createElement('div'); c.className='crystal-card';\r\n c.innerHTML = `<div class=\"l\">${label}<\/div><div class=\"v\">${val}<\/div>`;\r\n waterGrid.appendChild(c);\r\n});\r\n\r\n\/* threat detection simulator *\/\r\n(function(){\r\n const canvas = document.getElementById('threat-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let w,h,alertMode=false,t=0;\r\n function resize(){\r\n const rect = canvas.parentElement.getBoundingClientRect();\r\n w = canvas.width = rect.width; h = canvas.height = rect.height;\r\n }\r\n window.addEventListener('resize', resize); resize();\r\n const statusEl = document.getElementById('threatStatus');\r\n const btn = document.getElementById('threatBtn');\r\n\r\n function draw(){\r\n ctx.clearRect(0,0,w,h); t += 0.02;\r\n const baseColor = alertMode ? [255,122,69] : [0,229,255];\r\n const g = ctx.createLinearGradient(0,0,0,h);\r\n g.addColorStop(0, `rgba(${baseColor[0]},${baseColor[1]},${baseColor[2]},0.12)`);\r\n g.addColorStop(1, 'rgba(0,5,10,0.6)');\r\n ctx.fillStyle = g; ctx.fillRect(0,0,w,h);\r\n if(alertMode){\r\n ctx.strokeStyle = `rgba(255,122,69,${0.3+Math.abs(Math.sin(t*3))*0.3})`;\r\n ctx.lineWidth = 3;\r\n ctx.strokeRect(6,6,w-12,h-12);\r\n }\r\n requestAnimationFrame(draw);\r\n }\r\n draw();\r\n\r\n btn.addEventListener('click', () => {\r\n alertMode = true;\r\n statusEl.innerHTML = '\u26a0 \u0627\u0641\u062a \u0633\u0637\u062d \u0627\u06a9\u0633\u06cc\u0698\u0646 \u2014 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631 \u062d\u0627\u0644 \u062a\u062d\u0644\u06cc\u0644\u2026';\r\n statusEl.style.color = 'var(--warn)';\r\n setTimeout(() => {\r\n statusEl.innerHTML = '\u2705 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc: \u0627\u0641\u0632\u0627\u06cc\u0634 \u0647\u0648\u0627\u062f\u0647\u06cc \u062f\u0631 \u0642\u0641\u0633 \u06f3. \u062a\u0646\u0638\u06cc\u0645 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0639\u0645\u0627\u0644 \u0634\u062f.';\r\n statusEl.style.color = 'var(--accent)';\r\n }, 2200);\r\n setTimeout(() => {\r\n alertMode = false;\r\n statusEl.textContent = '\u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u062f\u06cc \u2014 \u0647\u0645\u0647 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0646\u0631\u0645\u0627\u0644 \u0647\u0633\u062a\u0646.';\r\n statusEl.style.color = 'var(--text)';\r\n }, 5500);\r\n });\r\n})();\r\n\r\n\/* robot fleet *\/\r\nconst FLEET_ICONS = {\r\n inspect:`<svg viewBox=\"0 0 60 60\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"14\" y=\"22\" width=\"32\" height=\"18\" rx=\"6\"\/><circle cx=\"30\" cy=\"14\" r=\"4\"\/><line x1=\"30\" y1=\"18\" x2=\"30\" y2=\"22\"\/><\/svg>`,\r\n clean:`<svg viewBox=\"0 0 60 60\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"30\" cy=\"30\" r=\"16\"\/><path d=\"M30 14 V8 M30 52 V46 M14 30 H8 M52 30 H46\"\/><\/svg>`,\r\n feed:`<svg viewBox=\"0 0 60 60\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M20 12 H40 L34 30 H26 Z\"\/><line x1=\"30\" y1=\"30\" x2=\"30\" y2=\"48\"\/><line x1=\"20\" y1=\"48\" x2=\"40\" y2=\"48\"\/><\/svg>`,\r\n drone:`<svg viewBox=\"0 0 60 60\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"30\" cy=\"30\" r=\"8\"\/><circle cx=\"14\" cy=\"14\" r=\"6\"\/><circle cx=\"46\" cy=\"14\" r=\"6\"\/><circle cx=\"14\" cy=\"46\" r=\"6\"\/><circle cx=\"46\" cy=\"46\" r=\"6\"\/><line x1=\"24\" y1=\"24\" x2=\"17\" y2=\"17\"\/><line x1=\"36\" y1=\"24\" x2=\"43\" y2=\"17\"\/><line x1=\"24\" y1=\"36\" x2=\"17\" y2=\"43\"\/><line x1=\"36\" y1=\"36\" x2=\"43\" y2=\"43\"\/><\/svg>`,\r\n repair:`<svg viewBox=\"0 0 60 60\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M38 12 L48 22 L28 42 L18 44 L20 34 Z\"\/><line x1=\"32\" y1=\"18\" x2=\"42\" y2=\"28\"\/><\/svg>`\r\n};\r\nconst fleet = [\r\n {icon:'inspect', name:'\u0631\u0628\u0627\u062a \u0628\u0627\u0632\u0631\u0633\u06cc'}, {icon:'clean', name:'\u0631\u0628\u0627\u062a \u062a\u0645\u06cc\u0632\u06a9\u0627\u0631\u06cc'}, {icon:'feed', name:'\u0631\u0628\u0627\u062a \u062a\u063a\u0630\u06cc\u0647'},\r\n {icon:'drone', name:'\u067e\u0647\u067e\u0627\u062f \u0627\u0645\u0646\u06cc\u062a\u06cc'}, {icon:'repair', name:'\u0631\u0628\u0627\u062a \u062a\u0639\u0645\u06cc\u0631\u0627\u062a'}\r\n];\r\nconst fleetGrid = document.getElementById('fleetGrid');\r\nfleet.forEach(f => {\r\n const c = document.createElement('div'); c.className='fleet-card';\r\n c.innerHTML = `<div class=\"fleet-icon\">${FLEET_ICONS[f.icon]}<\/div><h5>${f.name}<\/h5>`;\r\n fleetGrid.appendChild(c);\r\n});\r\n\r\n\/* fish population counter *\/\r\n(function(){\r\n const canvas = document.getElementById('counter-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let w,h;\r\n function resize(){\r\n const rect = canvas.parentElement.getBoundingClientRect();\r\n w = canvas.width = rect.width; h = canvas.height = rect.height;\r\n }\r\n window.addEventListener('resize', resize); resize();\r\n const school = Array.from({length:60}, () => ({\r\n x:Math.random(), y:Math.random(), speed:0.0004+Math.random()*0.0006, dir:Math.random()<0.5?1:-1, size:3+Math.random()*3, tagged:Math.random()<0.4\r\n }));\r\n function draw(t){\r\n ctx.clearRect(0,0,w,h);\r\n ctx.fillStyle='rgba(0,93,255,0.05)'; ctx.fillRect(0,0,w,h);\r\n school.forEach(f => {\r\n f.x += f.speed*f.dir;\r\n if(f.x>1.05) f.x=-0.05; if(f.x<-0.05) f.x=1.05;\r\n const x=f.x*w, y=f.y*h;\r\n drawFish(ctx, x, y, f.size, f.dir>0?0:Math.PI, 'rgba(0,229,255,0.55)');\r\n if(f.tagged){\r\n ctx.strokeStyle='rgba(0,255,150,0.8)'; ctx.lineWidth=1.2;\r\n ctx.beginPath(); ctx.arc(x,y,f.size*2.2,0,Math.PI*2); ctx.stroke();\r\n }\r\n });\r\n requestAnimationFrame(draw);\r\n }\r\n requestAnimationFrame(draw);\r\n})();\r\n\r\n\/* disease detection zoom *\/\r\n(function(){\r\n const canvas = document.getElementById('disease-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let w,h,t=0;\r\n function resize(){\r\n const rect = canvas.parentElement.getBoundingClientRect();\r\n w = canvas.width = rect.width; h = canvas.height = rect.height;\r\n }\r\n window.addEventListener('resize', resize); resize();\r\n function draw(){\r\n ctx.clearRect(0,0,w,h); t += 0.02;\r\n ctx.fillStyle='rgba(0,93,255,0.05)'; ctx.fillRect(0,0,w,h);\r\n const cx=w\/2, cy=h\/2 + Math.sin(t)*6;\r\n drawFish(ctx, cx, cy, 70, 0, 'rgba(0,229,255,0.3)');\r\n const pulse = 0.5+Math.abs(Math.sin(t*2))*0.5;\r\n ctx.fillStyle = `rgba(255,95,95,${0.4+pulse*0.4})`;\r\n ctx.beginPath(); ctx.ellipse(cx+20,cy+5,16,10,0,0,Math.PI*2); ctx.fill();\r\n requestAnimationFrame(draw);\r\n }\r\n draw();\r\n})();\r\n\r\n\/* AI command terminal *\/\r\nconst terminalLines = [\r\n {cmd:'\u0627\u0633\u06a9\u0646 \u0642\u0641\u0633', ok:'\u06a9\u0627\u0645\u0644 \u0634\u062f'},\r\n {cmd:'\u062a\u062d\u0644\u06cc\u0644 \u0633\u0644\u0627\u0645\u062a \u0645\u0627\u0647\u06cc', ok:'\u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627'},\r\n {cmd:'\u067e\u06cc\u0634\u200c\u0628\u06cc\u0646\u06cc \u0627\u06a9\u0633\u06cc\u0698\u0646', ok:'\u0622\u0645\u0627\u062f\u0647'},\r\n {cmd:'\u062a\u0634\u062e\u06cc\u0635 \u0628\u06cc\u0645\u0627\u0631\u06cc', ok:'\u062a\u06a9\u0645\u06cc\u0644 \u0634\u062f'},\r\n {cmd:'\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0631\u0628\u0627\u062a \u062a\u0645\u06cc\u0632\u06a9\u0627\u0631\u06cc', ok:'\u0622\u0646\u0644\u0627\u06cc\u0646'},\r\n {cmd:'\u062a\u0648\u0644\u06cc\u062f \u06af\u0632\u0627\u0631\u0634', ok:'\u0645\u0648\u0641\u0642'}\r\n];\r\nconst terminalBody = document.getElementById('terminalBody');\r\nlet tIdx = 0;\r\nasync function typeLine(text){\r\n return new Promise(resolve => {\r\n let i = 0;\r\n const span = document.createElement('div');\r\n terminalBody.appendChild(span);\r\n const interval = setInterval(() => {\r\n span.textContent = '> ' + text.slice(0, i+1);\r\n i++;\r\n if(i >= text.length){ clearInterval(interval); resolve(span); }\r\n }, 35);\r\n });\r\n}\r\nasync function runTerminal(){\r\n while(true){\r\n const line = terminalLines[tIdx % terminalLines.length];\r\n await typeLine(line.cmd);\r\n await new Promise(r => setTimeout(r, 300));\r\n const okLine = document.createElement('div');\r\n okLine.className = 'ok';\r\n okLine.textContent = '\u2714 ' + line.ok;\r\n terminalBody.appendChild(okLine);\r\n tIdx++;\r\n while(terminalBody.children.length > 8) terminalBody.removeChild(terminalBody.firstChild);\r\n await new Promise(r => setTimeout(r, 900));\r\n }\r\n}\r\nrunTerminal();\r\n\r\n\/* ocean intelligence network *\/\r\n(function(){\r\n const svg = document.getElementById('networkSvg');\r\n const farms = ['\u0646\u0631\u0648\u0698','\u0634\u06cc\u0644\u06cc','\u0648\u06cc\u062a\u0646\u0627\u0645','\u0627\u0633\u06a9\u0627\u062a\u0644\u0646\u062f','\u06a9\u0627\u0646\u0627\u062f\u0627','\u0698\u0627\u067e\u0646','\u06cc\u0648\u0646\u0627\u0646','\u0627\u0633\u062a\u0631\u0627\u0644\u06cc\u0627','\u0645\u0635\u0631','\u0627\u0646\u062f\u0648\u0646\u0632\u06cc'];\r\n const cx=400, cy=310, R=220;\r\n let content = '';\r\n farms.forEach((name,i) => {\r\n const angle = (i\/farms.length)*Math.PI*2 - Math.PI\/2;\r\n const x = cx + Math.cos(angle)*R, y = cy + Math.sin(angle)*R;\r\n content += `<line class=\"net-line\" x1=\"${cx}\" y1=\"${cy}\" x2=\"${x}\" y2=\"${y}\"\/>`;\r\n });\r\n content += `<circle class=\"net-node center\" cx=\"${cx}\" cy=\"${cy}\" r=\"52\"\/><text class=\"net-label\" x=\"${cx}\" y=\"${cy-2}\" font-weight=\"700\" font-size=\"11\">BLUE GUARD<\/text><text class=\"net-label\" x=\"${cx}\" y=\"${cy+12}\" font-weight=\"700\" font-size=\"11\">AI<\/text>`;\r\n farms.forEach((name,i) => {\r\n const angle = (i\/farms.length)*Math.PI*2 - Math.PI\/2;\r\n const x = cx + Math.cos(angle)*R, y = cy + Math.sin(angle)*R;\r\n content += `<circle class=\"net-node\" cx=\"${x}\" cy=\"${y}\" r=\"30\"\/><text class=\"net-label\" x=\"${x}\" y=\"${y+4}\">${name}<\/text>`;\r\n });\r\n svg.innerHTML = content;\r\n})();\r\n\r\n\/* footer submarine descent *\/\r\n(function(){\r\n const canvas = document.getElementById('footer-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let w,h,t=0;\r\n function resize(){\r\n const rect = canvas.parentElement.getBoundingClientRect();\r\n w = canvas.width = rect.width; h = canvas.height = rect.height;\r\n }\r\n window.addEventListener('resize', resize); resize();\r\n function draw(){\r\n ctx.clearRect(0,0,w,h); t += 0.003;\r\n const g = ctx.createLinearGradient(0,0,0,h);\r\n g.addColorStop(0,'rgba(0,93,255,0.1)'); g.addColorStop(1,'rgba(0,3,6,0.9)');\r\n ctx.fillStyle=g; ctx.fillRect(0,0,w,h);\r\n const depth = (Math.sin(t)*0.5+0.5);\r\n const cx = w\/2, cy = h*0.2 + depth*h*0.6;\r\n ctx.globalAlpha = 1-depth*0.7;\r\n ctx.strokeStyle='rgba(0,229,255,0.6)'; ctx.fillStyle='rgba(2,10,16,0.9)'; ctx.lineWidth=1.5;\r\n ctx.beginPath(); ctx.ellipse(cx,cy,70,20,0,0,Math.PI*2); ctx.fill(); ctx.stroke();\r\n ctx.fillStyle='rgba(0,229,255,0.7)';\r\n ctx.beginPath(); ctx.arc(cx-40,cy,3,0,Math.PI*2); ctx.fill();\r\n ctx.globalAlpha = 1;\r\n requestAnimationFrame(draw);\r\n }\r\n draw();\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0628\u0644\u0648\u06af\u0627\u0631\u062f \u2014 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0632\u06cc\u0631\u0622\u0628\u06cc BLUE GUARD \u0622\u06cc\u0646\u062f\u0647 \u0622\u0628\u0632\u06cc\u200c\u067e\u0631\u0648\u0631\u06cc \u0647\u0648\u0634\u0645\u0646\u062f \u06a9\u0627\u0648\u0634 \u062f\u0631 \u0645\u0623\u0645\u0648\u0631\u06cc\u062a \u25b6 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u06a9\u0646 \u0632\u0646\u062f\u0647 \u062f\u0648\u0642\u0644\u0648\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0632\u0646\u062f\u0647 \u0627\u0642\u06cc\u0627\u0646\u0648\u0633 \u06cc\u06a9 \u0639\u06a9\u0633 \u0646\u06cc\u0633\u062a. \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u0632\u0646\u062f\u0647\u200c\u0633\u062a. \u06cc\u06a9 \u0627\u0633\u062a\u062e\u0631\u060c \u06cc\u06a9 \u0642\u0641\u0633 \u062f\u0631\u06cc\u0627\u06cc\u06cc\u060c \u06cc\u06a9 \u062f\u0631\u06cc\u0627\u0686\u0647 \u2014 \u0647\u0632\u0627\u0631\u0627\u0646 \u0645\u0627\u0647\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0634\u0646\u0627\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 BLUE GUARD \u0628\u06cc\u0646\u0634\u0648\u0646 \u062d\u0631\u06a9\u062a \u0645\u06cc\u200c\u06a9\u0646\u0647\u060c \u0632\u0646\u062f\u0647. \u0627\u0633\u06a9\u0646 \u0647\u0648\u0634\u0645\u0646\u062f \u0645\u0627\u0647\u06cc \u0647\u0631 \u0645\u0627\u0647\u06cc\u060c \u062f\u0631 […]<\/p>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1909","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/amir.farm\/fa\/wp-json\/wp\/v2\/pages\/1909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amir.farm\/fa\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/amir.farm\/fa\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/amir.farm\/fa\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/amir.farm\/fa\/wp-json\/wp\/v2\/comments?post=1909"}],"version-history":[{"count":5,"href":"https:\/\/amir.farm\/fa\/wp-json\/wp\/v2\/pages\/1909\/revisions"}],"predecessor-version":[{"id":2064,"href":"https:\/\/amir.farm\/fa\/wp-json\/wp\/v2\/pages\/1909\/revisions\/2064"}],"wp:attachment":[{"href":"https:\/\/amir.farm\/fa\/wp-json\/wp\/v2\/media?parent=1909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}