{"id":12,"date":"2026-04-09T19:56:45","date_gmt":"2026-04-09T19:56:45","guid":{"rendered":"https:\/\/metaartron.com\/?page_id=12"},"modified":"2026-04-27T07:45:35","modified_gmt":"2026-04-27T07:45:35","slug":"home-page","status":"publish","type":"page","link":"https:\/\/metaartron.com\/","title":{"rendered":"Home Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ed4907 e-con-full e-flex e-con e-parent\" data-id=\"2ed4907\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-b96fc1e e-flex e-con-boxed e-con e-child\" data-id=\"b96fc1e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3db848b elementor-widget elementor-widget-html\" data-id=\"3db848b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- META ARTRON CINEMATIC BACKGROUND -->\r\n\r\n<canvas id=\"meta-bg\"><\/canvas>\r\n\r\n<style>\r\n#meta-bg{\r\n  position: fixed;\r\n  top:0;\r\n  left:0;\r\n  width:100%;\r\n  height:100%;\r\n  z-index:-1;\r\n  pointer-events:none;\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r134\/three.min.js\"><\/script>\r\n\r\n<script>\r\n(function(){\r\n\r\n\/\/ SCENE\r\nconst scene = new THREE.Scene();\r\n\r\nconst camera = new THREE.PerspectiveCamera(\r\n  50,\r\n  window.innerWidth\/window.innerHeight,\r\n  0.1,\r\n  1000\r\n);\r\n\r\n\/\/ \ud83d\udd34 ZOOMED INTO FRAGMENT (ARCHITECTURAL FEEL)\r\ncamera.position.z = 3.2;\r\n\r\nconst renderer = new THREE.WebGLRenderer({\r\n  canvas: document.getElementById(\"meta-bg\"),\r\n  alpha: true,\r\n  antialias: true\r\n});\r\n\r\nrenderer.setSize(window.innerWidth, window.innerHeight);\r\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n\r\n\/\/ GEOMETRY (ULTRA SMOOTH)\r\nconst geometry = new THREE.PlaneGeometry(10,10,320,320);\r\n\r\n\/\/ UNIFORMS\r\nconst uniforms = {\r\n  time: { value: 0 },\r\n  mouse: { value: new THREE.Vector2(0,0) }\r\n};\r\n\r\n\/\/ \ud83d\udd34 MAIN SKIN MATERIAL\r\nconst material = new THREE.ShaderMaterial({\r\n  uniforms: uniforms,\r\n  transparent: true,\r\n  side: THREE.DoubleSide,\r\n\r\n  vertexShader: `\r\n    uniform float time;\r\n    uniform vec2 mouse;\r\n\r\n    varying float vElevation;\r\n    varying vec2 vUv;\r\n\r\n    void main(){\r\n\r\n      vUv = uv;\r\n\r\n      vec3 pos = position;\r\n      vec2 p = pos.xy;\r\n\r\n      \/\/ \ud83d\udd34 CONTROLLED PARAMETRIC SURFACE (NOT NOISE)\r\n      float wave1 = sin(p.x * 1.4 + time * 1.2);\r\n      float wave2 = cos(p.y * 1.2 + time * 1.1);\r\n      float wave3 = sin((p.x + p.y) * 0.5 + time * 0.8);\r\n\r\n      float elevation = (wave1 + wave2 + wave3) * 0.55;\r\n\r\n      \/\/ \ud83d\udd34 LOCAL CURVATURE (BUILDING-LIKE)\r\n      float radial = length(p);\r\n      elevation += sin(radial * 2.0 - time) * 0.25;\r\n\r\n      \/\/ \ud83d\udd34 MOUSE = SUBTLE ARCHITECTURAL RESPONSE\r\n      elevation += mouse.x * 0.3 * sin(p.x * 1.0);\r\n      elevation += mouse.y * 0.3 * cos(p.y * 1.0);\r\n\r\n      pos.z += elevation;\r\n\r\n      vElevation = elevation;\r\n\r\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);\r\n    }\r\n  `,\r\n\r\n  fragmentShader: `\r\n    uniform float time;\r\n\r\n    varying float vElevation;\r\n    varying vec2 vUv;\r\n\r\n    void main(){\r\n\r\n      \/\/ \ud83d\udd34 PERFORATED FACADE (CONTROLLED GRID)\r\n      float grid = sin(vUv.x * 50.0) * sin(vUv.y * 50.0);\r\n\r\n      \/\/ subtle animation\r\n      grid += sin(time + vUv.x * 5.0) * 0.2;\r\n\r\n      if(grid > 0.65){\r\n        discard;\r\n      }\r\n\r\n      \/\/ \ud83d\udd34 FAKE HDRI LIGHTING (CINEMATIC)\r\n      vec3 lightDir = normalize(vec3(0.3,0.6,1.0));\r\n      float lighting = dot(normalize(vec3(0.0,0.0,1.0)), lightDir);\r\n\r\n      \/\/ \ud83d\udd34 BASE DARK\r\n      vec3 base = vec3(0.015,0.015,0.015);\r\n\r\n      \/\/ \ud83d\udd34 RED INTERNAL GLOW\r\n      float glow = smoothstep(0.0,1.0,abs(vElevation));\r\n      vec3 red = vec3(0.85,0.05,0.05) * glow;\r\n\r\n      \/\/ \ud83d\udd34 GLASS REFLECTION EFFECT\r\n      float fresnel = pow(1.0 - abs(vElevation), 4.0);\r\n      vec3 reflection = vec3(1.0,0.25,0.25) * fresnel * 0.5;\r\n\r\n      \/\/ \ud83d\udd34 EDGE LIGHT (PREMIUM FEEL)\r\n      float edge = smoothstep(0.3,0.9,abs(vElevation));\r\n      vec3 edgeGlow = vec3(1.0,0.1,0.1) * edge * 0.7;\r\n\r\n      \/\/ \ud83d\udd34 DEPTH FOG\r\n      float fog = smoothstep(0.2,1.5,abs(vElevation));\r\n      vec3 fogColor = vec3(0.0,0.0,0.0);\r\n\r\n      vec3 color = base + red + reflection + edgeGlow;\r\n\r\n      color = mix(color, fogColor, fog * 0.3);\r\n\r\n      gl_FragColor = vec4(color, 0.95);\r\n    }\r\n  `\r\n});\r\n\r\n\/\/ \ud83d\udd34 SECOND LAYER (SHADOW SKIN = DEPTH)\r\nconst materialBack = material.clone();\r\n\r\nconst mesh = new THREE.Mesh(geometry, material);\r\nconst meshBack = new THREE.Mesh(geometry, materialBack);\r\n\r\nmeshBack.position.z = -0.6;\r\nmeshBack.material.opacity = 0.25;\r\n\r\nscene.add(mesh);\r\nscene.add(meshBack);\r\n\r\n\/\/ \ud83d\udd34 MOUSE\r\nwindow.addEventListener(\"mousemove\", (e)=>{\r\n  uniforms.mouse.value.x = (e.clientX\/window.innerWidth - 0.5)*2;\r\n  uniforms.mouse.value.y = (e.clientY\/window.innerHeight - 0.5)*2;\r\n});\r\n\r\n\/\/ \ud83d\udd34 ANIMATION\r\nfunction animate(){\r\n  requestAnimationFrame(animate);\r\n\r\n  uniforms.time.value += 0.01;\r\n\r\n  \/\/ \ud83d\udd34 CAMERA-LIKE ROTATION (ARCHITECTURAL)\r\n  mesh.rotation.x = -0.9 + uniforms.mouse.value.y * 0.15;\r\n  mesh.rotation.y = uniforms.mouse.value.x * 0.2;\r\n\r\n  meshBack.rotation.x = mesh.rotation.x;\r\n  meshBack.rotation.y = mesh.rotation.y;\r\n\r\n  renderer.render(scene, camera);\r\n}\r\n\r\nanimate();\r\n\r\n\/\/ \ud83d\udd34 RESPONSIVE\r\nwindow.addEventListener(\"resize\", ()=>{\r\n  renderer.setSize(window.innerWidth, window.innerHeight);\r\n  camera.aspect = window.innerWidth\/window.innerHeight;\r\n  camera.updateProjectionMatrix();\r\n});\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8efcdf1 e-con-full e-flex e-con e-child\" data-id=\"8efcdf1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-749072c e-con-full e-flex e-con e-child\" data-id=\"749072c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-93cf1d6 elementor-widget elementor-widget-html\" data-id=\"93cf1d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Meta Artron<\/title>\r\n<style>\r\nbody {\r\n  margin: 0;\r\n  background: #0A0A0A;\r\n  font-family: {font-family:'Playfair Display',serif;\r\n  overflow-x: hidden;\r\n}\r\n\r\n\/* CANVAS *\/\r\n#bg {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 0;\r\n}\r\n\r\n\/* SCROLL *\/\r\n.scroll-container {\r\n  position: relative;\r\n  z-index: 10;\r\n}\r\n\r\n.section {\r\n  height: 100vh;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n}\r\n\r\n\/* TYPOGRAPHY LAYER *\/\r\n.text-layer {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  pointer-events: none;\r\n}\r\n\r\n.text-layer h1 {\r\n  position: absolute;\r\n  margin: 0;\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n}\r\n\r\n\/* LAYERS *\/\r\n.layer1 {font-family:'Playfair Display',serif;\r\n  font-size: 12vw;\r\n  color: #EAEAEA;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n\r\n}\r\n\r\n\/* SCROLL TRANSITIONS *\/\r\n.section.active .layer1 {\r\n  opacity: 1;\r\n  transform: translateY(0)\r\n  transition: all 1s ease;\r\n}\r\n\r\n\/* ABOUT TEXT *\/\r\n.about h2 {font-family:'Playfair Display',serif;\r\n  color: #EAEAEA;\r\n  font-size: 7vw;\r\n  font-weight: 300;\r\n  opacity: 0;\r\n  transform: translateY(80px);\r\n  transition: all 1s ease;\r\n}\r\n\r\n.section.active .about h2,\r\n.about.active h2 {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<canvas id=\"bg\"><\/canvas>\r\n\r\n<div class=\"scroll-container\">\r\n\r\n  <!-- HERO -->\r\n  <section class=\"section hero\">\r\n    <div class=\"text-layer\">\r\n      <h1 class=\"layer1\">META ARTRON<\/h1>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ABOUT -->\r\n  <section class=\"section about\">\r\n    <h2>Where Art meets function.<\/h2>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<!-- THREE JS -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r134\/three.min.js\"><\/script>\r\n\r\n<script>\r\n\/\/ THREE BACKGROUND\r\nconst scene = new THREE.Scene();\r\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth\/window.innerHeight, 0.1, 1000);\r\nconst renderer = new THREE.WebGLRenderer({\r\n  canvas: document.getElementById(\"bg\"),\r\n  alpha:true\r\n});\r\n\r\nrenderer.setSize(window.innerWidth, window.innerHeight);\r\ncamera.position.z = 8;\r\n\r\nconst geometry = new THREE.PlaneGeometry(20,20,100,100);\r\nconst material = new THREE.MeshBasicMaterial({\r\n  color:0x8b0000,\r\n  wireframe:true\r\n});\r\n\r\nconst mesh = new THREE.Mesh(geometry, material);\r\nscene.add(mesh);\r\n\r\nlet t=0;\r\n\r\nfunction animate(){\r\n requestAnimationFrame(animate);\r\n t+=0.02;\r\n\r\n let pos = mesh.geometry.attributes.position;\r\n\r\n for(let i=0;i<pos.count;i++){\r\n   let x = pos.getX(i);\r\n   let y = pos.getY(i);\r\n   pos.setZ(i, Math.sin(x+t)+Math.cos(y+t));\r\n }\r\n\r\n pos.needsUpdate=true;\r\n\r\n renderer.render(scene,camera);\r\n}\r\n\r\nanimate();\r\n\r\n\/\/ SCROLL INTERACTION\r\nconst sections = document.querySelectorAll(\".section\");\r\n\r\nwindow.addEventListener(\"scroll\", () => {\r\n  let scrollY = window.scrollY;\r\n\r\n  sections.forEach((section) => {\r\n    const offset = section.offsetTop;\r\n    const height = section.offsetHeight;\r\n\r\n    if (scrollY > offset - height \/ 2 && scrollY < offset + height \/ 2) {\r\n      section.classList.add(\"active\");\r\n    } else {\r\n      section.classList.remove(\"active\");\r\n    }\r\n  });\r\n});\r\n\r\n\/\/ RESPONSIVE\r\nwindow.addEventListener(\"resize\", () => {\r\n  renderer.setSize(window.innerWidth, window.innerHeight);\r\n  camera.aspect = window.innerWidth \/ window.innerHeight;\r\n  camera.updateProjectionMatrix();\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6803f56 e-con-full e-flex e-con e-child\" data-id=\"6803f56\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ead374 elementor-widget elementor-widget-html\" data-id=\"9ead374\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\"> \n<head> \n<meta charset=\"UTF-8\"> \n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> \n<title>Meta Artron \u2014 Where Art Becomes Architecture<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n<style> :root { --bg: rgba(10,10,10,0.3);\n--bg2: #ECEAE4;\n--black: rgba(15,15,15,0.5);\n--red: #AA0000; --muted: #aaa;\n--border: #2a2a2a;\n--white: #fff; } *,*::before,*::after{margin:0;\npadding:0;\nbox-sizing:border-box} html{scroll-behavior:smooth} body{background:#0A0A0A;\ncolor:var(--white);\nfont-family:'Inter',sans-serif;\nfont-weight:300;\noverflow-x:hidden;\ncursor:none}\n\n\/* CURSOR *\/ \n#cur{position:fixed;width:10px;height:10px;\nbackground:var(--red);\nborder-radius:50%;\npointer-events:none;\nz-index:9999;\ntransform:translate(-50%,-50%);\ntransition:width .25s,\nheight .25s}\n\n#cur-ring{position:fixed;\nwidth:36px;\nheight:36px;\nborder:1px solid rgba(204,0,0,.3);\nborder-radius:50%;pointer-events:none;\nz-index:9998;\ntransform:translate(-50%,-50%);\ntransition:all .18s ease-out}\n\n\/* ================= NAV ================= *\/\n\nnav{\n  position:fixed;\n  top:0;\n  left:0;\n  right:0;\n  z-index:200;\n\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n\n  padding:10px 52px;\n\n  background:rgba(10,10,10,0.35);\n  backdrop-filter:blur(14px);\n\n  border-bottom:1px solid transparent;\n  transition:border-color .3s;\n}\n\n\/* scroll state *\/\nnav.scrolled{\n  border-color:var(--border);\n}\n\n\/* ================= LOGO ================= *\/\n\n.nav-logo{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  text-decoration:none;\n}\n\n.nav-logo img{\n  height:28px;\n  width:auto;\n  display:block;\n}\n\n\/* ================= BRAND ================= *\/\n\n.nav-brand{\n  font-family:'Inter',sans-serif;\n  font-weight:500;\n  font-size:12px;\n  letter-spacing:.2em;\n  color:var(--white);\n  text-transform:uppercase;\n}\n\n\/* ================= LINKS ================= *\/\n\n.nav-links{\n  display:flex;\n  align-items:center;\n  gap:48px; \n}\n\n.nav-links a{\n  font-size:13px;\n  font-weight:400;\n  color:var(--white);\n  text-decoration:none;\n  letter-spacing:.04em;\n\n  position:relative;\n  transition:color .25s;\n}\n\n.nav-links a::after{\n  content:'';\n  position:absolute;\n  bottom:-2px;\n  left:0;\n\n  width:0;\n  height:1px;\n  background:var(--red);\n\n  transition:width .3s;\n}\n\n.nav-links a:hover{\n  color:var(--white);\n}\n\n.nav-links a:hover::after{\n  width:100%;\n}\n\n\/* ================= CTA ================= *\/\n\n.nav-cta{\n  display:flex;\n  align-items:center; \/* FIXED *\/\n  gap:8px;\n\n  background:var(--white);\n  color:var(--black);\n\n  padding:11px 20px;\n\n  font-size:11px;\n  font-weight:500;\n  letter-spacing:.1em;\n  text-transform:uppercase;\n\n  text-decoration:none;\n\n  transition:background .3s,color .3s;\n\n  border:none;\n  cursor:none;\n}\n\n.nav-cta:hover{\n  background:var(--red);\n  color:var(--white);\n}\n\n.nav-cta svg{\n  width:10px;\n  height:10px;\n}\n\n\/* ================= HAMBURGER ================= *\/\n\n.hamburger{\n  display:none;\n\n  flex-direction:column;\n  gap:5px;\n\n  background:none;\n  border:none;\n  cursor:none;\n\n  padding:4px; \n}\n\n.hamburger span{\n  width:24px;\n  height:1px;\n  background:var(--white);\n  display:block;\n\n  transition:.3s;\n}\n\n\/* open animation *\/\n.hamburger.open span:nth-child(1){\n  transform:translateY(6px) rotate(45deg);\n}\n\n.hamburger.open span:nth-child(2){\n  opacity:0;\n}\n\n.hamburger.open span:nth-child(3){\n  transform:translateY(-6px) rotate(-45deg);\n}\n\n\/* OVERLAY *\/ \n#overlay{position:fixed;inset:0;\nbackground:rgba(15,15,15,0.96);z-index:200;display:flex;flex-direction:column;justify-content:center;padding:0 10vw;opacity:0;pointer-events:none;transition:opacity .4s} \n\n#overlay.open{opacity:1;pointer-events:all} \n\n#overlay a{font-family:'Playfair Display',serif;\nfont-size:clamp(36px,7vw,82px);\nfont-weight:700;\ncolor:var(--white);\ntext-decoration:none;\nborder-bottom:1px solid #1f1f1f;\npadding:14px 0;\ndisplay:block;\ntransition:color .25s,\npadding-left .3s} \n\n#overlay a:hover{color:var(--red);padding-left:14px}\n\n\/* HERO *\/\n#hero{min-height:100vh;\npadding:150px 52px 80px;\ndisplay:flex;\nflex-direction:column;\njustify-content:flex-end;\nposition:relative;\noverflow:hidden;\nborder-bottom:1px solid var(--border);\nbackground:rgba(10,10,10,0.5)} \n\n.hero-tag{font-size:14px;\nletter-spacing:.38em;\ncolor:var(--white);\ntext-transform:uppercase;\nmargin-bottom:28px;\ndisplay:flex;\nalign-items:center;\ngap:12px} \n\n.hero-tag::before{content:'';\nwidth:30px;\nheight:1px;\nbackground:var(--white)} \n\n.hero-title{font-family:'Playfair Display',serif;\nfont-size:clamp(58px,9.5vw,134px);\nfont-weight:900;\nline-height:.93;\nletter-spacing:-.025em;\nmax-width:920px;\ncolor:var(--white)} \n\n.hero-title em{font-style:italic;\ncolor:var(--red)} \n\n.hero-bottom{display:flex;\njustify-content:space-between;\nalign-items:flex-end;\nmargin-top:60px;\nflex-wrap:wrap;gap:20px} \n\n.hero-desc{font-size:15px;\nline-height:1.8;\ncolor:rgba(255,255,255,.55);max-width:400px} \n\n.hero-scroll{display:flex;align-items:center;\ngap:12px;font-size:10px;letter-spacing:.5em;color:rgba(255,255,255,.35);text-transform:uppercase} \n\n.hero-scroll-line{width:50px;\nheight:1px;\nbackground:rgba(255,255,255,1);\nanimation:linesway 2.2s ease-in-out infinite} \n\n@keyframes linesway{0%,100%{width:50px}50%{width:82px}}\n\n\n\/* MARQUEE *\/\n.marquee-wrap{overflow:hidden;\nborder-top:1px solid var(--border);\nborder-bottom:1px solid var(--border);\npadding:17px 0;\nbackground:rgba(10,10,10,0.8)} \n\n.marquee-track{\ndisplay:flex;\nanimation:marquee 24s linear infinite;\nwidth:max-content;\nwhite-space:nowrap} \n\n.marquee-track span{font-family:'Playfair Display',serif;\nfont-size:17px;\nfont-weight:700;\nfont-style:italic;color:var(--white);\npadding:0 26px;\nletter-spacing:.02em} \n\n.marquee-track span.dot{color:var(--red);\nfont-style:normal;\nfont-size:15px;\nvertical-align:center}\n\n@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}\n\n\n\/* Featured SECTION LABEL *\/ \n.sec-lbl{font-size:14px;\nletter-spacing:.45;\ncolor:var(--white);\ntext-transform:uppercase;\ndisplay:flex;\nalign-items:center;\ngap:12px;\nmargin-bottom:36px} \n\n.sec-lbl::before{content:'';\nwidth:22px;\nheight:1px;\nbackground:var(--white)}\n\n\n\/* Featured *\/\n#work{\n    padding:96px 52px;\nbackground:rgba(10,10,10,0.7)\n    \n}\n.work-header{display:flex;justify-content:space-between;\nalign-items:flex-end;margin-bottom:52px}\n\n.work-title{font-family:'Playfair Display',serif;font-size:clamp(36px,5vw,62px);font-weight:900;line-height:1;color:var(--white)} \n\n.work-title em{font-style:italic;color:var(--red)} \n\n.see-all{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--white);border-bottom:1px solid var(--white);padding-bottom:3px;transition:color .25s,border-color .25s} \n\n.see-all:hover{color:var(--red);border-color:var(--red)} .see-all svg{width:13px;transition:transform .3s} .see-all:hover svg{transform:translate(3px,-3px)} \n\n.pgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:10px}\n.pgrid-r{display:grid;grid-template-rows:1fr 1fr;gap:10px}\n.proj{position:relative;overflow:hidden;background:#222;cursor:none;display:block;text-decoration:none} \n\n.proj-big{aspect-ratio:3\/3} \n.proj-sm{aspect-ratio:16\/9.083} \n\n.proj img{width:100%;height:100%;object-fit:cover;\nfilter:brightness(.85) saturate(.9);transition:transform .72s cubic-bezier(.25,.46,.45,.94),filter .72s;display:block}\n\n.proj:hover img{transform:scale(1.06);filter:brightness(.65) saturate(.8)} \n\n.proj-info{position:absolute;bottom:0;left:0;right:0;padding:26px 26px 22px;background:linear-gradient(to top,rgba(0,0,0,.70),transparent);transform:translateY(10px);opacity:0;transition:transform .4s,opacity .4s} \n\n.proj:hover .proj-info{transform:translateY(0);opacity:1} \n\n.proj-cat{font-size:9px;letter-spacing:.3em;color:rgba(255,255,255,.6);text-transform:uppercase;margin-bottom:5px} \n.proj-name{font-family:'Playfair Display',serif;font-size:21px;font-weight:700;color:#fff;line-height:1.2} \n.proj-loc{font-size:11px;color:rgba(255,255,255,.5);margin-top:4px} \n.proj-idx{position:absolute;top:18px;left:22px;font-size:9px;letter-spacing:.2em;color:rgba(255,255,255,.28)}\n\n\/* WHY *\/\n#why{padding:96px 52px;\nbackground:rgba(15,15,15,0.7);\ncolor:var(--white);\nborder-top:1px solid #ffffff} \n\n.why-inner{display:grid;\ngrid-template-columns:1fr 1.55fr;\ngap:80px;\nalign-items:start} \n\n.why-heading{font-family:'Playfair Display',serif;\nfont-size:clamp(30px,4vw,52px);\nfont-weight:900;\nline-height:1.1;\ncolor:var(--white)} \n\n.why-heading em{font-style:italic;color:var(--red)} \n\n.why-body{font-size:14px;\nline-height:1.9;\ncolor:rgba(255,255,255,.70);\nmargin-top:22px;\nmax-width:420px} \n\n.why-cta{display:inline-flex;\nalign-items:center;gap:9px;\nmargin-top:34px;\nbackground:var(--white);\ncolor:#000;\npadding:13px 28px;\nfont-size:11px;\nfont-weight:500;\nletter-spacing:.1em;\ntext-transform:uppercase;\ntext-decoration:none;\ntransition:background .3s} \n\n.why-cta:hover{background:#aa0000} \n\n.why-imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px} \n.why-img{aspect-ratio:4\/3;overflow:hidden} \n.why-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.65) grayscale(.2);transition:filter .5s} \n.why-img:hover img{filter:brightness(.85) grayscale(0)}\n\n\/* CAPABILITIES *\/ \n#caps{padding:80px 52px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(15,15,15,0.7)}\n\n.caps-h{font-family:'Playfair Display',serif;font-size:clamp(30px,4vw,52px);font-weight:900;margin-bottom:48px;color:var(--white)} \n.caps-h em{font-style:italic;color:var(--red)} \n\n.caps-grid{display:grid;\ngrid-template-columns:repeat(5,1fr);\nbackground:rgba(15,15,15,0.7); \ngap:0}\n\n.cap{padding:38px 26px 34px;\nborder-right:1px solid var(--border);\nposition:relative;\noverflow:hidden;cursor:none;\ntransition:background .35s} \n.cap:hover{background:rgba(255,0,0,.5)} \n\n.cap:first-child{border-left:1px solid var(--border)} \n\n.cap-num{font-size:10px;letter-spacing:.3em;color:rgba(255,255,255,0.7);margin-bottom:46px;transition:color .3s}\n.cap-num:hover{color:rgba(255,255,255,1)} \n\n.cap-title{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;line-height:1.25;margin-bottom:12px;color:var(--white);transition:color .3s} \n.cap-title:hover{color:rgba(255,255,255,1)}\n\n.cap-desc{font-size:11px; line-height:1.8; color:rgba(255,255,255,.7); transition:color .3s} \n.cap-desc:hover{color:rgba(255,255,255,1)} \n\n.cap-arr{position:absolute; bottom:26px; right:22px; font-size:16px; color:rgba(255,255,255,.3); transition:color .3s,transform .3s} \n.cap-arr:hover \n.cap-arr{color:var(--red);transform:translate(3px,-3px)}\n\n\/* ABOUT *\/ \n#about{padding:96px 52px;\ndisplay:grid;grid-template-columns:1fr 1fr;gap:80px;\nalign-items:center;\nborder-top:1px solid var(--border);\nbackground:rgba(10,10,10,0.7)} \n\n.about-img-w{position:relative} \n.about-img{width:100%;\naspect-ratio:1\/0.9;\nobject-fit:cover;display:block} \n\n.about-badge{position:absolute;bottom:-18px;right:-18px;background:var(--red);color:#fff;width:116px;height:116px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;text-align:center;letter-spacing:.06em;text-transform:uppercase;line-height:1.4} \n.about-badge strong{font-size:26px;font-weight:700;display:block;letter-spacing:-.02em} \n\n.about-heading{font-family:'Playfair Display',serif;font-size:clamp(30px,3.5vw,40px);font-weight:900;line-height:1.1;margin-bottom:22px;color:var(--white)} \n.about-heading em{font-style:italic;color:var(--red)} .about-body{font-size:14px;line-height:1.9;color:rgba(255,255,255,.45);margin-bottom:30px} \n\n.about-stats{display:flex;gap:0;margin-bottom:34px} \n.astat{flex:1;padding:18px 0;\nborder-top:1px solid var(--border)} \n.astat:not(:last-child){margin-right:22px} \n\n.astat-n{font-family:'Playfair Display',serif;font-size:38px;font-weight:900;color:var(--white);line-height:1} \n.astat-l{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.15em;text-transform:uppercase;margin-top:4px} \n\n.btn-out{display:inline-flex;\nbackground:var(--white);\nalign-items:center;\ngap:8px;\npadding:12px 26px;\nfont-size:11px;\nfont-weight:500;\nletter-spacing:.1em;\ntext-transform:uppercase;\ntext-decoration:none;\ncolor:var(--black);\ntransition:background .3s,color .3s} \n\n.btn-out:hover{background:var(--red);\ncolor:var(--white)}\n\n\/* TICKER *\/\n#clients{padding:17px 0;background:rgba(10,10,10,0.8);\noverflow:hidden;\nborder-top:1px solid #181818} \n.ticker-track{display:flex;\nalign-items:center;\ngap:56px;\n\nanimation:ticker 24s linear infinite;width:max-content}\n\n.ticker-item{font-family:'Playfair Display',serif;\nfont-size:13px;\nfont-weight:700;\ncolor:rgba(255,255,255,.5);\nletter-spacing:.24em;\ntext-transform:uppercase;\nwhite-space:nowrap;\ntransition:color .3s} \n\n.ticker-item:hover{color:rgba(255,255,255,.65)} \n\n.t-dot{color:var(--red);\nfont-size:12px;\nflex-shrink:0} \n\n@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} \n\n\/* INSIGHTS *\/\n#insights{padding:96px 52px;background:rgba(10,10,10,0.5)} .ins-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px} .ins-title{font-family:'Playfair Display',serif;font-size:clamp(32px,4.5vw,58px);font-weight:900;line-height:1;color:var(--white)} .ins-title em{font-style:italic;color:var(--red)} .ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .ins-card{cursor:none} .ins-img{aspect-ratio:3\/2;overflow:hidden;margin-bottom:18px;background:#1a1a1a} .ins-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.25,.46,.45,.94)} .ins-card:hover .ins-img img{transform:scale(1.06)} .ins-date{font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.35);margin-bottom:9px} .ins-name{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;line-height:1.3;color:var(--white);transition:color .25s} .ins-card:hover .ins-name{color:var(--red)} \n\n\/* CTA *\/\n#cta{padding:120px 52px;\nbackground:rgba(15,15,15,0.5);\ncolor:#fff;display:flex;\nflex-direction:column;\nalign-items:center;\ntext-align:center;border-top:1px solid #181818} \n\n.cta-tag{font-size:10px;letter-spacing:.45em;color:var(--red);text-transform:uppercase;margin-bottom:26px} \n\n.cta-heading{font-family:'Playfair Display',serif;font-size:clamp(42px,8.5vw,112px);font-weight:900;line-height:.93;letter-spacing:-.025em;margin-bottom:48px;color:var(--white)} \n\n.cta-heading em{font-style:italic;color:var(--red)} \n\n.cta-btns{display:flex;\nalign-items:center;\ngap:18px;\nflex-wrap:wrap;\njustify-content:center} \n\n.cta-main{background:var(--white);\ncolor:#000;\npadding:16px 40px;\nfont-size:11px;\nfont-weight:500;\nletter-spacing:.12em;\ntext-transform:uppercase;\ntext-decoration:none;\ntransition:background .3s} \n\n.cta-main:hover{background:#aa0000;\ncolor:rgba(255,255,255,.65)}\n\n.cta-ghost{background:var(--white);\ncolor:#000;\npadding:15px 32px;\nfont-size:11px;\nfont-weight:400;\nletter-spacing:.1em;\ntext-transform:uppercase;\ntext-decoration:none;\ntransition:border-color .3s}\n\n.cta-ghost:hover{background:#aa0000;\ncolor:rgba(255,255,255,.65)}\n\n\/* FOOTER *\/ \nfooter{\nbackground:rgba(15,15,15,0.5);\ncolor:#fff;\nborder-top:1px solid #181818;\npadding:68px 52px 38px\n} \n\n.ft{\ndisplay:grid;\ngrid-template-columns:1.5fr 1fr 1fr 1fr 1fr;\ngap:48px;\npadding-bottom:48px;\nborder-bottom:1px solid #1c1c1c;\nmargin-bottom:32px\n} \n\n\/* Logo + Brand Name *\/\n.ft-brand{\ndisplay:flex;\nalign-items:center;\ngap:14px;\nfont-family:'Playfair Display',serif;\nfont-size:22px;\nfont-weight:900;\nmargin-bottom:14px;\ncolor:var(--white)\n}\n\n\/* Logo Image *\/\n.ft-brand img{\nwidth:auto;\nheight:28px;\nobject-fit:contain;\ndisplay:block\n}\n\n.ft-sub{\nfont-size:13px;\ncolor:rgba(255,255,255,.35);\nline-height:1.7\n} \n\n.ft-col-t{\nfont-size:10px;\nletter-spacing:.35em;\ncolor:rgba(255,255,255,.35);\ntext-transform:uppercase;\nmargin-bottom:18px\n} \n\n.ft-col a{\ndisplay:block;\nfont-size:13px;\ncolor:rgba(255,255,255,.4);\ntext-decoration:none;\nmargin-bottom:9px;\ntransition:color .25s\n} \n\n.ft-col a:hover{\ncolor:#fff\n}\n\n.ft-col p{\nfont-size:13px;\ncolor:rgba(255,255,255,.35);\nline-height:1.7\n} \n\n.ft-bottom{\ndisplay:flex;\njustify-content:space-between;\nalign-items:center;\nflex-wrap:wrap;\ngap:14px\n} \n\n.ft-copy{\nfont-size:11px;\ncolor:rgba(255,255,255,.2);\nletter-spacing:.08em\n} \n\n.btt{\ndisplay:flex;\nalign-items:center;\ngap:6px;\nfont-size:10px;\ncolor:rgba(255,255,255,.2);\nletter-spacing:.15em;\ntext-transform:uppercase;\ntext-decoration:none;\ntransition:color .25s\n} \n\n.btt:hover{\ncolor:#fff\n}\n\n\/* REVEAL *\/\n.rev{opacity:0;transform:translateY(34px);transition:opacity .85s ease,transform .85s ease} \n.rev.in{opacity:1;transform:translateY(0)} .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s} \n\n\/* RESPONSIVE *\/\n@media(max-width:1024px){ nav{padding:18px 22px} .nav-links{display:none} .hamburger{display:flex} #hero,#work,#why,#caps,#about,#insights,#cta,footer{padding-left:22px;padding-right:22px} .pgrid{grid-template-columns:1fr} .pgrid-r{grid-template-rows:auto;grid-template-columns:1fr 1fr} .why-inner,#about{grid-template-columns:1fr;gap:38px} .caps-grid{grid-template-columns:repeat(2,1fr)} .ins-grid{grid-template-columns:1fr 1fr} .ft{grid-template-columns:1fr 1fr;gap:36px} } @media(max-width:600px){ .caps-grid{grid-template-columns:1fr} .ins-grid{grid-template-columns:1fr} .pgrid-r{grid-template-columns:1fr} .why-imgs{grid-template-columns:1fr} .about-stats{flex-wrap:wrap} .ft{grid-template-columns:1fr;gap:26px} } <\/style> <\/head> <body> <div id=\"cur\"><\/div> <div id=\"cur-ring\"><\/div>\n\n<!-- NAV -->\n<nav id=\"nav\">\n\n  <!-- LOGO (FIXED) -->\n  <a href=\"https:\/\/metaartron.com\" class=\"nav-logo\">\n    <img decoding=\"async\" src=\"https:\/\/metaartron.com\/wp-content\/uploads\/2026\/04\/Meta-Artron-Logo-1.png\" alt=\"Meta Artron\">\n  <\/a>\n\n  <!-- LINKS -->\n  <div class=\"nav-links\">\n    <a href=\"#work\">Work<\/a>\n    <a href=\"#about\">About<\/a>\n    <a href=\"#caps\">Services<\/a>\n    <a href=\"#insights\">Insights<\/a>\n  <\/div>\n\n  <!-- CTA -->\n  <a href=\"https:\/\/wa.me\/919909930477\" class=\"nav-cta\">\n    Contact\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n      <line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/>\n      <polyline points=\"7 7 17 7 17 17\"\/>\n    <\/svg>\n  <\/a>\n\n  <!-- HAMBURGER -->\n  <button class=\"hamburger\" id=\"ham\" aria-label=\"Open Menu\">\n    <span><\/span>\n    <span><\/span>\n    <span><\/span>\n  <\/button>\n\n<\/nav>\n\n<!-- OVERLAY -->\n<div id=\"overlay\">\n  <a href=\"#work\">Work<\/a>\n  <a href=\"#about\">About<\/a>\n  <a href=\"#caps\">Services<\/a>\n  <a href=\"#insights\">Insights<\/a>\n  <a href=\"https:\/\/wa.me\/919909930477\">Contact<\/a>\n<\/div>\n\n<!-- HERO --> \n<section id=\"hero\"> <p class=\"hero-tag\">Meta Artron \u00b7 Mumbai, India<\/p> \n<h1 class=\"hero-title rev\">Where <em>Art<\/em><br>Becomes<br>Architecture<\/h1> <div class=\"hero-bottom rev d1\"> <p class=\"hero-desc\">A design intelligence studio rooted in geometry, precision and spatial thinking \u2014 creating spaces that feel inevitable.<\/p> <div class=\"hero-scroll\"><div class=\"hero-scroll-line\"><\/div>Scroll to explore<\/div> <\/div> <\/section>\n<!-- MARQUEE -->\n<div class=\"marquee-wrap\"> <div class=\"marquee-track\"> <span>Architectural Planning<\/span><span class=\"dot\">\u25cf<\/span> <span>3D Visualization<\/span><span class=\"dot\">\u25cf<\/span> <span>Interior Design<\/span><span class=\"dot\">\u25cf<\/span> <span>Product Design<\/span><span class=\"dot\">\u25cf<\/span> <span>Model Making<\/span><span class=\"dot\">\u25cf<\/span> <span>Parametric Design<\/span><span class=\"dot\">\u25cf<\/span> <span>Luxury Spaces<\/span><span class=\"dot\">\u25cf<\/span> <span>Architectural Planning<\/span><span class=\"dot\">\u25cf<\/span> <span>3D Visualization<\/span><span class=\"dot\">\u25cf<\/span> <span>Interior Design<\/span><span class=\"dot\">\u25cf<\/span> <span>Parametric Facade<\/span><span class=\"dot\">\u25cf<\/span> <span>Model Making<\/span><span class=\"dot\">\u25cf<\/span> <span>Parametric Design<\/span><span class=\"dot\">\u25cf<\/span> <span>Luxury Spaces<\/span><span class=\"dot\">\u25cf<\/span> <\/div> <\/div>\n<!-- WORK -->\n<section id=\"work\"> <div class=\"work-header rev\"> <div> <p class=\"sec-lbl\">Every Line Begins with a Question.<\/p> <h2 class=\"work-title\">Case studies &<br><em>Featured<\/em> Projects<\/h2> <\/div> \n<a href=\"#cta\" class=\"see-all\">Explore more <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg> <\/a> <\/div> <div class=\"pgrid rev d1\"> <a href=\"#\" class=\"proj proj-big\"> \n\n<img decoding=\"async\" src=\"https:\/\/metaartron.com\/wp-content\/uploads\/2026\/04\/CUHP-MODEL.png\" alt=\"\"> \n<span class=\"proj-idx\">01<\/span> <div class=\"proj-info\"> <p class=\"proj-cat\">Model Making <\/p> \n<h3 class=\"proj-name\">Central University Of Himachal Pradesh<\/h3> <\/div> <\/a> <div class=\"pgrid-r\"> <a href=\"#\" class=\"proj proj-sm\"> \n\n<img decoding=\"async\" src=\"https:\/\/metaartron.com\/wp-content\/uploads\/2026\/04\/Aangan-Aranya.png\" alt=\"\"> \n<span class=\"proj-idx\">02<\/span> <div class=\"proj-info\"> <p class=\"proj-cat\">Architectural Planning<\/p> \n<h3 class=\"proj-name\">Aangan Aranya<\/h3> <\/div> <\/a> <a href=\"#\" class=\"proj proj-sm\"> <img decoding=\"async\" src=\"https:\/\/metaartron.com\/wp-content\/uploads\/2026\/04\/Atria-Studio-1.png\" alt=\"\">\n<span class=\"proj-idx\">03<\/span> <div class=\"proj-info\"> <p class=\"proj-cat\">Interior<\/p> \n<h3 class=\"proj-name\">Atria Studio<\/h3> <\/div> <\/a> <\/div> <\/div> <\/section> \n<!-- WHY -->\n<section id=\"why\"> <div class=\"why-inner\"> <div class=\"rev\"> <p class=\"sec-lbl\" style=\"color:var(--white)\">Why Meta Artron<\/p> <h2 class=\"why-heading\">Why leading clients<br>partner with <em>us.<\/em><\/h2> <p class=\"why-body\">From precision architectural plans to cinematic 3D renders and handcrafted models, we bring design intelligence that goes beyond aesthetics \u2014 spaces rooted in geometry and lived experience.<\/p> \n<a href=\"#cta\" class=\"why-cta\">Discover our work <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg> <\/a> <\/div> \n\n<div class=\"why-imgs rev d2\"> \n<div class=\"why-img\"><img decoding=\"async\" src=\"https:\/\/metaartron.com\/wp-content\/uploads\/2026\/04\/nawaz-House.png\" alt=\"\"><\/div>\n\n<div class=\"why-img\">\n    <img decoding=\"async\" src=\"https:\/\/metaartron.com\/wp-content\/uploads\/2026\/04\/Twin-Brothers.png\" alt=\"\"><\/div> \n    \n<div class=\"why-img\">\n    <img decoding=\"async\" src=\"https:\/\/metaartron.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-Apr-27-2026-12_09_05-PM.png\" alt=\"\"><\/div>\n<div class=\"why-img\">\n    <img decoding=\"async\" src=\"https:\/\/metaartron.com\/wp-content\/uploads\/2026\/04\/Sunworld-scaled.png\" alt=\"\"><\/div> <\/div> <\/div> <\/section>\n<!-- CAPABILITIES -->\n<section id=\"caps\"> <p class=\"sec-lbl rev\">What We Create<\/p> <h2 class=\"caps-h rev d1\">Our <em>Capabilities<\/em><\/h2> <div class=\"caps-grid rev d2\"> <div class=\"cap\"><p class=\"cap-num\">01<\/p><h3 class=\"cap-title\">Architectural Planning<\/h3><p class=\"cap-desc\">Spatial systems designed with precision, logic and vision \u2014 from site analysis to built form.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div> <div class=\"cap\"><p class=\"cap-num\">02<\/p><h3 class=\"cap-title\">3D Visualization & Rendering<\/h3><p class=\"cap-desc\">High-fidelity visual narratives that bring unbuilt ideas to photographic life.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div> <div class=\"cap\"><p class=\"cap-num\">03<\/p><h3 class=\"cap-title\">Interior Design<\/h3><p class=\"cap-desc\">Spaces crafted for experience, atmosphere and enduring identity.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div> <div class=\"cap\"><p class=\"cap-num\">04<\/p><h3 class=\"cap-title\">Product Design<\/h3><p class=\"cap-desc\">Functional objects shaped through form, detail and purposeful thinking.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div> <div class=\"cap\"><p class=\"cap-num\">05<\/p><h3 class=\"cap-title\">Model Making<\/h3><p class=\"cap-desc\">Physical expressions of design \u2014 bridging concept and tangible reality.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div> <\/div> <\/section>\n<!-- ABOUT -->\n<section id=\"about\"> <div class=\"about-img-w rev\"> <img decoding=\"async\" class=\"about-img\" src=\"https:\/\/metaartron.com\/wp-content\/uploads\/2026\/04\/Meta-Artron-THEME.png\" alt=\"Studio\"> <div class=\"about-badge\"><strong>08+<\/strong>Years of<br>Practice<\/div> <\/div> <div class=\"rev d2\"> <p class=\"sec-lbl\">WHO WE ARE<\/p> <h2 class=\"about-heading\">Helping clients build<br>a world <em>forward<\/em><\/h2> <p class=\"about-body\">Meta Artron is a design intelligence studio advancing the future of architecture through geometry, precision, and intent. Working across architecture, interiors, and product design, we translate ideas into refined, buildable realities.<br><br>Each project is anchored in a strong conceptual framework and shaped through disciplined exploration and craftsmanship. The outcome is work that feels inevitable\u2014timeless in presence, precise in execution, and powerful in experience.<\/p> \n<div class=\"about-stats\"> \n<div class=\"astat\"><div class=\"astat-n\">45+<\/div><div class=\"astat-l\">Projects Done<\/div><\/div> <div class=\"astat\"><div class=\"astat-n\">05<\/div><div class=\"astat-l\">Disciplines<\/div><\/div> <div class=\"astat\"><div class=\"astat-n\">100%<\/div><div class=\"astat-l\">Satisfaction<\/div><\/div> <\/div> <a href=\"#cta\" class=\"btn-out\">Work with us <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg> <\/a> <\/div> <\/section> \n<!-- CLIENT TICKER -->\n<section id=\"clients\"> <div style=\"overflow:hidden\"> <div class=\"ticker-track\"> <span class=\"ticker-item\">Residential<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Commercial<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Hospitality<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Luxury Villas<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Office Spaces<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Retail Design<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Farmhouses<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Urban Planning<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Product Shoots<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Residential<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Commercial<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Hospitality<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Luxury Villas<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Office Spaces<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Retail Design<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Farmhouses<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Urban Planning<\/span><span class=\"t-dot\">\u25cf<\/span> <span class=\"ticker-item\">Product Shoots<\/span><span class=\"t-dot\">\u25cf<\/span> <\/div> <\/div> <\/section> \n<!-- INSIGHTS -->\n<section id=\"insights\"> <div class=\"ins-header rev\"> <div> <p class=\"sec-lbl\">Studio Insights<\/p> <h2 class=\"ins-title\">Ideas in <em>Motion<\/em><\/h2> <\/div> <a href=\"#\" class=\"see-all\">See all insights <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" width=\"13\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg> <\/a> <\/div> <div class=\"ins-grid\"> \n<div class=\"ins-card rev\"> <div class=\"ins-img\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618219944342-824e40a13285?w=640&q=80\" alt=\"\"><\/div> <p class=\"ins-date\">12 Mar 25.<\/p> \n<h3 class=\"ins-name\">How geometry shapes the future of luxury architecture<\/h3> <\/div> \n<div class=\"ins-card rev d1\"> <div class=\"ins-img\">\n    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600566752355-35792bedcfea?w=640&q=80\" alt=\"\"><\/div> \n    <p class=\"ins-date\">28 Jan 25.<\/p> <h3 class=\"ins-name\">From 3D render to built reality \u2014 our visualization process<\/h3> <\/div> \n    <div class=\"ins-card rev d2\"> <div class=\"ins-img\">\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1503387762-592deb58ef4e?w=640&q=80\" alt=\"\"><\/div> \n        <p class=\"ins-date\">05 Dec 24.<\/p> <h3 class=\"ins-name\">Why architectural model making still matters in the digital age<\/h3> <\/div> <\/div> <\/section> \n<!-- CTA --> \n<section id=\"cta\"> <p class=\"cta-tag\">(Contact)<\/p> <h2 class=\"cta-heading rev\">Ready to discuss<br>your <em>next project?<\/em><\/h2> <div class=\"cta-btns rev d1\"> <a href=\"mailto:meta.artron@gmail.com\" class=\"cta-main\">Start a project<\/a> <a href=\"tel:+919909930477\" class=\"cta-ghost\">+91 99099 30477<\/a> <\/div> <\/section> \n\n<!-- FOOTER --> \n<footer> \n\n<div class=\"ft\">\n\n    <div>\n        <!-- Logo + Brand -->\n        <div class=\"ft-brand\">\n            <img decoding=\"async\" src=\"https:\/\/metaartron.com\/wp-content\/uploads\/2026\/04\/Meta-Artron-Logo-1.png\" alt=\"Meta Artron Logo\">\n            <span>Meta Artron<\/span>\n        <\/div>\n\n        <p class=\"ft-sub\">\n            A design intelligence studio specialising in architecture, 3D visualization,\n            interior design, product design and model making.\n        <\/p>\n    <\/div>\n\n    <div class=\"ft-col\">\n        <p class=\"ft-col-t\">Services<\/p> \n        <a href=\"#\">Architectural Planning<\/a> \n        <a href=\"#\">3D Visualization<\/a> \n        <a href=\"#\">Interior Design<\/a> \n        <a href=\"#\">Product Design<\/a> \n        <a href=\"#\">Model Making<\/a> \n    <\/div>\n\n    <div class=\"ft-col\">\n        <p class=\"ft-col-t\">Studio<\/p> \n        <a href=\"#\">About<\/a> \n        <a href=\"#\">Work<\/a> \n        <a href=\"#\">Insights<\/a> \n        <a href=\"#\">Careers<\/a> \n    <\/div>\n\n    <div class=\"ft-col\">\n        <p class=\"ft-col-t\">Hello<\/p> \n        <a href=\"mailto:meta.artron@gmail.com\">meta.artron@gmail.com<\/a> \n        <a href=\"tel:+919909930477\">+91 99099 30477<\/a> \n\n        <p style=\"margin-top:10px;color:rgba(255,255,255,.35)\">\n            Mumbai,<br>Maharashtra, India\n        <\/p>\n\n        <p style=\"margin-top:12px;font-size:11px;color:rgba(255,255,255,.2)\">\n            Mon \u2013 Fri \u00b7 9AM \u2013 6PM\n        <\/p>\n    <\/div>\n\n<\/div>\n\n<div class=\"ft-bottom\">\n    <span class=\"ft-copy\">All content \u00a9 Meta Artron 2025<\/span>\n\n    <a href=\"#\" class=\"btt\">\n        Back to top\n        <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"5\"\/>\n            <polyline points=\"5 12 12 5 19 12\"\/>\n        <\/svg>\n    <\/a>\n<\/div>\n\n<\/footer>\n\n<script>\nconst cur=document.getElementById('cur'),\nring=document.getElementById('cur-ring');\n\ndocument.addEventListener('mousemove',e=>{\ncur.style.left=e.clientX+'px';\ncur.style.top=e.clientY+'px';\nring.style.left=e.clientX+'px';\nring.style.top=e.clientY+'px';\n});\n\ndocument.querySelectorAll('a,button,.cap,.proj,.ins-card').forEach(el=>{\nel.addEventListener('mouseenter',()=>{\ncur.style.width='16px';\ncur.style.height='16px';\nring.style.width='52px';\nring.style.height='52px'\n});\n\nel.addEventListener('mouseleave',()=>{\ncur.style.width='10px';\ncur.style.height='10px';\nring.style.width='36px';\nring.style.height='36px'\n});\n});\n\nconst nav=document.getElementById('nav');\nwindow.addEventListener('scroll',()=>{\nnav.classList.toggle('scrolled',scrollY>60)\n});\n\nconst ham=document.getElementById('ham'),\novl=document.getElementById('overlay');\n\nham.addEventListener('click',()=>{\nham.classList.toggle('open');\novl.classList.toggle('open')\n});\n\novl.querySelectorAll('a').forEach(a=>\na.addEventListener('click',()=>{\nham.classList.remove('open');\novl.classList.remove('open')\n})\n);\n\nconst obs=new IntersectionObserver(entries=>\nentries.forEach(e=>{\nif(e.isIntersecting)e.target.classList.add('in')\n}),{threshold:.1});\n\ndocument.querySelectorAll('.rev').forEach(el=>obs.observe(el));\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Meta Artron META ARTRON Where Art meets function. Meta Artron \u2014 Where Art Becomes Architecture Work About Services Insights Contact Work About Services Insights Contact Meta Artron \u00b7 Mumbai, India Where ArtBecomesArchitecture A design intelligence studio rooted in geometry, precision and spatial thinking \u2014 creating spaces that feel inevitable. Scroll to explore Architectural Planning\u25cf 3D &#8230; <a title=\"Home Page\" class=\"read-more\" href=\"https:\/\/metaartron.com\/\" aria-label=\"Read more about Home Page\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":406,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":888,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/888"}],"wp:attachment":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}