Koordino Geodetske Instrukcije<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap\" rel=\"stylesheet\">\n\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/framer-motion@11\/dist\/framer-motion.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n <style>\n *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\n\n :root{\n --bg:#eef3ff;\n --text:#0d1e5c;\n --soft:#4a5d8a;\n --card:rgba(255,255,255,0.84);\n --border:rgba(37,99,235,0.17);\n --shadow:0 8px 32px rgba(37,99,235,0.10);\n --shadow-h:0 18px 48px rgba(37,99,235,0.18);\n\n \/* izra\u017eenija geodetska pozadina *\/\n --gc:rgba(37,99,235,0.085);\n --ac:rgba(37,99,235,0.245);\n --dc:rgba(37,99,235,0.36);\n --tc:rgba(37,99,235,0.29);\n\n --tl-track:rgba(37,99,235,0.18);\n --tl-fill:#2563eb;\n --tl-dot:#eef3ff;\n\n --blue:#2563eb;\n --accent:#f59e0b;\n }\n\n html{scroll-behavior:smooth;}\n body{\n font-family:'DM Sans',-apple-system,sans-serif;\n background:var(--bg);\n color:var(--text);\n overflow-x:hidden;\n }\n h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;}\n\n .card{\n background:var(--card);\n backdrop-filter:blur(16px);\n -webkit-backdrop-filter:blur(16px);\n border:1px solid var(--border);\n box-shadow:var(--shadow);\n transition:background .35s,border-color .35s,box-shadow .3s,transform .28s;\n }\n .card:hover{box-shadow:var(--shadow-h);transform:translateY(-4px);}\n\n .stb{\n position:fixed;\n bottom:1.5rem;\n right:1.25rem;\n z-index:120;\n width:52px;\n height:52px;\n border-radius:14px;\n background:linear-gradient(135deg,#1d4ed8,#3b82f6);\n color:#fff;\n border:none;\n cursor:pointer;\n display:flex;\n align-items:center;\n justify-content:center;\n box-shadow:0 8px 24px rgba(37,99,235,.40);\n }\n\n .badge{\n background:rgba(255,226,130,.22);\n border:1px solid rgba(230,175,0,.30);\n }\n\n @keyframes ctaGlow{\n 0%,100%{box-shadow:0 14px 40px rgba(37,99,235,.28);}\n 50%{box-shadow:0 14px 40px rgba(37,99,235,.52),0 0 28px rgba(59,130,246,.26);}\n }\n .cta-glow{animation:ctaGlow 2.6s ease-in-out infinite;}\n\n @keyframes pulseSlow{\n 0%,100%{opacity:.3;transform:scale(1);}\n 50%{opacity:.55;transform:scale(1.06);}\n }\n @keyframes floatY{\n 0%,100%{transform:translateY(0);}\n 50%{transform:translateY(-10px);}\n }\n @keyframes spinSlow{to{transform:rotate(360deg);}}\n @keyframes faqBounce{\n 0%{transform:translateY(0) rotate(0deg);}\n 30%{transform:translateY(-8px) rotate(-4deg);}\n 60%{transform:translateY(0) rotate(3deg);}\n 100%{transform:translateY(0) rotate(0deg);}\n }\n .faq-mascot-bounce{animation:faqBounce .55s ease;}\n\n \/* Desktop timeline *\/\n .tl-track{\n position:absolute;left:50%;top:0;bottom:0;width:2px;\n transform:translateX(-50%);pointer-events:none;z-index:2;\n }\n .tl-dashes{\n position:absolute;inset:0;\n background:repeating-linear-gradient(to bottom,var(--tl-track) 0,var(--tl-track) 8px,transparent 8px,transparent 18px);\n }\n .tl-fill{\n position:absolute;top:0;left:0;right:0;\n background:linear-gradient(to bottom,var(--tl-fill),rgba(59,130,246,.4));\n transition:height .1s linear;border-radius:2px;\n }\n .tl-dot{\n position:absolute;left:50%;width:14px;height:14px;border-radius:50%;\n transform:translate(-50%,-50%);\n border:2px solid var(--tl-fill);background:var(--tl-dot);\n transition:background .3s,transform .3s,box-shadow .3s;z-index:5;\n }\n .tl-dot.on{\n background:var(--tl-fill);\n transform:translate(-50%,-50%)scale(1.4);\n box-shadow:0 0 0 6px rgba(37,99,235,.14);\n }\n\n \/* Mobile timeline *\/\n .tl-mob{\n position:absolute;left:18px;top:0;bottom:0;width:2px;\n pointer-events:none;z-index:2;\n }\n .tl-mob-dashes{\n position:absolute;inset:0;\n background:repeating-linear-gradient(to bottom,var(--tl-track) 0,var(--tl-track) 7px,transparent 7px,transparent 15px);\n }\n .tl-mob-fill{\n position:absolute;top:0;left:0;right:0;\n background:linear-gradient(to bottom,var(--tl-fill),rgba(59,130,246,.38));\n transition:height .1s linear;border-radius:2px;\n }\n .tl-mob-dot{\n position:absolute;left:50%;width:11px;height:11px;border-radius:50%;\n transform:translate(-50%,-50%);\n border:2px solid var(--tl-fill);background:var(--tl-dot);\n transition:background .3s,transform .3s,box-shadow .3s;z-index:5;\n }\n .tl-mob-dot.on{\n background:var(--tl-fill);\n transform:translate(-50%,-50%)scale(1.35);\n box-shadow:0 0 0 4px rgba(37,99,235,.13);\n }\n <\/style>\n<\/head>\n<body>\n<div id=\"root\"><\/div>\n\n<script type=\"text\/babel\">\nconst{useState,useEffect,useRef}=React;\nconst{motion,AnimatePresence}=Motion;\n\nfunction useInView(t=.15){\n const r=useRef(null);\n const[v,setV]=useState(false);\n\n useEffect(()=>{\n const o=new IntersectionObserver(([e])=>{\n if(e.isIntersecting)setV(true);\n },{threshold:t});\n\n if(r.current)o.observe(r.current);\n return()=>{if(r.current)o.unobserve(r.current);};\n });\n\n return{ref:r,inView:v};\n}\n\nfunction useIsMobile(){\n const[m,setM]=useState(()=>window.innerWidth<768);\n useEffect(()=>{\n const f=()=>setM(window.innerWidth<768);\n window.addEventListener('resize',f,{passive:true});\n return()=>window.removeEventListener('resize',f);\n },[]);\n return m;\n}\n\n\/* Icons *\/\nconst PlayIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>;\nconst ChkIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>;\nconst FileIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/><\/svg>;\nconst VidIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polygon points=\"23 7 16 12 23 17 23 7\"\/><rect x=\"1\" y=\"5\" width=\"15\" height=\"14\" rx=\"2\"\/><\/svg>;\nconst TgtIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg>;\nconst ClkIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>;\nconst PlusIcon=()=><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>;\nconst MailIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>;\nconst PinIcon=()=><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/><\/svg>;\nconst UpIcon=()=>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12 18V7\" stroke=\"currentColor\" strokeWidth=\"2.6\" strokeLinecap=\"round\"\/>\n <path d=\"M7 11.5L12 6L17 11.5\" stroke=\"currentColor\" strokeWidth=\"2.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\/>\n <\/svg>;\n\n\/* \u2500\u2500 Static satellite \u2500\u2500 *\/\nconst StaticSatellite=({x,y,scale=1,rotate=0,opacity=.3})=>(\n <div\n style={{\n position:'absolute',\n left:x,\n top:y,\n transform:`rotate(${rotate}deg) scale(${scale})`,\n opacity,\n pointerEvents:'none'\n }}\n >\n <svg width=\"54\" height=\"54\" viewBox=\"0 0 54 54\" fill=\"none\">\n <rect x=\"20\" y=\"20\" width=\"14\" height=\"14\" rx=\"2.5\" fill=\"rgba(37,99,235,.34)\" stroke=\"rgba(37,99,235,.48)\" strokeWidth=\"1.2\"\/>\n <rect x=\"7\" y=\"18\" width=\"10\" height=\"18\" rx=\"1.5\" fill=\"rgba(37,99,235,.18)\" stroke=\"rgba(37,99,235,.34)\" strokeWidth=\"1\"\/>\n <rect x=\"37\" y=\"18\" width=\"10\" height=\"18\" rx=\"1.5\" fill=\"rgba(37,99,235,.18)\" stroke=\"rgba(37,99,235,.34)\" strokeWidth=\"1\"\/>\n <line x1=\"27\" y1=\"8\" x2=\"27\" y2=\"20\" stroke=\"rgba(37,99,235,.4)\" strokeWidth=\"1.4\"\/>\n <path d=\"M23 8h8\" stroke=\"rgba(37,99,235,.4)\" strokeWidth=\"1.4\" strokeLinecap=\"round\"\/>\n <line x1=\"27\" y1=\"34\" x2=\"27\" y2=\"45\" stroke=\"rgba(37,99,235,.3)\" strokeWidth=\"1.2\"\/>\n <circle cx=\"27\" cy=\"47\" r=\"1.7\" fill=\"rgba(37,99,235,.45)\"\/>\n <\/svg>\n <\/div>\n);\n\n\/* \u2500\u2500 Geodetic background \u2500\u2500 *\/\nconst GeodBg=({isMobile})=>{\n const gc='rgba(37,99,235,0.085)';\n const ac='rgba(37,99,235,0.245)';\n const dc='rgba(37,99,235,0.36)';\n const tc='rgba(37,99,235,0.29)';\n\n if(isMobile){\n const mPts=[[75,95],[315,125],[55,340],[335,365],[200,465],[95,545],[305,510]];\n const mEdges=[[0,1],[1,2],[2,0],[0,3],[3,4],[4,2],[4,5],[5,6],[6,4]];\n return(\n <div style={{position:'fixed',inset:0,zIndex:0,pointerEvents:'none',overflow:'hidden'}} aria-hidden=\"true\">\n <svg viewBox=\"0 0 400 700\" preserveAspectRatio=\"xMidYMid slice\" style={{width:'100%',height:'100%'}}>\n <defs>\n <pattern id=\"sg\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke={gc} strokeWidth=\"1.1\"\/>\n <\/pattern>\n <pattern id=\"lg\" width=\"200\" height=\"200\" patternUnits=\"userSpaceOnUse\">\n <rect width=\"200\" height=\"200\" fill=\"url(#sg)\"\/>\n <path d=\"M 200 0 L 0 0 0 200\" fill=\"none\" stroke={ac} strokeWidth=\"1.5\"\/>\n <\/pattern>\n <\/defs>\n\n <rect width=\"100%\" height=\"100%\" fill=\"url(#lg)\"\/>\n\n <line x1=\"200\" y1=\"0\" x2=\"200\" y2=\"700\" stroke={ac} strokeWidth=\"1.8\" strokeDasharray=\"6 5\">\n <animate attributeName=\"opacity\" values=\".55;.95;.55\" dur=\"4.5s\" repeatCount=\"indefinite\"\/>\n <\/line>\n <line x1=\"0\" y1=\"210\" x2=\"400\" y2=\"210\" stroke={ac} strokeWidth=\"1.8\" strokeDasharray=\"6 5\">\n <animate attributeName=\"opacity\" values=\".55;.95;.55\" dur=\"4.5s\" begin=\"2s\" repeatCount=\"indefinite\"\/>\n <\/line>\n\n <text x=\"204\" y=\"16\" fill={dc} fontSize=\"10\" fontFamily=\"monospace\" opacity=\".8\">+N<\/text>\n <text x=\"204\" y=\"692\" fill={dc} fontSize=\"10\" fontFamily=\"monospace\" opacity=\".8\">-S<\/text>\n <text x=\"366\" y=\"207\" fill={dc} fontSize=\"10\" fontFamily=\"monospace\" opacity=\".8\">+E<\/text>\n <text x=\"5\" y=\"207\" fill={dc} fontSize=\"10\" fontFamily=\"monospace\" opacity=\".8\">-W<\/text>\n\n <circle cx=\"200\" cy=\"210\" r=\"4.5\" fill={dc}>\n <animate attributeName=\"r\" values=\"3.5;6.5;3.5\" dur=\"3s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <circle cx=\"200\" cy=\"210\" r=\"13\" fill=\"none\" stroke={dc} strokeWidth=\"1.1\">\n <animate attributeName=\"r\" values=\"9;19;9\" dur=\"3s\" repeatCount=\"indefinite\"\/>\n <animate attributeName=\"opacity\" values=\".35;0;.35\" dur=\"3s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n\n {[-2,-1,1,2].map((n,i)=>{\n const y=210+n*80;\n return<g key={i}>\n <line x1=\"194\" y1={y} x2=\"206\" y2={y} stroke={dc} strokeWidth=\"1.4\" opacity=\".7\"\/>\n <text x=\"166\" y={y+4} fill={dc} fontSize=\"8\" fontFamily=\"monospace\" opacity=\".65\">{-n*2}<\/text>\n <\/g>;\n })}\n\n {[-2,-1,1,2].map((n,i)=>{\n const x=200+n*80;\n return<g key={i}>\n <line x1={x} y1=\"204\" x2={x} y2=\"216\" stroke={dc} strokeWidth=\"1.4\" opacity=\".7\"\/>\n <text x={x-5} y=\"229\" fill={dc} fontSize=\"8\" fontFamily=\"monospace\" opacity=\".65\">{n*2}<\/text>\n <\/g>;\n })}\n\n {mEdges.map(([a,b],i)=>\n <line key={i} x1={mPts[a][0]} y1={mPts[a][1]} x2={mPts[b][0]} y2={mPts[b][1]} stroke={tc} strokeWidth=\"1.1\" strokeDasharray=\"4 6\" opacity=\".65\">\n <animate attributeName=\"stroke-dashoffset\" from=\"0\" to=\"-70\" dur={`${13+i*.9}s`} repeatCount=\"indefinite\"\/>\n <\/line>\n )}\n\n {mPts.map(([x,y],i)=>\n <g key={i}>\n <circle cx={x} cy={y} r=\"3.4\" fill={dc} opacity=\".62\">\n <animate attributeName=\"opacity\" values=\".35;.75;.35\" dur={`${3.5+i*.35}s`} repeatCount=\"indefinite\"\/>\n <\/circle>\n <circle cx={x} cy={y} r=\"9\" fill=\"none\" stroke={dc} strokeWidth=\"1\">\n <animate attributeName=\"r\" values={`5;${12+i*.4};5`} dur={`${4+i*.3}s`} repeatCount=\"indefinite\"\/>\n <animate attributeName=\"opacity\" values=\".28;0;.28\" dur={`${4+i*.3}s`} repeatCount=\"indefinite\"\/>\n <\/circle>\n <\/g>\n )}\n\n <ellipse cx=\"200\" cy=\"420\" rx=\"110\" ry=\"72\" fill=\"none\" stroke={tc} strokeWidth=\".95\" strokeDasharray=\"3 8\" opacity=\".28\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 200 420\" to=\"360 200 420\" dur=\"55s\" repeatCount=\"indefinite\"\/>\n <\/ellipse>\n <\/svg>\n\n <StaticSatellite x=\"7%\" y=\"13%\" scale={0.8} rotate={-18} opacity={0.28}\/>\n <StaticSatellite x=\"78%\" y=\"18%\" scale={0.95} rotate={22} opacity={0.26}\/>\n <StaticSatellite x=\"70%\" y=\"72%\" scale={0.75} rotate={-8} opacity={0.22}\/>\n <\/div>\n );\n }\n\n const triPts=[[160,110],[360,160],[140,320],[400,290],[230,460],[840,90],[1040,185],[880,330],[1060,400],[760,460],[530,145],[670,265],[490,400],[700,480],[590,620],[1140,560],[1100,300],[980,650],[70,600],[200,720]];\n const triEdges=[[0,1],[1,2],[2,0],[0,3],[3,4],[4,2],[1,3],[5,6],[6,7],[7,5],[5,8],[8,9],[9,7],[6,8],[10,11],[11,12],[12,10],[10,13],[13,14],[14,12],[15,16],[16,17],[3,10],[7,11],[2,12]];\n\n return(\n <div style={{position:'fixed',inset:0,zIndex:0,pointerEvents:'none',overflow:'hidden'}} aria-hidden=\"true\">\n <svg viewBox=\"0 0 1200 900\" preserveAspectRatio=\"xMidYMid slice\" style={{width:'100%',height:'100%'}}>\n <defs>\n <pattern id=\"sg\" width=\"50\" height=\"50\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M 50 0 L 0 0 0 50\" fill=\"none\" stroke={gc} strokeWidth=\"1.05\"\/>\n <\/pattern>\n <pattern id=\"lg\" width=\"250\" height=\"250\" patternUnits=\"userSpaceOnUse\">\n <rect width=\"250\" height=\"250\" fill=\"url(#sg)\"\/>\n <path d=\"M 250 0 L 0 0 0 250\" fill=\"none\" stroke={ac} strokeWidth=\"1.55\"\/>\n <\/pattern>\n <\/defs>\n\n <rect width=\"100%\" height=\"100%\" fill=\"url(#lg)\"\/>\n\n <line x1=\"600\" y1=\"0\" x2=\"600\" y2=\"900\" stroke={ac} strokeWidth=\"2\" strokeDasharray=\"7 6\">\n <animate attributeName=\"opacity\" values=\".58;.98;.58\" dur=\"4.5s\" repeatCount=\"indefinite\"\/>\n <\/line>\n <line x1=\"0\" y1=\"450\" x2=\"1200\" y2=\"450\" stroke={ac} strokeWidth=\"2\" strokeDasharray=\"7 6\">\n <animate attributeName=\"opacity\" values=\".58;.98;.58\" dur=\"4.5s\" begin=\"2.2s\" repeatCount=\"indefinite\"\/>\n <\/line>\n\n {['+N','\u2013S','+E','\u2013W'].map((l,i)=>{\n const p=[[606,22],[606,884],[1174,446],[8,446]][i];\n return <text key={i} x={p[0]} y={p[1]} fill={dc} fontSize=\"11\" fontFamily=\"monospace\" opacity=\".82\">{l}<\/text>;\n })}\n\n <circle cx=\"600\" cy=\"450\" r=\"5.3\" fill={dc}>\n <animate attributeName=\"r\" values=\"4.2;7.5;4.2\" dur=\"3.2s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <circle cx=\"600\" cy=\"450\" r=\"15\" fill=\"none\" stroke={dc} strokeWidth=\"1.3\">\n <animate attributeName=\"r\" values=\"10;21;10\" dur=\"3.2s\" repeatCount=\"indefinite\"\/>\n <animate attributeName=\"opacity\" values=\".35;0;.35\" dur=\"3.2s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n\n {[-4,-3,-2,-1,1,2,3,4].map((n,i)=>{\n const x=600+n*100;\n return<g key={i}>\n <line x1={x} y1=\"443\" x2={x} y2=\"457\" stroke={dc} strokeWidth=\"1.7\" opacity=\".76\"\/>\n <text x={x-7} y=\"469\" fill={dc} fontSize=\"8.5\" fontFamily=\"monospace\" opacity=\".68\">{n*2}<\/text>\n <\/g>;\n })}\n\n {[-3,-2,-1,1,2,3].map((n,i)=>{\n const y=450+n*100;\n return<g key={i}>\n <line x1=\"593\" y1={y} x2=\"607\" y2={y} stroke={dc} strokeWidth=\"1.7\" opacity=\".76\"\/>\n <text x=\"569\" y={y+4} fill={dc} fontSize=\"8.5\" fontFamily=\"monospace\" opacity=\".68\">{-n*2}<\/text>\n <\/g>;\n })}\n\n {triEdges.map(([a,b],i)=>\n <line key={i} x1={triPts[a][0]} y1={triPts[a][1]} x2={triPts[b][0]} y2={triPts[b][1]} stroke={tc} strokeWidth=\"1.2\" strokeDasharray=\"5 7\" opacity=\".72\">\n <animate attributeName=\"stroke-dashoffset\" from=\"0\" to=\"-80\" dur={`${12+i*.6}s`} repeatCount=\"indefinite\"\/>\n <\/line>\n )}\n\n {triPts.map(([x,y],i)=>\n <g key={i}>\n <circle cx={x} cy={y} r=\"3.8\" fill={dc} opacity=\".7\">\n <animate attributeName=\"opacity\" values=\".4;.82;.4\" dur={`${3+i*.25}s`} repeatCount=\"indefinite\"\/>\n <\/circle>\n <circle cx={x} cy={y} r=\"9.5\" fill=\"none\" stroke={dc} strokeWidth=\"1.1\">\n <animate attributeName=\"r\" values={`6;${13+i*.3};6`} dur={`${4+i*.28}s`} repeatCount=\"indefinite\"\/>\n <animate attributeName=\"opacity\" values=\".32;0;.32\" dur={`${4+i*.28}s`} repeatCount=\"indefinite\"\/>\n <\/circle>\n <\/g>\n )}\n\n {[[290,270,170,115,'50s'],[920,300,150,100,'45s'],[590,630,130,90,'55s']].map(([cx,cy,rx,ry,dur],i)=>\n <g key={i}>\n <ellipse cx={cx} cy={cy} rx={rx} ry={ry} fill=\"none\" stroke={tc} strokeWidth=\".95\" strokeDasharray=\"3 9\" opacity=\".30\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from={`0 ${cx} ${cy}`} to={`360 ${cx} ${cy}`} dur={dur} repeatCount=\"indefinite\"\/>\n <\/ellipse>\n <ellipse cx={cx} cy={cy} rx={rx*.62} ry={ry*.62} fill=\"none\" stroke={tc} strokeWidth=\".9\" strokeDasharray=\"3 9\" opacity=\".22\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from={`0 ${cx} ${cy}`} to={`-360 ${cx} ${cy}`} dur={String(parseInt(dur)*.75)+'s'} repeatCount=\"indefinite\"\/>\n <\/ellipse>\n <\/g>\n )}\n\n <g opacity=\".30\">\n <line x1=\"50\" y1=\"820\" x2=\"220\" y2=\"820\" stroke={ac} strokeWidth=\"1.6\"\/>\n <line x1=\"50\" y1=\"815\" x2=\"50\" y2=\"825\" stroke={ac} strokeWidth=\"1.6\"\/>\n <line x1=\"220\" y1=\"815\" x2=\"220\" y2=\"825\" stroke={ac} strokeWidth=\"1.6\"\/>\n <text x=\"120\" y=\"811\" fill={ac} fontSize=\"9.5\" fontFamily=\"monospace\" textAnchor=\"middle\">135.42 m<\/text>\n <\/g>\n <\/svg>\n\n <StaticSatellite x=\"8%\" y=\"10%\" scale={1} rotate={-16} opacity={0.30}\/>\n <StaticSatellite x=\"82%\" y=\"12%\" scale={1.05} rotate={18} opacity={0.26}\/>\n <StaticSatellite x=\"70%\" y=\"68%\" scale={0.9} rotate={-12} opacity={0.22}\/>\n <StaticSatellite x=\"18%\" y=\"76%\" scale={0.78} rotate={14} opacity={0.20}\/>\n <\/div>\n );\n};\n\n\/* \u2500\u2500 Ambient glow \u2500\u2500 *\/\nconst GlowBg=()=>(\n <div style={{position:'fixed',inset:0,zIndex:0,pointerEvents:'none',overflow:'hidden'}} aria-hidden=\"true\">\n <div style={{position:'absolute',top:'7%',left:'9%',width:'65vw',maxWidth:820,height:'55vw',maxHeight:560,background:'radial-gradient(circle,rgba(37,99,235,.11),transparent 70%)',borderRadius:'50%',filter:'blur(90px)',animation:'pulseSlow 10s ease-in-out infinite'}}\/>\n <div style={{position:'absolute',top:'12%',right:'7%',width:'60vw',maxWidth:750,height:'50vw',maxHeight:500,background:'radial-gradient(circle,rgba(245,158,11,.07),transparent 70%)',borderRadius:'50%',filter:'blur(100px)',animation:'pulseSlow 12s ease-in-out infinite 2s'}}\/>\n <\/div>\n);\n\n\/* \u2500\u2500 Compass \u2500\u2500 *\/\nconst Compass=({size=78})=>(\n <div style={{position:'relative',width:size,height:size}}>\n <motion.div style={{position:'absolute',inset:0,borderRadius:'50%',border:'3px solid rgba(37,99,235,.22)'}} animate={{rotate:360}} transition={{duration:22,repeat:Infinity,ease:'linear'}}\/>\n <motion.div style={{position:'absolute',inset:8,borderRadius:'50%',border:'2px solid rgba(37,99,235,.30)',display:'flex',alignItems:'center',justifyContent:'center'}} animate={{rotate:-360}} transition={{duration:16,repeat:Infinity,ease:'linear'}}>\n {[0,90,180,270].map(d=><div key={d} style={{position:'absolute',width:2.5,height:8,background:'rgba(29,78,216,.75)',transform:`rotate(${d}deg) translateY(${-size*.34}px)`}}\/>)}\n <\/motion.div>\n <motion.div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}} animate={{rotate:[0,12,-12,0]}} transition={{duration:4.5,repeat:Infinity,ease:'easeInOut'}}>\n <div style={{position:'relative',width:2.5,height:size*.64}}>\n <div style={{position:'absolute',top:0,left:0,right:0,height:'50%',background:'linear-gradient(to bottom,#ef4444,#dc2626)',clipPath:'polygon(50% 0%,0% 100%,100% 100%)'}}\/>\n <div style={{position:'absolute',bottom:0,left:0,right:0,height:'50%',background:'linear-gradient(to top,#d1d5db,#9ca3af)',clipPath:'polygon(50% 100%,0% 0%,100% 0%)'}}\/>\n <\/div>\n <\/motion.div>\n <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}}>\n <div style={{width:9,height:9,borderRadius:'50%',background:'#1d4ed8',boxShadow:'0 0 10px rgba(37,99,235,.5)'}}\/>\n <\/div>\n <\/div>\n);\n\n\/* \u2500\u2500 Coordinate display \u2500\u2500 *\/\nconst CoordDisplay=()=>{\n const[c,setC]=useState({lat:45.817557,lng:15.977773});\n useEffect(()=>{\n const t=setInterval(()=>{\n setC({\n lat:45.817557+(Math.random()-.5)*.003,\n lng:15.977773+(Math.random()-.5)*.003\n });\n },2200);\n return()=>clearInterval(t);\n },[]);\n\n return(\n <motion.div\n initial={{opacity:0,scale:.85}}\n animate={{opacity:1,scale:1}}\n transition={{delay:.4}}\n style={{\n display:'inline-flex',\n flexDirection:'column',\n gap:5,\n padding:'13px 16px',\n borderRadius:14,\n background:'rgba(6,12,30,.88)',\n backdropFilter:'blur(12px)',\n border:'1px solid rgba(37,99,235,.38)',\n boxShadow:'0 8px 32px rgba(0,0,0,.32)',\n color:'white',\n fontFamily:'monospace',\n fontSize:11\n }}\n >\n <div style={{display:'flex',gap:8,alignItems:'center'}}>\n <span style={{color:'#93c5fd'}}>LAT:<\/span>\n <motion.span key={c.lat} initial={{opacity:0,y:-6}} animate={{opacity:1,y:0}} style={{fontWeight:600}}>\n {c.lat.toFixed(6)}\u00b0\n <\/motion.span>\n <\/div>\n <div style={{display:'flex',gap:8,alignItems:'center'}}>\n <span style={{color:'#93c5fd'}}>LNG:<\/span>\n <motion.span key={c.lng} initial={{opacity:0,y:-6}} animate={{opacity:1,y:0}} style={{fontWeight:600}}>\n {c.lng.toFixed(6)}\u00b0\n <\/motion.span>\n <\/div>\n <div style={{display:'flex',gap:6,alignItems:'center',borderTop:'1px solid rgba(37,99,235,.3)',paddingTop:7,marginTop:3}}>\n <motion.div style={{width:7,height:7,borderRadius:'50%',background:'#4ade80'}} animate={{opacity:[1,.3,1]}} transition={{duration:1.4,repeat:Infinity}}\/>\n <span style={{fontSize:10,color:'#bfdbfe'}}>GPS AKTIVAN<\/span>\n <\/div>\n <\/motion.div>\n );\n};\n\n\/* \u2500\u2500 Survey pin \u2500\u2500 *\/\nconst Pin=({x,y,delay=0})=>(\n <motion.div style={{position:'absolute',left:x,top:y,pointerEvents:'none'}} initial={{opacity:0,y:-40,scale:0}} animate={{opacity:1,y:0,scale:1}} transition={{delay,type:'spring',stiffness:200}}>\n <motion.div animate={{y:[0,-10,0]}} transition={{duration:2.2,repeat:Infinity,delay}} style={{color:'#ef4444',filter:'drop-shadow(0 2px 8px rgba(239,68,68,.5))'}}>\n <PinIcon\/>\n <\/motion.div>\n <motion.div style={{position:'absolute',bottom:-2,left:'50%',transform:'translateX(-50%)',width:11,height:11,borderRadius:'50%',background:'rgba(239,68,68,.18)'}} animate={{scale:[1,1.7,1],opacity:[.5,0,.5]}} transition={{duration:2.2,repeat:Infinity,delay}}\/>\n <\/motion.div>\n);\n\n\/* \u2500\u2500 Sun \u2500\u2500 *\/\nconst Sun=()=>(\n <div style={{position:'absolute',top:70,right:72,pointerEvents:'none',animation:'floatY 6s ease-in-out infinite'}}>\n <svg width=\"118\" height=\"118\" viewBox=\"0 0 118 118\">\n <g style={{transformOrigin:'59px 59px',animation:'spinSlow 28s linear infinite'}}>\n {[...Array(12)].map((_,i)=>{\n const r=(i*30)*Math.PI\/180;\n return<line key={i} x1={59+Math.cos(r)*27} y1={59+Math.sin(r)*27} x2={59+Math.cos(r)*44} y2={59+Math.sin(r)*44} stroke=\"rgba(250,204,21,.72)\" strokeWidth=\"3\" strokeLinecap=\"round\"\/>;\n })}\n <\/g>\n <circle cx=\"59\" cy=\"59\" r=\"21\" fill=\"rgba(250,204,21,.92)\">\n <animate attributeName=\"r\" values=\"19;23;19\" dur=\"4s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <circle cx=\"59\" cy=\"59\" r=\"33\" fill=\"rgba(250,204,21,.10)\"\/>\n <\/svg>\n <\/div>\n);\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst Hero=({isMobile})=>(\n <section style={{position:'relative',overflow:'hidden',minHeight:isMobile?'100svh':'88vh',display:'flex',alignItems:'center',padding:isMobile?'80px 0 52px':'108px 0 80px'}}>\n <motion.div style={{position:'absolute',top:-100,right:-100,width:isMobile?240:360,height:isMobile?240:360,background:'rgba(37,99,235,.08)',borderRadius:'50%',filter:'blur(70px)'}} animate={{scale:[1,1.2,1],opacity:[.4,.62,.4]}} transition={{duration:9,repeat:Infinity}}\/>\n <motion.div style={{position:'absolute',bottom:-80,left:-60,width:isMobile?200:300,height:isMobile?200:300,background:'rgba(245,158,11,.07)',borderRadius:'50%',filter:'blur(70px)'}} animate={{scale:[1,1.3,1],opacity:[.3,.5,.3]}} transition={{duration:11,repeat:Infinity,delay:1.5}}\/>\n\n {!isMobile&&<Sun\/>}\n {!isMobile&&<div style={{position:'absolute',top:36,left:36,opacity:.55,animation:'floatY 5s ease-in-out infinite'}}><Compass size={78}\/><\/div>}\n {!isMobile&&<div style={{position:'absolute',bottom:48,left:24}}><CoordDisplay\/><\/div>}\n {!isMobile&&<Pin x=\"13%\" y=\"66%\" delay={.6}\/>}\n {!isMobile&&<Pin x=\"83%\" y=\"74%\" delay={1.1}\/>}\n\n <div style={{maxWidth:1200,margin:'0 auto',padding:`0 ${isMobile?20:24}px`,position:'relative',zIndex:10,width:'100%'}}>\n <motion.div style={{maxWidth:860,margin:'0 auto',textAlign:'center'}} initial={{opacity:0,y:32}} animate={{opacity:1,y:0}} transition={{duration:.75}}>\n\n {isMobile&&(\n <motion.div initial={{opacity:0,scale:.8}} animate={{opacity:1,scale:1}} transition={{delay:.1}} style={{display:'flex',justifyContent:'center',marginBottom:20,opacity:.6}}>\n <Compass size={52}\/>\n <\/motion.div>\n )}\n\n <motion.div className=\"badge\" style={{display:'inline-flex',alignItems:'center',gap:10,padding:'8px 18px',borderRadius:999,marginBottom:isMobile?20:28}} initial={{opacity:0,y:12}} animate={{opacity:1,y:0}} transition={{delay:.12}}>\n <motion.span style={{width:10,height:10,borderRadius:'50%',background:'#f59e0b',display:'inline-block'}} animate={{scale:[1,1.22,1]}} transition={{duration:1.5,repeat:Infinity}}\/>\n <span style={{fontSize:isMobile?13:15,fontWeight:500,color:'var(--text)'}}>Video lekcije • Online<\/span>\n <\/motion.div>\n\n <motion.h1 style={{fontSize:isMobile?'clamp(1.85rem,7vw,2.4rem)':'clamp(2.2rem,5vw,3.8rem)',fontWeight:800,lineHeight:1.1,letterSpacing:'-.013em',marginBottom:isMobile?16:22,color:'var(--text)'}} initial={{opacity:0,y:20}} animate={{opacity:1,y:0}} transition={{delay:.22,duration:.8}}>\n Koordino u\u010di mirno i to\u010dno.\n <\/motion.h1>\n\n <motion.p style={{fontSize:isMobile?'0.96rem':'clamp(1rem,2vw,1.2rem)',maxWidth:600,margin:'0 auto',marginBottom:isMobile?24:32,color:'var(--soft)',lineHeight:1.7}} initial={{opacity:0,y:16}} animate={{opacity:1,y:0}} transition={{delay:.36}}>\n Video lekcije i pripreme za klju\u010dne teme. U\u010di svojim tempom - kad god \u017eeli\u0161.\n <\/motion.p>\n\n <motion.div initial={{opacity:0,scale:.92}} animate={{opacity:1,scale:1}} transition={{delay:.54}} style={{marginBottom:isMobile?28:44}}>\n <motion.a href=\"https:\/\/koordino.com.hr\/index.php\/pripreme\/\" className=\"cta-glow\" style={{display:'inline-flex',alignItems:'center',gap:12,padding:isMobile?'13px 26px':'16px 38px',borderRadius:24,background:'linear-gradient(135deg,#1d4ed8,#2563eb,#3b82f6)',color:'white',fontWeight:700,fontSize:isMobile?16:18,textDecoration:'none',fontFamily:\"'Plus Jakarta Sans',sans-serif\"}} whileHover={{scale:1.05,y:-4}} whileTap={{scale:.97}}>\n <motion.span style={{width:isMobile?32:40,height:isMobile?32:40,borderRadius:11,background:'rgba(255,255,255,.12)',display:'flex',alignItems:'center',justifyContent:'center'}} animate={{rotate:[0,12,-12,0]}} transition={{duration:2.2,repeat:Infinity}}>\n <PlayIcon\/>\n <\/motion.span>\n Pogledaj pripreme\n <\/motion.a>\n <\/motion.div>\n\n <motion.div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'repeat(3,1fr)',gap:isMobile?9:13,maxWidth:isMobile?'100%':820,margin:'0 auto'}} initial={{opacity:0,y:14}} animate={{opacity:1,y:0}} transition={{delay:.72}}>\n {[{i:<PlayIcon\/>,t:'Video lekcije'},{i:<ChkIcon\/>,t:'Zadatci i rje\u0161enja'},{i:<FileIcon\/>,t:'Organizirano po temama'}].map((item,k)=>(\n <motion.div key={k} className=\"card\" style={{borderRadius:16,padding:isMobile?'12px 15px':'14px 18px',display:'flex',alignItems:'center',gap:11}} whileHover={{scale:1.03,y:-2}} transition={{type:'spring',stiffness:300}}>\n <div style={{width:isMobile?36:42,height:isMobile?36:42,borderRadius:11,background:'rgba(37,99,235,.10)',color:'var(--blue)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>\n {item.i}\n <\/div>\n <span style={{fontWeight:600,fontSize:isMobile?13.5:14.5,color:'var(--text)',fontFamily:\"'Plus Jakarta Sans',sans-serif\"}}>\n {item.t}\n <\/span>\n <\/motion.div>\n ))}\n <\/motion.div>\n\n {isMobile&&(\n <motion.div initial={{opacity:0,y:12}} animate={{opacity:1,y:0}} transition={{delay:.88}} style={{display:'flex',justifyContent:'center',marginTop:24}}>\n <CoordDisplay\/>\n <\/motion.div>\n )}\n\n <\/motion.div>\n <\/div>\n <\/section>\n);\n\n\/* \u2500\u2500 Feature card \u2500\u2500 *\/\nconst FeatCard=({f,side,idx,isMobile})=>{\n const{ref,inView}=useInView(.12);\n const isL=side==='left';\n\n const bgEl=[\n <div style={{position:'absolute',inset:0,overflow:'hidden',opacity:.09,pointerEvents:'none'}}>\n <svg width=\"100%\" height=\"100%\">\n <defs>\n <pattern id={`cg${idx}`} width=\"26\" height=\"26\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M 26 0 L 0 0 0 26\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\".8\"\/>\n <\/pattern>\n <\/defs>\n <rect width=\"100%\" height=\"100%\" fill={`url(#cg${idx})`} style={{color:'var(--blue)'}}\/>\n <\/svg>\n <\/div>,\n <div style={{position:'absolute',inset:0,overflow:'hidden',pointerEvents:'none'}}>\n {[88,60,36].map((r,i)=><div key={i} style={{position:'absolute',width:r*2,height:r*2,borderRadius:'50%',border:'1.5px solid var(--border)',right:14-i*10,top:'50%',transform:'translateY(-50%)'}}\/>)}\n <\/div>,\n <div style={{position:'absolute',top:13,right:13,opacity:.13,pointerEvents:'none'}}>\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" style={{color:'var(--blue)'}}>\n <circle cx=\"32\" cy=\"32\" r=\"26\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\"\/>\n {[...Array(12)].map((_,i)=>{\n const a=i*30,rr=a*Math.PI\/180,l=i%3===0?6.5:3.5;\n return<line key={i} x1={32+Math.cos(rr)*18} y1={32+Math.sin(rr)*18} x2={32+Math.cos(rr)*(18+l)} y2={32+Math.sin(rr)*(18+l)} stroke=\"currentColor\" strokeWidth={i%3===0?1.7:.9}\/>;\n }).filter((_,i)=>i!==0)}\n <line x1=\"32\" y1=\"32\" x2=\"32\" y2=\"11\" stroke=\"currentColor\" strokeWidth=\"1.7\" strokeLinecap=\"round\"\/>\n <line x1=\"32\" y1=\"32\" x2=\"47\" y2=\"40\" stroke=\"currentColor\" strokeWidth=\"1.3\" strokeLinecap=\"round\"\/>\n <\/svg>\n <\/div>\n ][idx];\n\n const anim=isMobile\n ?{initial:{opacity:0,y:28},animate:inView?{opacity:1,y:0}:{}} \n :{initial:{opacity:0,x:isL?-56:56},animate:inView?{opacity:1,x:0}:{}}; \n\n return(\n <motion.div ref={ref} {...anim} transition={{duration:.66,ease:[.22,1,.36,1],delay:.05}}>\n <div\n className=\"card\"\n style={{\n borderRadius:22,\n padding:isMobile?'24px 20px':'32px 28px',\n position:'relative',\n overflow:'hidden',\n minHeight:isMobile?220:250\n }}\n >\n {bgEl}\n <div style={{position:'relative',zIndex:1}}>\n <motion.div\n style={{\n width:isMobile?52:58,\n height:isMobile?52:58,\n borderRadius:17,\n background:'linear-gradient(135deg,#1d4ed8,#3b82f6)',\n display:'flex',\n alignItems:'center',\n justifyContent:'center',\n marginBottom:16,\n boxShadow:'0 8px 22px rgba(37,99,235,.26)',\n color:'white'\n }}\n whileHover={{rotate:[0,-12,12,-12,0],scale:1.08}}\n transition={{duration:.5}}\n >\n {f.icon}\n <\/motion.div>\n\n <h3 style={{fontSize:isMobile?18:21,fontWeight:800,color:'var(--text)',marginBottom:12,fontFamily:\"'Plus Jakarta Sans',sans-serif\"}}>\n {f.title}\n <\/h3>\n\n <p style={{color:'var(--soft)',lineHeight:1.78,fontSize:isMobile?14.5:16}}>\n {f.desc}\n <\/p>\n <\/div>\n <\/div>\n <\/motion.div>\n );\n};\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FEATURES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst Features=({isMobile})=>{\n const{ref:tRef,inView:tIn}=useInView();\n const areaRef=useRef(null);\n const[prog,setProg]=useState(0);\n const[dots,setDots]=useState([false,false,false]);\n\n useEffect(()=>{\n const fn=()=>{\n if(!areaRef.current)return;\n const r=areaRef.current.getBoundingClientRect();\n const h=areaRef.current.offsetHeight;\n const wh=window.innerHeight;\n const p=Math.max(0,Math.min(1,(-r.top+wh*.38)\/(h-wh*.26)));\n setProg(p);\n setDots([p>.12,p>.44,p>.76]);\n };\n window.addEventListener('scroll',fn,{passive:true});\n fn();\n return()=>window.removeEventListener('scroll',fn);\n },[]);\n\n const feats=[\n {\n icon:<VidIcon\/>,\n title:'Video lekcije',\n desc:'Detaljno i jasno obra\u0111ene geodetske teme kroz pregledne video lekcije. Svaka cjelina vodi te korak po korak kroz va\u017ene pojmove, postupke i tipi\u010dne zadatke kako bi gradivo bilo lak\u0161e za pratiti, razumjeti i kasnije samostalno ponavljati.',\n side:'left'\n },\n {\n icon:<TgtIcon\/>,\n title:'Fokusirana priprema',\n desc:'AOGM, Instrumenti i uskoro GRO, Izmjere organizirani su pregledno i smisleno kako bi se mogao usmjeriti na ono \u0161to je stvarno va\u017eno. Manje tra\u017eenja materijala, a vi\u0161e konkretne pripreme kroz sadr\u017eaj koji prati ono \u0161to ti treba za sigurno u\u010denje i ponavljanje.',\n side:'right'\n },\n {\n icon:<ClkIcon\/>,\n title:'Fleksibilno u\u010denje',\n desc:'U\u010di kad tebi odgovara i vra\u0107aj se na lekcije koliko god puta \u017eeli\u0161. Materijali su dostupni u vlastitom ritmu, \u0161to ti omogu\u0107uje da sporije pro\u0111e\u0161 te\u017ee dijelove, a br\u017ee ponovi\u0161 ono \u0161to ve\u0107 razumije\u0161 i osje\u0107a\u0161 sigurnije.',\n side:'left'\n },\n ];\n\n const dotPcts=[16,50,84];\n\n return(\n <section style={{padding:isMobile?'56px 0 68px':'80px 0 100px',position:'relative'}} id=\"features\">\n <div style={{maxWidth:1200,margin:'0 auto',padding:`0 ${isMobile?20:24}px`}}>\n <motion.h2 ref={tRef} style={{fontSize:isMobile?'clamp(1.5rem,5.5vw,1.9rem)':'clamp(1.9rem,3.8vw,3.1rem)',fontWeight:800,textAlign:'center',color:'var(--text)',marginBottom:isMobile?40:68,letterSpacing:'-.012em'}} initial={{opacity:0,y:30}} animate={tIn?{opacity:1,y:0}:{}} transition={{duration:.62}}>\n Za\u0161to Koordino?\n <\/motion.h2>\n\n <div ref={areaRef} style={{position:'relative'}}>\n {!isMobile&&(\n <div className=\"tl-track\">\n <div className=\"tl-dashes\"\/>\n <div className=\"tl-fill\" style={{height:`${prog*100}%`}}\/>\n {dotPcts.map((pct,i)=><div key={i} className={`tl-dot ${dots[i]?'on':''}`} style={{top:`${pct}%`}}\/>)}\n <\/div>\n )}\n\n {isMobile&&(\n <div className=\"tl-mob\">\n <div className=\"tl-mob-dashes\"\/>\n <div className=\"tl-mob-fill\" style={{height:`${prog*100}%`}}\/>\n {dotPcts.map((pct,i)=><div key={i} className={`tl-mob-dot ${dots[i]?'on':''}`} style={{top:`${pct}%`}}\/>)}\n <\/div>\n )}\n\n {isMobile&&(\n <div style={{display:'flex',flexDirection:'column',gap:22,paddingLeft:42}}>\n {feats.map((f,i)=><FeatCard key={i} f={f} side={f.side} idx={i} isMobile={true}\/>)}\n <\/div>\n )}\n\n {!isMobile&&(\n <div style={{display:'flex',flexDirection:'column',gap:52}}>\n {feats.map((f,i)=>{\n const isL=f.side==='left';\n return(\n <div key={i} style={{position:'relative'}}>\n <div style={{position:'absolute',top:'50%',height:2,width:'7%',background:`repeating-linear-gradient(to right,var(--tl-track) 0,var(--tl-track) 5px,transparent 5px,transparent 10px)`,...(isL?{left:'calc(50% - 8px)'}:{right:'calc(50% - 8px)'})}}\/>\n <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:0}}>\n {isL\n ?(<><div style={{paddingRight:'calc(50% - 40px)'}}><FeatCard f={f} side=\"left\" idx={i} isMobile={false}\/><\/div><div\/><\/>)\n :(<><div\/><div style={{paddingLeft:'calc(50% - 40px)'}}><FeatCard f={f} side=\"right\" idx={i} isMobile={false}\/><\/div><\/>)}\n <\/div>\n <\/div>\n );\n })}\n <\/div>\n )}\n <\/div>\n <\/div>\n <\/section>\n );\n};\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FAQ\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst FAQ=({isMobile})=>{\n const{ref,inView}=useInView();\n const[open,setOpen]=useState(null);\n const[mascotJump,setMascotJump]=useState(false);\n\n const faqs=[\n {q:'Kako zapo\u010deti s gledanjem?',a:'Desno u gornjem kutu nalaze se opcije za prijavu i registraciju. Nakon \u0161to izradi\u0161 profil, javi nam se putem e-maila ili poruke kako bismo dogovorili na\u010din i vrijeme pla\u0107anja te omogu\u0107ili pristup video instrukcijama.'},\n {q:'Gdje su pripreme i predmeti?',a:'Klikni na \"Priprema\" u navigaciji - tamo su AOGM i instrumenti, a GRO se jo\u0161 uvijek obra\u0111uje.'},\n {q:'Mogu li gledati lekcije vi\u0161e puta?',a:'Da. Ideja i jest da se mo\u017ee\u0161 vra\u0107ati na dijelove lekcija koliko god puta treba.'},\n {q:'Radi li stranica na mobitelu?',a:'Da. Stranica je responzivna i prilago\u0111ena mobitelu, tabletu i ra\u010dunalu.'},\n ];\n\n const handleToggle=(i)=>{\n setOpen(prev=>prev===i?null:i);\n setMascotJump(false);\n requestAnimationFrame(()=>{\n requestAnimationFrame(()=>setMascotJump(true));\n setTimeout(()=>setMascotJump(false),600);\n });\n };\n\n return(\n <section style={{padding:isMobile?'56px 0 68px':'80px 0 100px'}} id=\"faq\">\n <div style={{maxWidth:1200,margin:'0 auto',padding:`0 ${isMobile?20:24}px`}}>\n <motion.div ref={ref} initial={{opacity:0,y:30}} animate={inView?{opacity:1,y:0}:{}} transition={{duration:.62}}>\n <h2 style={{fontSize:isMobile?'clamp(1.5rem,5.5vw,1.9rem)':'clamp(1.9rem,3.8vw,3.1rem)',fontWeight:800,textAlign:'center',color:'var(--text)',marginBottom:isMobile?18:22,letterSpacing:'-.012em'}}>\n \u010cesto postavljena pitanja\n <\/h2>\n\n <div style={{display:'flex',justifyContent:'center',marginBottom:isMobile?22:30}}>\n <div style={{display:'flex',alignItems:'center',gap:14,background:'rgba(255,255,255,.68)',border:'1px solid var(--border)',padding:isMobile?'10px 14px':'12px 16px',borderRadius:18,boxShadow:'var(--shadow)'}}>\n <img decoding=\"async\"\n src=\"https:\/\/koordino.com.hr\/wp-content\/uploads\/2026\/03\/cropped-logo_kooridno.png\"\n alt=\"Koordino zemljica\"\n className={mascotJump ? 'faq-mascot-bounce' : ''}\n style={{width:isMobile?44:54,height:isMobile?44:54,objectFit:'contain',flexShrink:0,filter:'drop-shadow(0 6px 14px rgba(37,99,235,.15))'}}\n \/>\n <div>\n <div style={{fontWeight:800,fontSize:isMobile?14:15,color:'var(--text)',fontFamily:\"'Plus Jakarta Sans',sans-serif\"}}>\n Koordino odgovara\n <\/div>\n <div style={{fontSize:isMobile?12.5:13.5,color:'var(--soft)'}}>\n Klikni na pitanje i vidi odgovor \ud83c\udf0d\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div style={{maxWidth:820,margin:'0 auto'}}>\n <div className=\"card\" style={{borderRadius:22,overflow:'hidden',position:'relative'}}>\n {faqs.map((faq,i)=>(\n <motion.div key={i} initial={{opacity:0,y:12}} animate={inView?{opacity:1,y:0}:{}} transition={{delay:i*.08}} style={{borderBottom:i<faqs.length-1?'1px solid var(--border)':'none'}}>\n <motion.button\n onClick={()=>handleToggle(i)}\n style={{width:'100%',padding:isMobile?'16px 18px':'19px 25px',display:'flex',alignItems:'center',justifyContent:'space-between',background:'transparent',border:'none',cursor:'pointer',textAlign:'left',gap:14}}\n whileHover={{backgroundColor:'rgba(37,99,235,.04)'}}\n >\n <div style={{display:'flex',alignItems:'center',gap:12,flex:1,minWidth:0}}>\n {open===i && !isMobile && (\n <motion.img\n src=\"https:\/\/koordino.com.hr\/wp-content\/uploads\/2026\/03\/cropped-logo_kooridno.png\"\n alt=\"\"\n initial={{scale:.8,opacity:0}}\n animate={{scale:1,opacity:1,y:[0,-3,0]}}\n transition={{duration:.4}}\n style={{width:34,height:34,objectFit:'contain',flexShrink:0}}\n \/>\n )}\n <span style={{fontWeight:700,color:'var(--text)',fontSize:isMobile?14.5:16,paddingRight:12,fontFamily:\"'Plus Jakarta Sans',sans-serif\"}}>\n {faq.q}\n <\/span>\n <\/div>\n\n <motion.div animate={{rotate:open===i?45:0}} transition={{duration:.25}} style={{flexShrink:0,width:30,height:30,borderRadius:8,background:'rgba(37,99,235,.08)',border:'1px solid var(--border)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--blue)'}}>\n <PlusIcon\/>\n <\/motion.div>\n <\/motion.button>\n\n <AnimatePresence>\n {open===i&&(\n <motion.div initial={{height:0,opacity:0}} animate={{height:'auto',opacity:1}} exit={{height:0,opacity:0}} transition={{duration:.28}} style={{overflow:'hidden'}}>\n <div style={{display:'flex',gap:14,alignItems:'flex-start',padding:isMobile?'0 18px 17px':'0 25px 19px'}}>\n {isMobile&&(\n <motion.img\n src=\"https:\/\/koordino.com.hr\/wp-content\/uploads\/2026\/03\/cropped-logo_kooridno.png\"\n alt=\"\"\n initial={{scale:.7,opacity:0}}\n animate={{scale:1,opacity:1,y:[0,-4,0]}}\n transition={{duration:.45}}\n style={{width:34,height:34,objectFit:'contain',flexShrink:0,marginTop:2}}\n \/>\n )}\n <p style={{color:'var(--soft)',lineHeight:1.68,fontSize:isMobile?14:15}}>\n {faq.a}\n <\/p>\n <\/div>\n <\/motion.div>\n )}\n <\/AnimatePresence>\n <\/motion.div>\n ))}\n <\/div>\n <\/div>\n <\/motion.div>\n <\/div>\n <\/section>\n );\n};\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONTACT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst Contact=({isMobile})=>{\n const{ref,inView}=useInView();\n return(\n <section style={{padding:isMobile?'16px 0 60px':'40px 0 86px'}} id=\"kontakt\">\n <div style={{maxWidth:1200,margin:'0 auto',padding:`0 ${isMobile?20:24}px`}}>\n <motion.div ref={ref} initial={{opacity:0,y:30}} animate={inView?{opacity:1,y:0}:{}} transition={{duration:.62}} style={{maxWidth:560,margin:'0 auto'}}>\n <div className=\"card\" style={{borderRadius:26,padding:isMobile?'28px 22px':'42px',position:'relative',overflow:'hidden',textAlign:'center'}}>\n <div style={{position:'absolute',top:-48,right:-48,width:150,height:150,background:'rgba(37,99,235,.07)',borderRadius:'50%',filter:'blur(42px)'}}\/>\n <div style={{position:'absolute',bottom:-34,left:-34,width:125,height:125,background:'rgba(245,158,11,.06)',borderRadius:'50%',filter:'blur(34px)'}}\/>\n <div style={{position:'relative',zIndex:1}}>\n <motion.div style={{width:54,height:54,borderRadius:17,background:'linear-gradient(135deg,#1d4ed8,#3b82f6)',display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 18px',boxShadow:'0 8px 22px rgba(37,99,235,.28)',color:'white'}} whileHover={{rotate:[0,-12,12,-12,0],scale:1.08}} transition={{duration:.5}}>\n <MailIcon\/>\n <\/motion.div>\n <h2 style={{fontSize:isMobile?'1.38rem':'clamp(1.5rem,2.8vw,2rem)',fontWeight:800,color:'var(--text)',marginBottom:10,fontFamily:\"'Plus Jakarta Sans',sans-serif\"}}>\n Kontaktiraj nas\n <\/h2>\n <p style={{color:'var(--soft)',marginBottom:24,fontSize:isMobile?14:15.5,lineHeight:1.64}}>\n Ima\u0161 pitanja? Slobodno nam se javi putem e-maila.\n <\/p>\n <motion.a href=\"mailto:koordinoinstr@gmail.com\" style={{display:'inline-flex',alignItems:'center',gap:9,padding:isMobile?'12px 20px':'14px 26px',borderRadius:999,background:'linear-gradient(135deg,#1d4ed8,#3b82f6)',color:'white',fontWeight:700,fontSize:isMobile?13.5:15,textDecoration:'none',boxShadow:'0 8px 24px rgba(37,99,235,.28)',flexWrap:'wrap',justifyContent:'center'}} whileHover={{scale:1.04,y:-3}} whileTap={{scale:.95}}>\n <MailIcon\/>koordinoinstr@gmail.com\n <\/motion.a>\n <\/div>\n <\/div>\n <\/motion.div>\n <\/div>\n <\/section>\n );\n};\n\n\/* \u2500\u2500 Footer \u2500\u2500 *\/\nconst Footer=({isMobile})=>(\n <footer style={{padding:'30px 0 42px',borderTop:'1px solid var(--border)'}}>\n <div style={{maxWidth:1200,margin:'0 auto',padding:`0 ${isMobile?20:24}px`,display:'flex',flexDirection:'column',alignItems:'center',gap:10}}>\n <p style={{color:'var(--soft)',fontSize:13,textAlign:'center'}}>© {new Date().getFullYear()} Koordino. Sva prava pridr\u017eana.<\/p>\n <p style={{color:'var(--soft)',fontSize:12,opacity:.6,textAlign:'center'}}>Geodetske instrukcije - u\u010dimo zajedno \ud83d\udcd0<\/p>\n <\/div>\n <\/footer>\n);\n\n\/* \u2500\u2500 Scroll to top \u2500\u2500 *\/\nconst ScrollTop=()=>{\n const[vis,setVis]=useState(false);\n\n useEffect(()=>{\n const f=()=>setVis(window.scrollY>260);\n window.addEventListener('scroll',f,{passive:true});\n f();\n return()=>window.removeEventListener('scroll',f);\n },[]);\n\n return(\n <AnimatePresence>\n {vis&&(\n <motion.button\n className=\"stb\"\n onClick={()=>window.scrollTo({top:0,behavior:'smooth'})}\n initial={{opacity:0,y:20,scale:.8}}\n animate={{opacity:1,y:0,scale:1}}\n exit={{opacity:0,y:20,scale:.8}}\n whileHover={{scale:1.1,y:-4}}\n whileTap={{scale:.9}}\n transition={{duration:.2}}\n aria-label=\"Natrag na vrh\"\n style={{display:'flex',alignItems:'center',justifyContent:'center'}}\n >\n <span style={{display:'flex',alignItems:'center',justifyContent:'center',color:'#fff'}}>\n <UpIcon\/>\n <\/span>\n <\/motion.button>\n )}\n <\/AnimatePresence>\n );\n};\n\n\/* \u2500\u2500 App \u2500\u2500 *\/\nconst App=()=>{\n const isMobile=useIsMobile();\n\n return(\n <>\n <GeodBg isMobile={isMobile}\/>\n <GlowBg\/>\n <ScrollTop\/>\n\n <div style={{position:'relative',zIndex:1}}>\n <Hero isMobile={isMobile}\/>\n <Features isMobile={isMobile}\/>\n <FAQ isMobile={isMobile}\/>\n <Contact isMobile={isMobile}\/>\n <Footer isMobile={isMobile}\/>\n <\/div>\n <\/>\n );\n};\n\nReactDOM.createRoot(document.getElementById('root')).render(<App\/>);\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Koordino Geodetske Instrukcije<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"disabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":19,"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":7,"date":"2026-03-16T17:32:08","date_gmt":"2026-03-16T17:32:08","guid":{"rendered":"https:\/\/koordino.com.hr\/?page_id=7"},"modified":"2026-03-23T17:18:24","modified_gmt":"2026-03-23T17:18:24","slug":"home-page","status":"publish","type":"page","link":"https:\/\/koordino.com.hr\/","title":{"rendered":"Home Page"},"content":{"rendered":"\n\n\n\n \n \n Koordino Geodetske Instrukcije<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap\" rel=\"stylesheet\">\n\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/framer-motion@11\/dist\/framer-motion.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n <style>\n *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}\n\n :root{\n --bg:#eef3ff;\n --text:#0d1e5c;\n --soft:#4a5d8a;\n --card:rgba(255,255,255,0.84);\n --border:rgba(37,99,235,0.17);\n --shadow:0 8px 32px rgba(37,99,235,0.10);\n --shadow-h:0 18px 48px rgba(37,99,235,0.18);\n\n \/* izra\u017eenija geodetska pozadina *\/\n --gc:rgba(37,99,235,0.085);\n --ac:rgba(37,99,235,0.245);\n --dc:rgba(37,99,235,0.36);\n --tc:rgba(37,99,235,0.29);\n\n --tl-track:rgba(37,99,235,0.18);\n --tl-fill:#2563eb;\n --tl-dot:#eef3ff;\n\n --blue:#2563eb;\n --accent:#f59e0b;\n }\n\n html{scroll-behavior:smooth;}\n body{\n font-family:'DM Sans',-apple-system,sans-serif;\n background:var(--bg);\n color:var(--text);\n overflow-x:hidden;\n }\n h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;}\n\n .card{\n background:var(--card);\n backdrop-filter:blur(16px);\n -webkit-backdrop-filter:blur(16px);\n border:1px solid var(--border);\n box-shadow:var(--shadow);\n transition:background .35s,border-color .35s,box-shadow .3s,transform .28s;\n }\n .card:hover{box-shadow:var(--shadow-h);transform:translateY(-4px);}\n\n .stb{\n position:fixed;\n bottom:1.5rem;\n right:1.25rem;\n z-index:120;\n width:52px;\n height:52px;\n border-radius:14px;\n background:linear-gradient(135deg,#1d4ed8,#3b82f6);\n color:#fff;\n border:none;\n cursor:pointer;\n display:flex;\n align-items:center;\n justify-content:center;\n box-shadow:0 8px 24px rgba(37,99,235,.40);\n }\n\n .badge{\n background:rgba(255,226,130,.22);\n border:1px solid rgba(230,175,0,.30);\n }\n\n @keyframes ctaGlow{\n 0%,100%{box-shadow:0 14px 40px rgba(37,99,235,.28);}\n 50%{box-shadow:0 14px 40px rgba(37,99,235,.52),0 0 28px rgba(59,130,246,.26);}\n }\n .cta-glow{animation:ctaGlow 2.6s ease-in-out infinite;}\n\n @keyframes pulseSlow{\n 0%,100%{opacity:.3;transform:scale(1);}\n 50%{opacity:.55;transform:scale(1.06);}\n }\n @keyframes floatY{\n 0%,100%{transform:translateY(0);}\n 50%{transform:translateY(-10px);}\n }\n @keyframes spinSlow{to{transform:rotate(360deg);}}\n @keyframes faqBounce{\n 0%{transform:translateY(0) rotate(0deg);}\n 30%{transform:translateY(-8px) rotate(-4deg);}\n 60%{transform:translateY(0) rotate(3deg);}\n 100%{transform:translateY(0) rotate(0deg);}\n }\n .faq-mascot-bounce{animation:faqBounce .55s ease;}\n\n \/* Desktop timeline *\/\n .tl-track{\n position:absolute;left:50%;top:0;bottom:0;width:2px;\n transform:translateX(-50%);pointer-events:none;z-index:2;\n }\n .tl-dashes{\n position:absolute;inset:0;\n background:repeating-linear-gradient(to bottom,var(--tl-track) 0,var(--tl-track) 8px,transparent 8px,transparent 18px);\n }\n .tl-fill{\n position:absolute;top:0;left:0;right:0;\n background:linear-gradient(to bottom,var(--tl-fill),rgba(59,130,246,.4));\n transition:height .1s linear;border-radius:2px;\n }\n .tl-dot{\n position:absolute;left:50%;width:14px;height:14px;border-radius:50%;\n transform:translate(-50%,-50%);\n border:2px solid var(--tl-fill);background:var(--tl-dot);\n transition:background .3s,transform .3s,box-shadow .3s;z-index:5;\n }\n .tl-dot.on{\n background:var(--tl-fill);\n transform:translate(-50%,-50%)scale(1.4);\n box-shadow:0 0 0 6px rgba(37,99,235,.14);\n }\n\n \/* Mobile timeline *\/\n .tl-mob{\n position:absolute;left:18px;top:0;bottom:0;width:2px;\n pointer-events:none;z-index:2;\n }\n .tl-mob-dashes{\n position:absolute;inset:0;\n background:repeating-linear-gradient(to bottom,var(--tl-track) 0,var(--tl-track) 7px,transparent 7px,transparent 15px);\n }\n .tl-mob-fill{\n position:absolute;top:0;left:0;right:0;\n background:linear-gradient(to bottom,var(--tl-fill),rgba(59,130,246,.38));\n transition:height .1s linear;border-radius:2px;\n }\n .tl-mob-dot{\n position:absolute;left:50%;width:11px;height:11px;border-radius:50%;\n transform:translate(-50%,-50%);\n border:2px solid var(--tl-fill);background:var(--tl-dot);\n transition:background .3s,transform .3s,box-shadow .3s;z-index:5;\n }\n .tl-mob-dot.on{\n background:var(--tl-fill);\n transform:translate(-50%,-50%)scale(1.35);\n box-shadow:0 0 0 4px rgba(37,99,235,.13);\n }\n <\/style>\n<\/head>\n<body>\n<div id=\"root\"><\/div>\n\n<script type=\"text\/babel\">\nconst{useState,useEffect,useRef}=React;\nconst{motion,AnimatePresence}=Motion;\n\nfunction useInView(t=.15){\n const r=useRef(null);\n const[v,setV]=useState(false);\n\n useEffect(()=>{\n const o=new IntersectionObserver(([e])=>{\n if(e.isIntersecting)setV(true);\n },{threshold:t});\n\n if(r.current)o.observe(r.current);\n return()=>{if(r.current)o.unobserve(r.current);};\n });\n\n return{ref:r,inView:v};\n}\n\nfunction useIsMobile(){\n const[m,setM]=useState(()=>window.innerWidth<768);\n useEffect(()=>{\n const f=()=>setM(window.innerWidth<768);\n window.addEventListener('resize',f,{passive:true});\n return()=>window.removeEventListener('resize',f);\n },[]);\n return m;\n}\n\n\/* Icons *\/\nconst PlayIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>;\nconst ChkIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>;\nconst FileIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/><\/svg>;\nconst VidIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polygon points=\"23 7 16 12 23 17 23 7\"\/><rect x=\"1\" y=\"5\" width=\"15\" height=\"14\" rx=\"2\"\/><\/svg>;\nconst TgtIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg>;\nconst ClkIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>;\nconst PlusIcon=()=><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>;\nconst MailIcon=()=><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>;\nconst PinIcon=()=><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/><\/svg>;\nconst UpIcon=()=>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M12 18V7\" stroke=\"currentColor\" strokeWidth=\"2.6\" strokeLinecap=\"round\"\/>\n <path d=\"M7 11.5L12 6L17 11.5\" stroke=\"currentColor\" strokeWidth=\"2.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\/>\n <\/svg>;\n\n\/* \u2500\u2500 Static satellite \u2500\u2500 *\/\nconst StaticSatellite=({x,y,scale=1,rotate=0,opacity=.3})=>(\n <div\n style={{\n position:'absolute',\n left:x,\n top:y,\n transform:`rotate(${rotate}deg) scale(${scale})`,\n opacity,\n pointerEvents:'none'\n }}\n >\n <svg width=\"54\" height=\"54\" viewBox=\"0 0 54 54\" fill=\"none\">\n <rect x=\"20\" y=\"20\" width=\"14\" height=\"14\" rx=\"2.5\" fill=\"rgba(37,99,235,.34)\" stroke=\"rgba(37,99,235,.48)\" strokeWidth=\"1.2\"\/>\n <rect x=\"7\" y=\"18\" width=\"10\" height=\"18\" rx=\"1.5\" fill=\"rgba(37,99,235,.18)\" stroke=\"rgba(37,99,235,.34)\" strokeWidth=\"1\"\/>\n <rect x=\"37\" y=\"18\" width=\"10\" height=\"18\" rx=\"1.5\" fill=\"rgba(37,99,235,.18)\" stroke=\"rgba(37,99,235,.34)\" strokeWidth=\"1\"\/>\n <line x1=\"27\" y1=\"8\" x2=\"27\" y2=\"20\" stroke=\"rgba(37,99,235,.4)\" strokeWidth=\"1.4\"\/>\n <path d=\"M23 8h8\" stroke=\"rgba(37,99,235,.4)\" strokeWidth=\"1.4\" strokeLinecap=\"round\"\/>\n <line x1=\"27\" y1=\"34\" x2=\"27\" y2=\"45\" stroke=\"rgba(37,99,235,.3)\" strokeWidth=\"1.2\"\/>\n <circle cx=\"27\" cy=\"47\" r=\"1.7\" fill=\"rgba(37,99,235,.45)\"\/>\n <\/svg>\n <\/div>\n);\n\n\/* \u2500\u2500 Geodetic background \u2500\u2500 *\/\nconst GeodBg=({isMobile})=>{\n const gc='rgba(37,99,235,0.085)';\n const ac='rgba(37,99,235,0.245)';\n const dc='rgba(37,99,235,0.36)';\n const tc='rgba(37,99,235,0.29)';\n\n if(isMobile){\n const mPts=[[75,95],[315,125],[55,340],[335,365],[200,465],[95,545],[305,510]];\n const mEdges=[[0,1],[1,2],[2,0],[0,3],[3,4],[4,2],[4,5],[5,6],[6,4]];\n return(\n <div style={{position:'fixed',inset:0,zIndex:0,pointerEvents:'none',overflow:'hidden'}} aria-hidden=\"true\">\n <svg viewBox=\"0 0 400 700\" preserveAspectRatio=\"xMidYMid slice\" style={{width:'100%',height:'100%'}}>\n <defs>\n <pattern id=\"sg\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke={gc} strokeWidth=\"1.1\"\/>\n <\/pattern>\n <pattern id=\"lg\" width=\"200\" height=\"200\" patternUnits=\"userSpaceOnUse\">\n <rect width=\"200\" height=\"200\" fill=\"url(#sg)\"\/>\n <path d=\"M 200 0 L 0 0 0 200\" fill=\"none\" stroke={ac} strokeWidth=\"1.5\"\/>\n <\/pattern>\n <\/defs>\n\n <rect width=\"100%\" height=\"100%\" fill=\"url(#lg)\"\/>\n\n <line x1=\"200\" y1=\"0\" x2=\"200\" y2=\"700\" stroke={ac} strokeWidth=\"1.8\" strokeDasharray=\"6 5\">\n <animate attributeName=\"opacity\" values=\".55;.95;.55\" dur=\"4.5s\" repeatCount=\"indefinite\"\/>\n <\/line>\n <line x1=\"0\" y1=\"210\" x2=\"400\" y2=\"210\" stroke={ac} strokeWidth=\"1.8\" strokeDasharray=\"6 5\">\n <animate attributeName=\"opacity\" values=\".55;.95;.55\" dur=\"4.5s\" begin=\"2s\" repeatCount=\"indefinite\"\/>\n <\/line>\n\n <text x=\"204\" y=\"16\" fill={dc} fontSize=\"10\" fontFamily=\"monospace\" opacity=\".8\">+N<\/text>\n <text x=\"204\" y=\"692\" fill={dc} fontSize=\"10\" fontFamily=\"monospace\" opacity=\".8\">-S<\/text>\n <text x=\"366\" y=\"207\" fill={dc} fontSize=\"10\" fontFamily=\"monospace\" opacity=\".8\">+E<\/text>\n <text x=\"5\" y=\"207\" fill={dc} fontSize=\"10\" fontFamily=\"monospace\" opacity=\".8\">-W<\/text>\n\n <circle cx=\"200\" cy=\"210\" r=\"4.5\" fill={dc}>\n <animate attributeName=\"r\" values=\"3.5;6.5;3.5\" dur=\"3s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <circle cx=\"200\" cy=\"210\" r=\"13\" fill=\"none\" stroke={dc} strokeWidth=\"1.1\">\n <animate attributeName=\"r\" values=\"9;19;9\" dur=\"3s\" repeatCount=\"indefinite\"\/>\n <animate attributeName=\"opacity\" values=\".35;0;.35\" dur=\"3s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n\n {[-2,-1,1,2].map((n,i)=>{\n const y=210+n*80;\n return<g key={i}>\n <line x1=\"194\" y1={y} x2=\"206\" y2={y} stroke={dc} strokeWidth=\"1.4\" opacity=\".7\"\/>\n <text x=\"166\" y={y+4} fill={dc} fontSize=\"8\" fontFamily=\"monospace\" opacity=\".65\">{-n*2}<\/text>\n <\/g>;\n })}\n\n {[-2,-1,1,2].map((n,i)=>{\n const x=200+n*80;\n return<g key={i}>\n <line x1={x} y1=\"204\" x2={x} y2=\"216\" stroke={dc} strokeWidth=\"1.4\" opacity=\".7\"\/>\n <text x={x-5} y=\"229\" fill={dc} fontSize=\"8\" fontFamily=\"monospace\" opacity=\".65\">{n*2}<\/text>\n <\/g>;\n })}\n\n {mEdges.map(([a,b],i)=>\n <line key={i} x1={mPts[a][0]} y1={mPts[a][1]} x2={mPts[b][0]} y2={mPts[b][1]} stroke={tc} strokeWidth=\"1.1\" strokeDasharray=\"4 6\" opacity=\".65\">\n <animate attributeName=\"stroke-dashoffset\" from=\"0\" to=\"-70\" dur={`${13+i*.9}s`} repeatCount=\"indefinite\"\/>\n <\/line>\n )}\n\n {mPts.map(([x,y],i)=>\n <g key={i}>\n <circle cx={x} cy={y} r=\"3.4\" fill={dc} opacity=\".62\">\n <animate attributeName=\"opacity\" values=\".35;.75;.35\" dur={`${3.5+i*.35}s`} repeatCount=\"indefinite\"\/>\n <\/circle>\n <circle cx={x} cy={y} r=\"9\" fill=\"none\" stroke={dc} strokeWidth=\"1\">\n <animate attributeName=\"r\" values={`5;${12+i*.4};5`} dur={`${4+i*.3}s`} repeatCount=\"indefinite\"\/>\n <animate attributeName=\"opacity\" values=\".28;0;.28\" dur={`${4+i*.3}s`} repeatCount=\"indefinite\"\/>\n <\/circle>\n <\/g>\n )}\n\n <ellipse cx=\"200\" cy=\"420\" rx=\"110\" ry=\"72\" fill=\"none\" stroke={tc} strokeWidth=\".95\" strokeDasharray=\"3 8\" opacity=\".28\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 200 420\" to=\"360 200 420\" dur=\"55s\" repeatCount=\"indefinite\"\/>\n <\/ellipse>\n <\/svg>\n\n <StaticSatellite x=\"7%\" y=\"13%\" scale={0.8} rotate={-18} opacity={0.28}\/>\n <StaticSatellite x=\"78%\" y=\"18%\" scale={0.95} rotate={22} opacity={0.26}\/>\n <StaticSatellite x=\"70%\" y=\"72%\" scale={0.75} rotate={-8} opacity={0.22}\/>\n <\/div>\n );\n }\n\n const triPts=[[160,110],[360,160],[140,320],[400,290],[230,460],[840,90],[1040,185],[880,330],[1060,400],[760,460],[530,145],[670,265],[490,400],[700,480],[590,620],[1140,560],[1100,300],[980,650],[70,600],[200,720]];\n const triEdges=[[0,1],[1,2],[2,0],[0,3],[3,4],[4,2],[1,3],[5,6],[6,7],[7,5],[5,8],[8,9],[9,7],[6,8],[10,11],[11,12],[12,10],[10,13],[13,14],[14,12],[15,16],[16,17],[3,10],[7,11],[2,12]];\n\n return(\n <div style={{position:'fixed',inset:0,zIndex:0,pointerEvents:'none',overflow:'hidden'}} aria-hidden=\"true\">\n <svg viewBox=\"0 0 1200 900\" preserveAspectRatio=\"xMidYMid slice\" style={{width:'100%',height:'100%'}}>\n <defs>\n <pattern id=\"sg\" width=\"50\" height=\"50\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M 50 0 L 0 0 0 50\" fill=\"none\" stroke={gc} strokeWidth=\"1.05\"\/>\n <\/pattern>\n <pattern id=\"lg\" width=\"250\" height=\"250\" patternUnits=\"userSpaceOnUse\">\n <rect width=\"250\" height=\"250\" fill=\"url(#sg)\"\/>\n <path d=\"M 250 0 L 0 0 0 250\" fill=\"none\" stroke={ac} strokeWidth=\"1.55\"\/>\n <\/pattern>\n <\/defs>\n\n <rect width=\"100%\" height=\"100%\" fill=\"url(#lg)\"\/>\n\n <line x1=\"600\" y1=\"0\" x2=\"600\" y2=\"900\" stroke={ac} strokeWidth=\"2\" strokeDasharray=\"7 6\">\n <animate attributeName=\"opacity\" values=\".58;.98;.58\" dur=\"4.5s\" repeatCount=\"indefinite\"\/>\n <\/line>\n <line x1=\"0\" y1=\"450\" x2=\"1200\" y2=\"450\" stroke={ac} strokeWidth=\"2\" strokeDasharray=\"7 6\">\n <animate attributeName=\"opacity\" values=\".58;.98;.58\" dur=\"4.5s\" begin=\"2.2s\" repeatCount=\"indefinite\"\/>\n <\/line>\n\n {['+N','\u2013S','+E','\u2013W'].map((l,i)=>{\n const p=[[606,22],[606,884],[1174,446],[8,446]][i];\n return <text key={i} x={p[0]} y={p[1]} fill={dc} fontSize=\"11\" fontFamily=\"monospace\" opacity=\".82\">{l}<\/text>;\n })}\n\n <circle cx=\"600\" cy=\"450\" r=\"5.3\" fill={dc}>\n <animate attributeName=\"r\" values=\"4.2;7.5;4.2\" dur=\"3.2s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <circle cx=\"600\" cy=\"450\" r=\"15\" fill=\"none\" stroke={dc} strokeWidth=\"1.3\">\n <animate attributeName=\"r\" values=\"10;21;10\" dur=\"3.2s\" repeatCount=\"indefinite\"\/>\n <animate attributeName=\"opacity\" values=\".35;0;.35\" dur=\"3.2s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n\n {[-4,-3,-2,-1,1,2,3,4].map((n,i)=>{\n const x=600+n*100;\n return<g key={i}>\n <line x1={x} y1=\"443\" x2={x} y2=\"457\" stroke={dc} strokeWidth=\"1.7\" opacity=\".76\"\/>\n <text x={x-7} y=\"469\" fill={dc} fontSize=\"8.5\" fontFamily=\"monospace\" opacity=\".68\">{n*2}<\/text>\n <\/g>;\n })}\n\n {[-3,-2,-1,1,2,3].map((n,i)=>{\n const y=450+n*100;\n return<g key={i}>\n <line x1=\"593\" y1={y} x2=\"607\" y2={y} stroke={dc} strokeWidth=\"1.7\" opacity=\".76\"\/>\n <text x=\"569\" y={y+4} fill={dc} fontSize=\"8.5\" fontFamily=\"monospace\" opacity=\".68\">{-n*2}<\/text>\n <\/g>;\n })}\n\n {triEdges.map(([a,b],i)=>\n <line key={i} x1={triPts[a][0]} y1={triPts[a][1]} x2={triPts[b][0]} y2={triPts[b][1]} stroke={tc} strokeWidth=\"1.2\" strokeDasharray=\"5 7\" opacity=\".72\">\n <animate attributeName=\"stroke-dashoffset\" from=\"0\" to=\"-80\" dur={`${12+i*.6}s`} repeatCount=\"indefinite\"\/>\n <\/line>\n )}\n\n {triPts.map(([x,y],i)=>\n <g key={i}>\n <circle cx={x} cy={y} r=\"3.8\" fill={dc} opacity=\".7\">\n <animate attributeName=\"opacity\" values=\".4;.82;.4\" dur={`${3+i*.25}s`} repeatCount=\"indefinite\"\/>\n <\/circle>\n <circle cx={x} cy={y} r=\"9.5\" fill=\"none\" stroke={dc} strokeWidth=\"1.1\">\n <animate attributeName=\"r\" values={`6;${13+i*.3};6`} dur={`${4+i*.28}s`} repeatCount=\"indefinite\"\/>\n <animate attributeName=\"opacity\" values=\".32;0;.32\" dur={`${4+i*.28}s`} repeatCount=\"indefinite\"\/>\n <\/circle>\n <\/g>\n )}\n\n {[[290,270,170,115,'50s'],[920,300,150,100,'45s'],[590,630,130,90,'55s']].map(([cx,cy,rx,ry,dur],i)=>\n <g key={i}>\n <ellipse cx={cx} cy={cy} rx={rx} ry={ry} fill=\"none\" stroke={tc} strokeWidth=\".95\" strokeDasharray=\"3 9\" opacity=\".30\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from={`0 ${cx} ${cy}`} to={`360 ${cx} ${cy}`} dur={dur} repeatCount=\"indefinite\"\/>\n <\/ellipse>\n <ellipse cx={cx} cy={cy} rx={rx*.62} ry={ry*.62} fill=\"none\" stroke={tc} strokeWidth=\".9\" strokeDasharray=\"3 9\" opacity=\".22\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from={`0 ${cx} ${cy}`} to={`-360 ${cx} ${cy}`} dur={String(parseInt(dur)*.75)+'s'} repeatCount=\"indefinite\"\/>\n <\/ellipse>\n <\/g>\n )}\n\n <g opacity=\".30\">\n <line x1=\"50\" y1=\"820\" x2=\"220\" y2=\"820\" stroke={ac} strokeWidth=\"1.6\"\/>\n <line x1=\"50\" y1=\"815\" x2=\"50\" y2=\"825\" stroke={ac} strokeWidth=\"1.6\"\/>\n <line x1=\"220\" y1=\"815\" x2=\"220\" y2=\"825\" stroke={ac} strokeWidth=\"1.6\"\/>\n <text x=\"120\" y=\"811\" fill={ac} fontSize=\"9.5\" fontFamily=\"monospace\" textAnchor=\"middle\">135.42 m<\/text>\n <\/g>\n <\/svg>\n\n <StaticSatellite x=\"8%\" y=\"10%\" scale={1} rotate={-16} opacity={0.30}\/>\n <StaticSatellite x=\"82%\" y=\"12%\" scale={1.05} rotate={18} opacity={0.26}\/>\n <StaticSatellite x=\"70%\" y=\"68%\" scale={0.9} rotate={-12} opacity={0.22}\/>\n <StaticSatellite x=\"18%\" y=\"76%\" scale={0.78} rotate={14} opacity={0.20}\/>\n <\/div>\n );\n};\n\n\/* \u2500\u2500 Ambient glow \u2500\u2500 *\/\nconst GlowBg=()=>(\n <div style={{position:'fixed',inset:0,zIndex:0,pointerEvents:'none',overflow:'hidden'}} aria-hidden=\"true\">\n <div style={{position:'absolute',top:'7%',left:'9%',width:'65vw',maxWidth:820,height:'55vw',maxHeight:560,background:'radial-gradient(circle,rgba(37,99,235,.11),transparent 70%)',borderRadius:'50%',filter:'blur(90px)',animation:'pulseSlow 10s ease-in-out infinite'}}\/>\n <div style={{position:'absolute',top:'12%',right:'7%',width:'60vw',maxWidth:750,height:'50vw',maxHeight:500,background:'radial-gradient(circle,rgba(245,158,11,.07),transparent 70%)',borderRadius:'50%',filter:'blur(100px)',animation:'pulseSlow 12s ease-in-out infinite 2s'}}\/>\n <\/div>\n);\n\n\/* \u2500\u2500 Compass \u2500\u2500 *\/\nconst Compass=({size=78})=>(\n <div style={{position:'relative',width:size,height:size}}>\n <motion.div style={{position:'absolute',inset:0,borderRadius:'50%',border:'3px solid rgba(37,99,235,.22)'}} animate={{rotate:360}} transition={{duration:22,repeat:Infinity,ease:'linear'}}\/>\n <motion.div style={{position:'absolute',inset:8,borderRadius:'50%',border:'2px solid rgba(37,99,235,.30)',display:'flex',alignItems:'center',justifyContent:'center'}} animate={{rotate:-360}} transition={{duration:16,repeat:Infinity,ease:'linear'}}>\n {[0,90,180,270].map(d=><div key={d} style={{position:'absolute',width:2.5,height:8,background:'rgba(29,78,216,.75)',transform:`rotate(${d}deg) translateY(${-size*.34}px)`}}\/>)}\n <\/motion.div>\n <motion.div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}} animate={{rotate:[0,12,-12,0]}} transition={{duration:4.5,repeat:Infinity,ease:'easeInOut'}}>\n <div style={{position:'relative',width:2.5,height:size*.64}}>\n <div style={{position:'absolute',top:0,left:0,right:0,height:'50%',background:'linear-gradient(to bottom,#ef4444,#dc2626)',clipPath:'polygon(50% 0%,0% 100%,100% 100%)'}}\/>\n <div style={{position:'absolute',bottom:0,left:0,right:0,height:'50%',background:'linear-gradient(to top,#d1d5db,#9ca3af)',clipPath:'polygon(50% 100%,0% 0%,100% 0%)'}}\/>\n <\/div>\n <\/motion.div>\n <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}}>\n <div style={{width:9,height:9,borderRadius:'50%',background:'#1d4ed8',boxShadow:'0 0 10px rgba(37,99,235,.5)'}}\/>\n <\/div>\n <\/div>\n);\n\n\/* \u2500\u2500 Coordinate display \u2500\u2500 *\/\nconst CoordDisplay=()=>{\n const[c,setC]=useState({lat:45.817557,lng:15.977773});\n useEffect(()=>{\n const t=setInterval(()=>{\n setC({\n lat:45.817557+(Math.random()-.5)*.003,\n lng:15.977773+(Math.random()-.5)*.003\n });\n },2200);\n return()=>clearInterval(t);\n },[]);\n\n return(\n <motion.div\n initial={{opacity:0,scale:.85}}\n animate={{opacity:1,scale:1}}\n transition={{delay:.4}}\n style={{\n display:'inline-flex',\n flexDirection:'column',\n gap:5,\n padding:'13px 16px',\n borderRadius:14,\n background:'rgba(6,12,30,.88)',\n backdropFilter:'blur(12px)',\n border:'1px solid rgba(37,99,235,.38)',\n boxShadow:'0 8px 32px rgba(0,0,0,.32)',\n color:'white',\n fontFamily:'monospace',\n fontSize:11\n }}\n >\n <div style={{display:'flex',gap:8,alignItems:'center'}}>\n <span style={{color:'#93c5fd'}}>LAT:<\/span>\n <motion.span key={c.lat} initial={{opacity:0,y:-6}} animate={{opacity:1,y:0}} style={{fontWeight:600}}>\n {c.lat.toFixed(6)}\u00b0\n <\/motion.span>\n <\/div>\n <div style={{display:'flex',gap:8,alignItems:'center'}}>\n <span style={{color:'#93c5fd'}}>LNG:<\/span>\n <motion.span key={c.lng} initial={{opacity:0,y:-6}} animate={{opacity:1,y:0}} style={{fontWeight:600}}>\n {c.lng.toFixed(6)}\u00b0\n <\/motion.span>\n <\/div>\n <div style={{display:'flex',gap:6,alignItems:'center',borderTop:'1px solid rgba(37,99,235,.3)',paddingTop:7,marginTop:3}}>\n <motion.div style={{width:7,height:7,borderRadius:'50%',background:'#4ade80'}} animate={{opacity:[1,.3,1]}} transition={{duration:1.4,repeat:Infinity}}\/>\n <span style={{fontSize:10,color:'#bfdbfe'}}>GPS AKTIVAN<\/span>\n <\/div>\n <\/motion.div>\n );\n};\n\n\/* \u2500\u2500 Survey pin \u2500\u2500 *\/\nconst Pin=({x,y,delay=0})=>(\n <motion.div style={{position:'absolute',left:x,top:y,pointerEvents:'none'}} initial={{opacity:0,y:-40,scale:0}} animate={{opacity:1,y:0,scale:1}} transition={{delay,type:'spring',stiffness:200}}>\n <motion.div animate={{y:[0,-10,0]}} transition={{duration:2.2,repeat:Infinity,delay}} style={{color:'#ef4444',filter:'drop-shadow(0 2px 8px rgba(239,68,68,.5))'}}>\n <PinIcon\/>\n <\/motion.div>\n <motion.div style={{position:'absolute',bottom:-2,left:'50%',transform:'translateX(-50%)',width:11,height:11,borderRadius:'50%',background:'rgba(239,68,68,.18)'}} animate={{scale:[1,1.7,1],opacity:[.5,0,.5]}} transition={{duration:2.2,repeat:Infinity,delay}}\/>\n <\/motion.div>\n);\n\n\/* \u2500\u2500 Sun \u2500\u2500 *\/\nconst Sun=()=>(\n <div style={{position:'absolute',top:70,right:72,pointerEvents:'none',animation:'floatY 6s ease-in-out infinite'}}>\n <svg width=\"118\" height=\"118\" viewBox=\"0 0 118 118\">\n <g style={{transformOrigin:'59px 59px',animation:'spinSlow 28s linear infinite'}}>\n {[...Array(12)].map((_,i)=>{\n const r=(i*30)*Math.PI\/180;\n return<line key={i} x1={59+Math.cos(r)*27} y1={59+Math.sin(r)*27} x2={59+Math.cos(r)*44} y2={59+Math.sin(r)*44} stroke=\"rgba(250,204,21,.72)\" strokeWidth=\"3\" strokeLinecap=\"round\"\/>;\n })}\n <\/g>\n <circle cx=\"59\" cy=\"59\" r=\"21\" fill=\"rgba(250,204,21,.92)\">\n <animate attributeName=\"r\" values=\"19;23;19\" dur=\"4s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <circle cx=\"59\" cy=\"59\" r=\"33\" fill=\"rgba(250,204,21,.10)\"\/>\n <\/svg>\n <\/div>\n);\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst Hero=({isMobile})=>(\n <section style={{position:'relative',overflow:'hidden',minHeight:isMobile?'100svh':'88vh',display:'flex',alignItems:'center',padding:isMobile?'80px 0 52px':'108px 0 80px'}}>\n <motion.div style={{position:'absolute',top:-100,right:-100,width:isMobile?240:360,height:isMobile?240:360,background:'rgba(37,99,235,.08)',borderRadius:'50%',filter:'blur(70px)'}} animate={{scale:[1,1.2,1],opacity:[.4,.62,.4]}} transition={{duration:9,repeat:Infinity}}\/>\n <motion.div style={{position:'absolute',bottom:-80,left:-60,width:isMobile?200:300,height:isMobile?200:300,background:'rgba(245,158,11,.07)',borderRadius:'50%',filter:'blur(70px)'}} animate={{scale:[1,1.3,1],opacity:[.3,.5,.3]}} transition={{duration:11,repeat:Infinity,delay:1.5}}\/>\n\n {!isMobile&&<Sun\/>}\n {!isMobile&&<div style={{position:'absolute',top:36,left:36,opacity:.55,animation:'floatY 5s ease-in-out infinite'}}><Compass size={78}\/><\/div>}\n {!isMobile&&<div style={{position:'absolute',bottom:48,left:24}}><CoordDisplay\/><\/div>}\n {!isMobile&&<Pin x=\"13%\" y=\"66%\" delay={.6}\/>}\n {!isMobile&&<Pin x=\"83%\" y=\"74%\" delay={1.1}\/>}\n\n <div style={{maxWidth:1200,margin:'0 auto',padding:`0 ${isMobile?20:24}px`,position:'relative',zIndex:10,width:'100%'}}>\n <motion.div style={{maxWidth:860,margin:'0 auto',textAlign:'center'}} initial={{opacity:0,y:32}} animate={{opacity:1,y:0}} transition={{duration:.75}}>\n\n {isMobile&&(\n <motion.div initial={{opacity:0,scale:.8}} animate={{opacity:1,scale:1}} transition={{delay:.1}} style={{display:'flex',justifyContent:'center',marginBottom:20,opacity:.6}}>\n <Compass size={52}\/>\n <\/motion.div>\n )}\n\n <motion.div className=\"badge\" style={{display:'inline-flex',alignItems:'center',gap:10,padding:'8px 18px',borderRadius:999,marginBottom:isMobile?20:28}} initial={{opacity:0,y:12}} animate={{opacity:1,y:0}} transition={{delay:.12}}>\n <motion.span style={{width:10,height:10,borderRadius:'50%',background:'#f59e0b',display:'inline-block'}} animate={{scale:[1,1.22,1]}} transition={{duration:1.5,repeat:Infinity}}\/>\n <span style={{fontSize:isMobile?13:15,fontWeight:500,color:'var(--text)'}}>Video lekcije • Online<\/span>\n <\/motion.div>\n\n <motion.h1 style={{fontSize:isMobile?'clamp(1.85rem,7vw,2.4rem)':'clamp(2.2rem,5vw,3.8rem)',fontWeight:800,lineHeight:1.1,letterSpacing:'-.013em',marginBottom:isMobile?16:22,color:'var(--text)'}} initial={{opacity:0,y:20}} animate={{opacity:1,y:0}} transition={{delay:.22,duration:.8}}>\n Koordino u\u010di mirno i to\u010dno.\n <\/motion.h1>\n\n <motion.p style={{fontSize:isMobile?'0.96rem':'clamp(1rem,2vw,1.2rem)',maxWidth:600,margin:'0 auto',marginBottom:isMobile?24:32,color:'var(--soft)',lineHeight:1.7}} initial={{opacity:0,y:16}} animate={{opacity:1,y:0}} transition={{delay:.36}}>\n Video lekcije i pripreme za klju\u010dne teme. U\u010di svojim tempom - kad god \u017eeli\u0161.\n <\/motion.p>\n\n <motion.div initial={{opacity:0,scale:.92}} animate={{opacity:1,scale:1}} transition={{delay:.54}} style={{marginBottom:isMobile?28:44}}>\n <motion.a href=\"https:\/\/koordino.com.hr\/index.php\/pripreme\/\" className=\"cta-glow\" style={{display:'inline-flex',alignItems:'center',gap:12,padding:isMobile?'13px 26px':'16px 38px',borderRadius:24,background:'linear-gradient(135deg,#1d4ed8,#2563eb,#3b82f6)',color:'white',fontWeight:700,fontSize:isMobile?16:18,textDecoration:'none',fontFamily:\"'Plus Jakarta Sans',sans-serif\"}} whileHover={{scale:1.05,y:-4}} whileTap={{scale:.97}}>\n <motion.span style={{width:isMobile?32:40,height:isMobile?32:40,borderRadius:11,background:'rgba(255,255,255,.12)',display:'flex',alignItems:'center',justifyContent:'center'}} animate={{rotate:[0,12,-12,0]}} transition={{duration:2.2,repeat:Infinity}}>\n <PlayIcon\/>\n <\/motion.span>\n Pogledaj pripreme\n <\/motion.a>\n <\/motion.div>\n\n <motion.div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'repeat(3,1fr)',gap:isMobile?9:13,maxWidth:isMobile?'100%':820,margin:'0 auto'}} initial={{opacity:0,y:14}} animate={{opacity:1,y:0}} transition={{delay:.72}}>\n {[{i:<PlayIcon\/>,t:'Video lekcije'},{i:<ChkIcon\/>,t:'Zadatci i rje\u0161enja'},{i:<FileIcon\/>,t:'Organizirano po temama'}].map((item,k)=>(\n <motion.div key={k} className=\"card\" style={{borderRadius:16,padding:isMobile?'12px 15px':'14px 18px',display:'flex',alignItems:'center',gap:11}} whileHover={{scale:1.03,y:-2}} transition={{type:'spring',stiffness:300}}>\n <div style={{width:isMobile?36:42,height:isMobile?36:42,borderRadius:11,background:'rgba(37,99,235,.10)',color:'var(--blue)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>\n {item.i}\n <\/div>\n <span style={{fontWeight:600,fontSize:isMobile?13.5:14.5,color:'var(--text)',fontFamily:\"'Plus Jakarta Sans',sans-serif\"}}>\n {item.t}\n <\/span>\n <\/motion.div>\n ))}\n <\/motion.div>\n\n {isMobile&&(\n <motion.div initial={{opacity:0,y:12}} animate={{opacity:1,y:0}} transition={{delay:.88}} style={{display:'flex',justifyContent:'center',marginTop:24}}>\n <CoordDisplay\/>\n <\/motion.div>\n )}\n\n <\/motion.div>\n <\/div>\n <\/section>\n);\n\n\/* \u2500\u2500 Feature card \u2500\u2500 *\/\nconst FeatCard=({f,side,idx,isMobile})=>{\n const{ref,inView}=useInView(.12);\n const isL=side==='left';\n\n const bgEl=[\n <div style={{position:'absolute',inset:0,overflow:'hidden',opacity:.09,pointerEvents:'none'}}>\n <svg width=\"100%\" height=\"100%\">\n <defs>\n <pattern id={`cg${idx}`} width=\"26\" height=\"26\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M 26 0 L 0 0 0 26\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\".8\"\/>\n <\/pattern>\n <\/defs>\n <rect width=\"100%\" height=\"100%\" fill={`url(#cg${idx})`} style={{color:'var(--blue)'}}\/>\n <\/svg>\n <\/div>,\n <div style={{position:'absolute',inset:0,overflow:'hidden',pointerEvents:'none'}}>\n {[88,60,36].map((r,i)=><div key={i} style={{position:'absolute',width:r*2,height:r*2,borderRadius:'50%',border:'1.5px solid var(--border)',right:14-i*10,top:'50%',transform:'translateY(-50%)'}}\/>)}\n <\/div>,\n <div style={{position:'absolute',top:13,right:13,opacity:.13,pointerEvents:'none'}}>\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" style={{color:'var(--blue)'}}>\n <circle cx=\"32\" cy=\"32\" r=\"26\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\"\/>\n {[...Array(12)].map((_,i)=>{\n const a=i*30,rr=a*Math.PI\/180,l=i%3===0?6.5:3.5;\n return<line key={i} x1={32+Math.cos(rr)*18} y1={32+Math.sin(rr)*18} x2={32+Math.cos(rr)*(18+l)} y2={32+Math.sin(rr)*(18+l)} stroke=\"currentColor\" strokeWidth={i%3===0?1.7:.9}\/>;\n }).filter((_,i)=>i!==0)}\n <line x1=\"32\" y1=\"32\" x2=\"32\" y2=\"11\" stroke=\"currentColor\" strokeWidth=\"1.7\" strokeLinecap=\"round\"\/>\n <line x1=\"32\" y1=\"32\" x2=\"47\" y2=\"40\" stroke=\"currentColor\" strokeWidth=\"1.3\" strokeLinecap=\"round\"\/>\n <\/svg>\n <\/div>\n ][idx];\n\n const anim=isMobile\n ?{initial:{opacity:0,y:28},animate:inView?{opacity:1,y:0}:{}} \n :{initial:{opacity:0,x:isL?-56:56},animate:inView?{opacity:1,x:0}:{}}; \n\n return(\n <motion.div ref={ref} {...anim} transition={{duration:.66,ease:[.22,1,.36,1],delay:.05}}>\n <div\n className=\"card\"\n style={{\n borderRadius:22,\n padding:isMobile?'24px 20px':'32px 28px',\n position:'relative',\n overflow:'hidden',\n minHeight:isMobile?220:250\n }}\n >\n {bgEl}\n <div style={{position:'relative',zIndex:1}}>\n <motion.div\n style={{\n width:isMobile?52:58,\n height:isMobile?52:58,\n borderRadius:17,\n background:'linear-gradient(135deg,#1d4ed8,#3b82f6)',\n display:'flex',\n alignItems:'center',\n justifyContent:'center',\n marginBottom:16,\n boxShadow:'0 8px 22px rgba(37,99,235,.26)',\n color:'white'\n }}\n whileHover={{rotate:[0,-12,12,-12,0],scale:1.08}}\n transition={{duration:.5}}\n >\n {f.icon}\n <\/motion.div>\n\n <h3 style={{fontSize:isMobile?18:21,fontWeight:800,color:'var(--text)',marginBottom:12,fontFamily:\"'Plus Jakarta Sans',sans-serif\"}}>\n {f.title}\n <\/h3>\n\n <p style={{color:'var(--soft)',lineHeight:1.78,fontSize:isMobile?14.5:16}}>\n {f.desc}\n <\/p>\n <\/div>\n <\/div>\n <\/motion.div>\n );\n};\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FEATURES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst Features=({isMobile})=>{\n const{ref:tRef,inView:tIn}=useInView();\n const areaRef=useRef(null);\n const[prog,setProg]=useState(0);\n const[dots,setDots]=useState([false,false,false]);\n\n useEffect(()=>{\n const fn=()=>{\n if(!areaRef.current)return;\n const r=areaRef.current.getBoundingClientRect();\n const h=areaRef.current.offsetHeight;\n const wh=window.innerHeight;\n const p=Math.max(0,Math.min(1,(-r.top+wh*.38)\/(h-wh*.26)));\n setProg(p);\n setDots([p>.12,p>.44,p>.76]);\n };\n window.addEventListener('scroll',fn,{passive:true});\n fn();\n return()=>window.removeEventListener('scroll',fn);\n },[]);\n\n const feats=[\n {\n icon:<VidIcon\/>,\n title:'Video lekcije',\n desc:'Detaljno i jasno obra\u0111ene geodetske teme kroz pregledne video lekcije. Svaka cjelina vodi te korak po korak kroz va\u017ene pojmove, postupke i tipi\u010dne zadatke kako bi gradivo bilo lak\u0161e za pratiti, razumjeti i kasnije samostalno ponavljati.',\n side:'left'\n },\n {\n icon:<TgtIcon\/>,\n title:'Fokusirana priprema',\n desc:'AOGM, Instrumenti i uskoro GRO, Izmjere organizirani su pregledno i smisleno kako bi se mogao usmjeriti na ono \u0161to je stvarno va\u017eno. Manje tra\u017eenja materijala, a vi\u0161e konkretne pripreme kroz sadr\u017eaj koji prati ono \u0161to ti treba za sigurno u\u010denje i ponavljanje.',\n side:'right'\n },\n {\n icon:<ClkIcon\/>,\n title:'Fleksibilno u\u010denje',\n desc:'U\u010di kad tebi odgovara i vra\u0107aj se na lekcije koliko god puta \u017eeli\u0161. Materijali su dostupni u vlastitom ritmu, \u0161to ti omogu\u0107uje da sporije pro\u0111e\u0161 te\u017ee dijelove, a br\u017ee ponovi\u0161 ono \u0161to ve\u0107 razumije\u0161 i osje\u0107a\u0161 sigurnije.',\n side:'left'\n },\n ];\n\n const dotPcts=[16,50,84];\n\n return(\n <section style={{padding:isMobile?'56px 0 68px':'80px 0 100px',position:'relative'}} id=\"features\">\n <div style={{maxWidth:1200,margin:'0 auto',padding:`0 ${isMobile?20:24}px`}}>\n <motion.h2 ref={tRef} style={{fontSize:isMobile?'clamp(1.5rem,5.5vw,1.9rem)':'clamp(1.9rem,3.8vw,3.1rem)',fontWeight:800,textAlign:'center',color:'var(--text)',marginBottom:isMobile?40:68,letterSpacing:'-.012em'}} initial={{opacity:0,y:30}} animate={tIn?{opacity:1,y:0}:{}} transition={{duration:.62}}>\n Za\u0161to Koordino?\n <\/motion.h2>\n\n <div ref={areaRef} style={{position:'relative'}}>\n {!isMobile&&(\n <div className=\"tl-track\">\n <div className=\"tl-dashes\"\/>\n <div className=\"tl-fill\" style={{height:`${prog*100}%`}}\/>\n {dotPcts.map((pct,i)=><div key={i} className={`tl-dot ${dots[i]?'on':''}`} style={{top:`${pct}%`}}\/>)}\n <\/div>\n )}\n\n {isMobile&&(\n <div className=\"tl-mob\">\n <div className=\"tl-mob-dashes\"\/>\n <div className=\"tl-mob-fill\" style={{height:`${prog*100}%`}}\/>\n {dotPcts.map((pct,i)=><div key={i} className={`tl-mob-dot ${dots[i]?'on':''}`} style={{top:`${pct}%`}}\/>)}\n <\/div>\n )}\n\n {isMobile&&(\n <div style={{display:'flex',flexDirection:'column',gap:22,paddingLeft:42}}>\n {feats.map((f,i)=><FeatCard key={i} f={f} side={f.side} idx={i} isMobile={true}\/>)}\n <\/div>\n )}\n\n {!isMobile&&(\n <div style={{display:'flex',flexDirection:'column',gap:52}}>\n {feats.map((f,i)=>{\n const isL=f.side==='left';\n return(\n <div key={i} style={{position:'relative'}}>\n <div style={{position:'absolute',top:'50%',height:2,width:'7%',background:`repeating-linear-gradient(to right,var(--tl-track) 0,var(--tl-track) 5px,transparent 5px,transparent 10px)`,...(isL?{left:'calc(50% - 8px)'}:{right:'calc(50% - 8px)'})}}\/>\n <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:0}}>\n {isL\n ?(<><div style={{paddingRight:'calc(50% - 40px)'}}><FeatCard f={f} side=\"left\" idx={i} isMobile={false}\/><\/div><div\/><\/>)\n :(<><div\/><div style={{paddingLeft:'calc(50% - 40px)'}}><FeatCard f={f} side=\"right\" idx={i} isMobile={false}\/><\/div><\/>)}\n <\/div>\n <\/div>\n );\n })}\n <\/div>\n )}\n <\/div>\n <\/div>\n <\/section>\n );\n};\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FAQ\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst FAQ=({isMobile})=>{\n const{ref,inView}=useInView();\n const[open,setOpen]=useState(null);\n const[mascotJump,setMascotJump]=useState(false);\n\n const faqs=[\n {q:'Kako zapo\u010deti s gledanjem?',a:'Desno u gornjem kutu nalaze se opcije za prijavu i registraciju. Nakon \u0161to izradi\u0161 profil, javi nam se putem e-maila ili poruke kako bismo dogovorili na\u010din i vrijeme pla\u0107anja te omogu\u0107ili pristup video instrukcijama.'},\n {q:'Gdje su pripreme i predmeti?',a:'Klikni na \"Priprema\" u navigaciji - tamo su AOGM i instrumenti, a GRO se jo\u0161 uvijek obra\u0111uje.'},\n {q:'Mogu li gledati lekcije vi\u0161e puta?',a:'Da. Ideja i jest da se mo\u017ee\u0161 vra\u0107ati na dijelove lekcija koliko god puta treba.'},\n {q:'Radi li stranica na mobitelu?',a:'Da. Stranica je responzivna i prilago\u0111ena mobitelu, tabletu i ra\u010dunalu.'},\n ];\n\n const handleToggle=(i)=>{\n setOpen(prev=>prev===i?null:i);\n setMascotJump(false);\n requestAnimationFrame(()=>{\n requestAnimationFrame(()=>setMascotJump(true));\n setTimeout(()=>setMascotJump(false),600);\n });\n };\n\n return(\n <section style={{padding:isMobile?'56px 0 68px':'80px 0 100px'}} id=\"faq\">\n <div style={{maxWidth:1200,margin:'0 auto',padding:`0 ${isMobile?20:24}px`}}>\n <motion.div ref={ref} initial={{opacity:0,y:30}} animate={inView?{opacity:1,y:0}:{}} transition={{duration:.62}}>\n <h2 style={{fontSize:isMobile?'clamp(1.5rem,5.5vw,1.9rem)':'clamp(1.9rem,3.8vw,3.1rem)',fontWeight:800,textAlign:'center',color:'var(--text)',marginBottom:isMobile?18:22,letterSpacing:'-.012em'}}>\n \u010cesto postavljena pitanja\n <\/h2>\n\n <div style={{display:'flex',justifyContent:'center',marginBottom:isMobile?22:30}}>\n <div style={{display:'flex',alignItems:'center',gap:14,background:'rgba(255,255,255,.68)',border:'1px solid var(--border)',padding:isMobile?'10px 14px':'12px 16px',borderRadius:18,boxShadow:'var(--shadow)'}}>\n <img decoding=\"async\"\n src=\"https:\/\/koordino.com.hr\/wp-content\/uploads\/2026\/03\/cropped-logo_kooridno.png\"\n alt=\"Koordino zemljica\"\n className={mascotJump ? 'faq-mascot-bounce' : ''}\n style={{width:isMobile?44:54,height:isMobile?44:54,objectFit:'contain',flexShrink:0,filter:'drop-shadow(0 6px 14px rgba(37,99,235,.15))'}}\n \/>\n <div>\n <div style={{fontWeight:800,fontSize:isMobile?14:15,color:'var(--text)',fontFamily:\"'Plus Jakarta Sans',sans-serif\"}}>\n Koordino odgovara\n <\/div>\n <div style={{fontSize:isMobile?12.5:13.5,color:'var(--soft)'}}>\n Klikni na pitanje i vidi odgovor \ud83c\udf0d\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div style={{maxWidth:820,margin:'0 auto'}}>\n <div className=\"card\" style={{borderRadius:22,overflow:'hidden',position:'relative'}}>\n {faqs.map((faq,i)=>(\n <motion.div key={i} initial={{opacity:0,y:12}} animate={inView?{opacity:1,y:0}:{}} transition={{delay:i*.08}} style={{borderBottom:i<faqs.length-1?'1px solid var(--border)':'none'}}>\n <motion.button\n onClick={()=>handleToggle(i)}\n style={{width:'100%',padding:isMobile?'16px 18px':'19px 25px',display:'flex',alignItems:'center',justifyContent:'space-between',background:'transparent',border:'none',cursor:'pointer',textAlign:'left',gap:14}}\n whileHover={{backgroundColor:'rgba(37,99,235,.04)'}}\n >\n <div style={{display:'flex',alignItems:'center',gap:12,flex:1,minWidth:0}}>\n {open===i && !isMobile && (\n <motion.img\n src=\"https:\/\/koordino.com.hr\/wp-content\/uploads\/2026\/03\/cropped-logo_kooridno.png\"\n alt=\"\"\n initial={{scale:.8,opacity:0}}\n animate={{scale:1,opacity:1,y:[0,-3,0]}}\n transition={{duration:.4}}\n style={{width:34,height:34,objectFit:'contain',flexShrink:0}}\n \/>\n )}\n <span style={{fontWeight:700,color:'var(--text)',fontSize:isMobile?14.5:16,paddingRight:12,fontFamily:\"'Plus Jakarta Sans',sans-serif\"}}>\n {faq.q}\n <\/span>\n <\/div>\n\n <motion.div animate={{rotate:open===i?45:0}} transition={{duration:.25}} style={{flexShrink:0,width:30,height:30,borderRadius:8,background:'rgba(37,99,235,.08)',border:'1px solid var(--border)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--blue)'}}>\n <PlusIcon\/>\n <\/motion.div>\n <\/motion.button>\n\n <AnimatePresence>\n {open===i&&(\n <motion.div initial={{height:0,opacity:0}} animate={{height:'auto',opacity:1}} exit={{height:0,opacity:0}} transition={{duration:.28}} style={{overflow:'hidden'}}>\n <div style={{display:'flex',gap:14,alignItems:'flex-start',padding:isMobile?'0 18px 17px':'0 25px 19px'}}>\n {isMobile&&(\n <motion.img\n src=\"https:\/\/koordino.com.hr\/wp-content\/uploads\/2026\/03\/cropped-logo_kooridno.png\"\n alt=\"\"\n initial={{scale:.7,opacity:0}}\n animate={{scale:1,opacity:1,y:[0,-4,0]}}\n transition={{duration:.45}}\n style={{width:34,height:34,objectFit:'contain',flexShrink:0,marginTop:2}}\n \/>\n )}\n <p style={{color:'var(--soft)',lineHeight:1.68,fontSize:isMobile?14:15}}>\n {faq.a}\n <\/p>\n <\/div>\n <\/motion.div>\n )}\n <\/AnimatePresence>\n <\/motion.div>\n ))}\n <\/div>\n <\/div>\n <\/motion.div>\n <\/div>\n <\/section>\n );\n};\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONTACT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst Contact=({isMobile})=>{\n const{ref,inView}=useInView();\n return(\n <section style={{padding:isMobile?'16px 0 60px':'40px 0 86px'}} id=\"kontakt\">\n <div style={{maxWidth:1200,margin:'0 auto',padding:`0 ${isMobile?20:24}px`}}>\n <motion.div ref={ref} initial={{opacity:0,y:30}} animate={inView?{opacity:1,y:0}:{}} transition={{duration:.62}} style={{maxWidth:560,margin:'0 auto'}}>\n <div className=\"card\" style={{borderRadius:26,padding:isMobile?'28px 22px':'42px',position:'relative',overflow:'hidden',textAlign:'center'}}>\n <div style={{position:'absolute',top:-48,right:-48,width:150,height:150,background:'rgba(37,99,235,.07)',borderRadius:'50%',filter:'blur(42px)'}}\/>\n <div style={{position:'absolute',bottom:-34,left:-34,width:125,height:125,background:'rgba(245,158,11,.06)',borderRadius:'50%',filter:'blur(34px)'}}\/>\n <div style={{position:'relative',zIndex:1}}>\n <motion.div style={{width:54,height:54,borderRadius:17,background:'linear-gradient(135deg,#1d4ed8,#3b82f6)',display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 18px',boxShadow:'0 8px 22px rgba(37,99,235,.28)',color:'white'}} whileHover={{rotate:[0,-12,12,-12,0],scale:1.08}} transition={{duration:.5}}>\n <MailIcon\/>\n <\/motion.div>\n <h2 style={{fontSize:isMobile?'1.38rem':'clamp(1.5rem,2.8vw,2rem)',fontWeight:800,color:'var(--text)',marginBottom:10,fontFamily:\"'Plus Jakarta Sans',sans-serif\"}}>\n Kontaktiraj nas\n <\/h2>\n <p style={{color:'var(--soft)',marginBottom:24,fontSize:isMobile?14:15.5,lineHeight:1.64}}>\n Ima\u0161 pitanja? Slobodno nam se javi putem e-maila.\n <\/p>\n <motion.a href=\"mailto:koordinoinstr@gmail.com\" style={{display:'inline-flex',alignItems:'center',gap:9,padding:isMobile?'12px 20px':'14px 26px',borderRadius:999,background:'linear-gradient(135deg,#1d4ed8,#3b82f6)',color:'white',fontWeight:700,fontSize:isMobile?13.5:15,textDecoration:'none',boxShadow:'0 8px 24px rgba(37,99,235,.28)',flexWrap:'wrap',justifyContent:'center'}} whileHover={{scale:1.04,y:-3}} whileTap={{scale:.95}}>\n <MailIcon\/>koordinoinstr@gmail.com\n <\/motion.a>\n <\/div>\n <\/div>\n <\/motion.div>\n <\/div>\n <\/section>\n );\n};\n\n\/* \u2500\u2500 Footer \u2500\u2500 *\/\nconst Footer=({isMobile})=>(\n <footer style={{padding:'30px 0 42px',borderTop:'1px solid var(--border)'}}>\n <div style={{maxWidth:1200,margin:'0 auto',padding:`0 ${isMobile?20:24}px`,display:'flex',flexDirection:'column',alignItems:'center',gap:10}}>\n <p style={{color:'var(--soft)',fontSize:13,textAlign:'center'}}>© {new Date().getFullYear()} Koordino. Sva prava pridr\u017eana.<\/p>\n <p style={{color:'var(--soft)',fontSize:12,opacity:.6,textAlign:'center'}}>Geodetske instrukcije - u\u010dimo zajedno \ud83d\udcd0<\/p>\n <\/div>\n <\/footer>\n);\n\n\/* \u2500\u2500 Scroll to top \u2500\u2500 *\/\nconst ScrollTop=()=>{\n const[vis,setVis]=useState(false);\n\n useEffect(()=>{\n const f=()=>setVis(window.scrollY>260);\n window.addEventListener('scroll',f,{passive:true});\n f();\n return()=>window.removeEventListener('scroll',f);\n },[]);\n\n return(\n <AnimatePresence>\n {vis&&(\n <motion.button\n className=\"stb\"\n onClick={()=>window.scrollTo({top:0,behavior:'smooth'})}\n initial={{opacity:0,y:20,scale:.8}}\n animate={{opacity:1,y:0,scale:1}}\n exit={{opacity:0,y:20,scale:.8}}\n whileHover={{scale:1.1,y:-4}}\n whileTap={{scale:.9}}\n transition={{duration:.2}}\n aria-label=\"Natrag na vrh\"\n style={{display:'flex',alignItems:'center',justifyContent:'center'}}\n >\n <span style={{display:'flex',alignItems:'center',justifyContent:'center',color:'#fff'}}>\n <UpIcon\/>\n <\/span>\n <\/motion.button>\n )}\n <\/AnimatePresence>\n );\n};\n\n\/* \u2500\u2500 App \u2500\u2500 *\/\nconst App=()=>{\n const isMobile=useIsMobile();\n\n return(\n <>\n <GeodBg isMobile={isMobile}\/>\n <GlowBg\/>\n <ScrollTop\/>\n\n <div style={{position:'relative',zIndex:1}}>\n <Hero isMobile={isMobile}\/>\n <Features isMobile={isMobile}\/>\n <FAQ isMobile={isMobile}\/>\n <Contact isMobile={isMobile}\/>\n <Footer isMobile={isMobile}\/>\n <\/div>\n <\/>\n );\n};\n\nReactDOM.createRoot(document.getElementById('root')).render(<App\/>);\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Koordino Geodetske Instrukcije<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"disabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":19,"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/koordino.com.hr\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}