{"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-21T02:04:50","modified_gmt":"2026-07-21T06:04:50","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\nBLUE GUARD \u2014 AI Underwater Intelligence<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\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:'Space Grotesk', sans-serif;\r\n --body:'Plus Jakarta Sans', sans-serif;\r\n --mono:'JetBrains Mono', monospace;\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 ::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.72rem;letter-spacing:0.2em;text-transform:uppercase;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.68rem;color:var(--muted);letter-spacing:0.06em;text-transform:uppercase;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\">The Future of Smart Aquaculture<\/div>\r\n <div class=\"hero-cta\">\r\n <button class=\"btn-primary\" onclick=\"document.getElementById('twin').scrollIntoView({behavior:'smooth'})\">Explore Mission<\/button>\r\n <button class=\"btn-ghost\" onclick=\"document.getElementById('scan').scrollIntoView({behavior:'smooth'})\">\u25b6 Watch Live Scan<\/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\">Live Ocean Digital Twin<\/div>\r\n <h2>Not a photo. A living environment.<\/h2>\r\n <p>A pond, a sea cage, a lake \u2014 thousands of fish swimming, with BLUE GUARD moving among them, live.<\/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\">AI Fish Scan<\/div>\r\n <h2>Every fish, read in an instant<\/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>Species<\/span><span>Rainbow Trout<\/span><\/div>\r\n <div class=\"hud-row\"><span>Health<\/span><span>98%<\/span><\/div>\r\n <div class=\"hud-row\"><span>Weight<\/span><span>2.84 kg<\/span><\/div>\r\n <div class=\"hud-row\"><span>Disease Risk<\/span><span>1%<\/span><\/div>\r\n <div class=\"hud-row\"><span>Stress Level<\/span><span>Low<\/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\">Water Intelligence<\/div>\r\n <h2>The water itself, made readable<\/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\">AI Threat Detection<\/div>\r\n <h2>Catching problems before they spread<\/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\">System nominal \u2014 all parameters normal.<\/div>\r\n <div class=\"threat-controls\"><button class=\"btn-primary\" id=\"threatBtn\">Simulate Threat<\/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\">Underwater Robot Fleet<\/div>\r\n <h2>A base beneath the surface<\/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\">Fish Population Counter<\/div>\r\n <h2>Every fish, counted live<\/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\">Detected<\/div><div class=\"stat-value\" data-target=\"18482\">0<span class=\"unit\">Fish<\/span><\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">Average Weight<\/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\">Estimated Biomass<\/div><div class=\"stat-value\" data-target=\"44.9\" data-decimal=\"1\">0<span class=\"unit\">Tons<\/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\">Disease Detection<\/div>\r\n <h2>Zooming in on what matters<\/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\">Confidence<\/div><div class=\"v\">99.87%<\/div><\/div>\r\n <div><div class=\"l\">Treatment<\/div><div class=\"v\">Suggested<\/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\">Live Mission Control<\/div>\r\n <h2>The whole operation, live<\/h2>\r\n <\/div>\r\n <div class=\"stat-grid\">\r\n <div class=\"stat-card\"><div class=\"stat-label\">Active Robots<\/div><div class=\"stat-value\" data-target=\"24\">0<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">Fish Monitored<\/div><div class=\"stat-value\" data-target=\"2418542\">0<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">Water Samples<\/div><div class=\"stat-value\" data-target=\"482104\">0<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">AI Decisions<\/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\">Alerts<\/div><div class=\"stat-value\" data-target=\"3\">0<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">Mission Success<\/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\">Battery<\/div><div class=\"stat-value\" data-target=\"96\" data-suffix=\"%\">0%<\/div><\/div>\r\n <div class=\"stat-card\"><div class=\"stat-label\">Depth<\/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\">Ocean Intelligence Network<\/div>\r\n <h2>Every farm, one intelligence<\/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\">AI Command Terminal<\/div>\r\n <h2>Talk to the fleet directly<\/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\">Technology<\/div>\r\n <h2>Built for real-time underwater intelligence<\/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['Sea Cage','Pond','Lake'].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 ['Temperature','18.4\u00b0C'],['Oxygen','7.2 mg\/L'],['pH','7.6'],['Salinity','32 ppt'],\r\n ['Ammonia','0.02 mg\/L'],['Turbidity','Low'],['Nitrate','4.1 mg\/L'],['Flow Rate','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 Oxygen levels dropping \u2014 AI analyzing\u2026';\r\n statusEl.style.color = 'var(--warn)';\r\n setTimeout(() => {\r\n statusEl.innerHTML = '\u2705 AI Recommendation: Increase aeration in Cage 3. Auto-adjustment applied.';\r\n statusEl.style.color = 'var(--accent)';\r\n }, 2200);\r\n setTimeout(() => {\r\n alertMode = false;\r\n statusEl.textContent = 'System nominal \u2014 all parameters normal.';\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:'Inspection Robot'}, {icon:'clean', name:'Cleaning Robot'}, {icon:'feed', name:'Feeding Robot'},\r\n {icon:'drone', name:'Security Drone'}, {icon:'repair', name:'Repair Robot'}\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:'Scan Cage', ok:'Complete'},\r\n {cmd:'Analyze Fish Health', ok:'Running'},\r\n {cmd:'Oxygen Prediction', ok:'Ready'},\r\n {cmd:'Detect Disease', ok:'Completed'},\r\n {cmd:'Deploy Cleaning Robot', ok:'Online'},\r\n {cmd:'Generate Report', ok:'Success'}\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 = ['Norway','Chile','Vietnam','Scotland','Canada','Japan','Greece','Australia','Egypt','Indonesia'];\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>  BLUE GUARD The Future of Smart Aquaculture Explore Mission \u25b6 Watch Live Scan Live Ocean Digital Twin Not a photo. A living environment. A pond, a sea cage, a lake \u2014 thousands of fish swimming, with BLUE GUARD moving among them, live.   AI Fish Scan Every fish, read in an instant SpeciesRainbow Trout […]<\/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":2,"href":"https:\/\/amir.farm\/fa\/wp-json\/wp\/v2\/pages\/1909\/revisions"}],"predecessor-version":[{"id":2051,"href":"https:\/\/amir.farm\/fa\/wp-json\/wp\/v2\/pages\/1909\/revisions\/2051"}],"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}]}}