initial commit Immo-Predict V4 !

.gitignore

@@ -0,0 +1,9 @@
+venv/
+__pycache__/
+*.pkl
+data/
+.ipynb_checkpoints/
+outputs/
+*.pyc
+*.egg-info/
+.env 

.~lock.documentation_immo_predict_v2_v3.docx#

@@ -0,0 +1 @@
+,DESKTOP-AUN3R3J/Elyas,,12.03.2026 21:10,file:///C:/Users/Elyas/AppData/Roaming/OfficeDocOpener/4;

src/api.py

@@ -0,0 +1,130 @@
+from flask import Flask, jsonify, request
+from flask_cors import CORS
+import joblib
+import pandas as pd
+
+app = Flask(__name__, static_folder='static', static_url_path='')
+CORS(app)
+
+# Lazy loading
+_models = {}
+
+def get_models():
+    if not _models:
+        print("Chargement des modèles...")
+        _models['model_multi'] = joblib.load('src/model_multi.pkl')
+        _models['modeles_segment'] = joblib.load('src/modeles_segment.pkl')
+        _models['le'] = joblib.load('src/label_encoder_multi.pkl')
+        _models['features'] = joblib.load('src/features_multi.pkl')
+        print("Modèles chargés !")
+    return _models
+
+# Chargement des communes (léger, pas de modèle ML)
+_df_ref = None
+
+def get_df_ref():
+    global _df_ref
+    if _df_ref is None:
+        _df_ref = pd.read_csv(
+            'data/valeursfoncieres-2025-s1.txt/ValeursFoncieres-2025-S1.txt',
+            sep='|', low_memory=False,
+            usecols=['Commune', 'Code departement']
+        ).dropna()
+        _df_ref['Commune'] = _df_ref['Commune'].str.strip().str.upper()
+        _df_ref['Code departement'] = _df_ref['Code departement'].str.strip()
+    return _df_ref
+
+def assigner_segment(type_bien, prix):
+    t = 'appart' if type_bien == 'Appartement' else 'maison'
+    if prix < 100000: g = 'bas'
+    elif prix < 250000: g = 'moyen_bas'
+    elif prix < 500000: g = 'moyen_haut'
+    else: g = 'haut'
+    return f"{t}_{g}"
+
+precision_map = {
+    'appart_bas': 65.9, 'appart_moyen_bas': 83.4,
+    'appart_moyen_haut': 87.5, 'appart_haut': 79.5,
+    'maison_bas': 50.4, 'maison_moyen_bas': 81.1,
+    'maison_moyen_haut': 86.7, 'maison_haut': 78.8
+}
+
+@app.route('/')
+def index():
+    return app.send_static_file('index.html')
+
+@app.route('/api/departements')
+def get_departements():
+    df = get_df_ref()
+    depts = sorted(df['Code departement'].unique().tolist())
+    return jsonify(depts)
+
+@app.route('/api/communes/<departement>')
+def get_communes(departement):
+    df = get_df_ref()
+    communes = sorted(
+        df[df['Code departement'] == departement]['Commune'].unique().tolist()
+    )
+    return jsonify(communes)
+
+@app.route('/api/predict', methods=['POST'])
+def predict():
+    m = get_models()
+    model_multi = m['model_multi']
+    modeles_segment = m['modeles_segment']
+    le = m['le']
+    features = m['features']
+
+    data = request.json
+    type_bien = data['type_bien']
+    surface = float(data['surface'])
+    nb_pieces = float(data['nb_pieces'])
+    nb_lots = float(data['nb_lots'])
+    surface_terrain = float(data['surface_terrain'])
+    commune = data['commune'].upper()
+    departement = data['departement']
+
+    type_encode = 0 if type_bien == 'Appartement' else 1
+
+    try:
+        commune_encode = le.transform([commune])[0]
+    except:
+        commune_encode = 0
+
+    try:
+        dept_encode = le.transform([departement])[0]
+    except:
+        dept_encode = 0
+    
+    print(f"Commune: {commune} → encode: {commune_encode}")
+    print(f"Dept: {departement} → encode: {dept_encode}")
+    print(f"Segment: {segment}")
+
+
+    X_pred = pd.DataFrame(
+        [[type_encode, surface, nb_pieces, nb_lots, surface_terrain, commune_encode, dept_encode]],
+        columns=features
+    )
+
+    prix_estime = model_multi.predict(X_pred)[0]
+    segment = assigner_segment(type_bien, prix_estime)
+
+    if segment in modeles_segment:
+        prix_final = float(modeles_segment[segment].predict(X_pred)[0])
+    else:
+        prix_final = float(prix_estime)
+
+    precision = precision_map.get(segment, 75.0)
+
+    return jsonify({
+        'prix': round(prix_final),
+        'prix_m2': round(prix_final / surface),
+        'fourchette_bas': round(prix_final * 0.85),
+        'fourchette_haut': round(prix_final * 1.15),
+        'segment': segment.replace('_', ' '),
+        'precision': precision
+    })
+    
+
+if __name__ == '__main__':
+    app.run(debug=False, port=5000)

src/app.py

@@ -0,0 +1,126 @@
+import streamlit as st
+import joblib
+import pandas as pd
+import numpy as np
+
+# Chargement des modèles
+@st.cache_resource
+def charger_modeles():
+    model_multi = joblib.load('src/model_multi.pkl')
+    modeles_segment = joblib.load('src/modeles_segment.pkl')
+    le = joblib.load('src/label_encoder_multi.pkl')
+    features = joblib.load('src/features_multi.pkl')
+    return model_multi, modeles_segment, le, features
+
+# Chargement des données pour les sélecteurs
+@st.cache_data
+def charger_donnees():
+    df = pd.read_csv('data/valeursfoncieres-2025-s1.txt/ValeursFoncieres-2025-S1.txt',
+                     sep='|', low_memory=False,
+                     usecols=['Commune', 'Code departement'])
+    df = df.dropna()
+    df['Commune'] = df['Commune'].str.strip().str.upper()
+    df['Code departement'] = df['Code departement'].str.strip()
+    return df
+
+def assigner_segment(type_bien, prix_estime):
+    t = 'appart' if type_bien == 'Appartement' else 'maison'
+    if prix_estime < 100000:
+        g = 'bas'
+    elif prix_estime < 250000:
+        g = 'moyen_bas'
+    elif prix_estime < 500000:
+        g = 'moyen_haut'
+    else:
+        g = 'haut'
+    return f"{t}_{g}"
+
+model_multi, modeles_segment, le, features = charger_modeles()
+df_ref = charger_donnees()
+departements = sorted(df_ref['Code departement'].unique().tolist())
+
+# Configuration
+st.set_page_config(page_title="Immo Predict", page_icon="🏠", layout="centered")
+
+st.title("🏠 Immo Predict")
+st.subheader("Estimation du prix d'un bien immobilier en France")
+st.caption("Basé sur 3,7 millions de transactions DVF 2022-2025")
+st.divider()
+
+# Formulaire
+col1, col2 = st.columns(2)
+
+with col1:
+    type_bien = st.selectbox("Type de bien", ["Appartement", "Maison"])
+    surface = st.number_input("Surface (m²)", min_value=9, max_value=500, value=70)
+    nb_pieces = st.slider("Nombre de pièces", 1, 15, 3)
+
+with col2:
+    departement = st.selectbox("Département", departements, 
+                                index=departements.index('75') if '75' in departements else 0)
+    communes_dept = sorted(df_ref[df_ref['Code departement'] == departement]['Commune'].unique().tolist())
+    commune = st.selectbox("Commune", communes_dept)
+    surface_terrain = st.number_input("Surface terrain (m², 0 si appartement)", min_value=0, value=0)
+
+nb_lots = st.number_input("Nombre de lots (copropriété)", min_value=0, value=1)
+
+st.divider()
+
+if st.button("Estimer le prix 🔍", type="primary"):
+    try:
+        type_encode = 0 if type_bien == 'Appartement' else 1
+
+        try:
+            commune_encode = le.transform([commune.upper()])[0]
+        except:
+            commune_encode = 0
+
+        try:
+            dept_encode = le.transform([departement])[0]
+        except:
+            dept_encode = 0
+
+        X_pred = pd.DataFrame([[type_encode, surface, nb_pieces, nb_lots, 
+                                 surface_terrain, commune_encode, dept_encode]],
+                               columns=features)
+
+        # Première estimation avec le modèle global
+        prix_estime = model_multi.predict(X_pred)[0]
+
+        # Sélection du bon segment
+        segment = assigner_segment(type_bien, prix_estime)
+
+        # Prédiction finale avec le modèle du segment
+        if segment in modeles_segment:
+            prix_final = modeles_segment[segment].predict(X_pred)[0]
+            modele_info = f"Modèle spécialisé — segment {segment.replace('_', ' ')}"
+        else:
+            prix_final = prix_estime
+            modele_info = "Modèle général"
+
+        # Précision selon le segment
+        precision_map = {
+            'appart_bas': 65.9, 'appart_moyen_bas': 83.4,
+            'appart_moyen_haut': 87.5, 'appart_haut': 79.5,
+            'maison_bas': 50.4, 'maison_moyen_bas': 81.1,
+            'maison_moyen_haut': 86.7, 'maison_haut': 78.8
+        }
+        precision = precision_map.get(segment, 75.0)
+
+        fourchette_bas = prix_final * 0.85
+        fourchette_haut = prix_final * 1.15
+        prix_m2 = prix_final / surface
+
+        st.success(f"### Prix estimé : {prix_final:,.0f} €")
+
+        col1, col2, col3 = st.columns(3)
+        col1.metric("Fourchette basse", f"{fourchette_bas:,.0f} €")
+        col2.metric("Prix au m²", f"{prix_m2:,.0f} €/m²")
+        col3.metric("Fourchette haute", f"{fourchette_haut:,.0f} €")
+
+        st.info(f"🎯 Précision du modèle sur ce segment : **{precision}%**")
+        st.caption(f"ℹ️ {modele_info}")
+        st.caption("⚠️ Estimation basée sur les transactions DVF 2022-2025. Hors marché du luxe (> 2M€).")
+
+    except Exception as e:
+        st.error(f"Erreur : {e}")

src/static/index.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Immo Predict</title>
+  <link rel="stylesheet" href="style.css">
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@700;800&display=swap" rel="stylesheet">
+</head>
+<body>
+  <canvas id="bg-canvas"></canvas>
+
+  <header>
+    <div class="logo">IMMO<span>PREDICT</span></div>
+    <div class="header-right">
+      <span class="badge-live">● LIVE</span>
+      <span class="header-sub">3,7M transactions DVF</span>
+    </div>
+  </header>
+
+  <main>
+    <section class="hero">
+      <div class="hero-tag">ESTIMATION PAR INTELLIGENCE ARTIFICIELLE</div>
+      <h1>
+        <span class="line">Découvrez la</span>
+        <span class="line accent">valeur réelle</span>
+        <span class="line">de votre bien.</span>
+      </h1>
+      <div class="hero-stats">
+        <div class="stat">
+          <span class="stat-n" data-target="3700000">0</span>
+          <span class="stat-l">Transactions</span>
+        </div>
+        <div class="stat-div"></div>
+        <div class="stat">
+          <span class="stat-n" data-target="87">0</span>
+          <span class="stat-l">% Précision max</span>
+        </div>
+        <div class="stat-div"></div>
+        <div class="stat">
+          <span class="stat-n" data-target="8">0</span>
+          <span class="stat-l">Segments IA</span>
+        </div>
+      </div>
+    </section>
+
+    <section class="form-card">
+      <div class="type-selector">
+        <button class="type-btn active" data-value="Appartement" onclick="selectType(this)">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+            <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/>
+            <path d="M3 9h18M9 9v12" stroke="currentColor" stroke-width="1.5"/>
+          </svg>
+          Appartement
+        </button>
+        <button class="type-btn" data-value="Maison" onclick="selectType(this)">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+            <path d="M3 12L12 3l9 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            <path d="M5 10v9a1 1 0 001 1h4v-4h4v4h4a1 1 0 001-1v-9" stroke="currentColor" stroke-width="1.5"/>
+          </svg>
+          Maison
+        </button>
+      </div>
+
+      <div class="form-grid">
+        <div class="field">
+          <label>Surface habitable</label>
+          <div class="input-wrap">
+            <input type="number" id="surface" value="70" min="9" max="500">
+            <span class="unit">m²</span>
+          </div>
+        </div>
+
+        <div class="field">
+          <label>Nombre de pièces</label>
+          <div class="stepper">
+            <button class="step-btn" onclick="step('pieces',-1)">−</button>
+            <span id="pieces-val">3</span>
+            <input type="hidden" id="pieces" value="3">
+            <button class="step-btn" onclick="step('pieces',1)">+</button>
+          </div>
+        </div>
+
+        <div class="field">
+          <label>Département</label>
+          <div class="select-wrap">
+            <select id="departement" onchange="loadCommunes()"></select>
+          </div>
+        </div>
+
+        <div class="field">
+          <label>Commune</label>
+          <div class="select-wrap">
+            <select id="commune"></select>
+          </div>
+        </div>
+
+        <div class="field">
+          <label>Surface terrain</label>
+          <div class="input-wrap">
+            <input type="number" id="terrain" value="0" min="0">
+            <span class="unit">m²</span>
+          </div>
+        </div>
+
+        <div class="field">
+          <label>Lots copropriété</label>
+          <div class="stepper">
+            <button class="step-btn" onclick="step('lots',-1)">−</button>
+            <span id="lots-val">1</span>
+            <input type="hidden" id="lots" value="1">
+            <button class="step-btn" onclick="step('lots',1)">+</button>
+          </div>
+        </div>
+      </div>
+
+      <button class="cta" onclick="predict()" id="cta-btn">
+        <span id="cta-label">Estimer maintenant</span>
+        <svg id="cta-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path d="M4 10h12M10 4l6 6-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <div class="cta-loader" id="cta-loader"></div>
+      </button>
+    </section>
+
+    <section class="result" id="result">
+      <div class="result-top">
+        <div class="result-label">PRIX ESTIMÉ</div>
+        <div class="result-price" id="result-price">—</div>
+        <div class="result-sub" id="result-sub">—</div>
+      </div>
+
+      <div class="result-grid">
+        <div class="res-card">
+          <div class="res-card-label">Fourchette basse</div>
+          <div class="res-card-val" id="r-bas">—</div>
+        </div>
+        <div class="res-card res-card-mid">
+          <div class="res-card-label">Prix au m²</div>
+          <div class="res-card-val" id="r-m2">—</div>
+        </div>
+        <div class="res-card">
+          <div class="res-card-label">Fourchette haute</div>
+          <div class="res-card-val" id="r-haut">—</div>
+        </div>
+      </div>
+
+      <div class="precision-block">
+        <div class="precision-top">
+          <span>Précision du modèle</span>
+          <span id="r-precision" class="precision-pct">—</span>
+        </div>
+        <div class="bar-track">
+          <div class="bar-fill" id="bar-fill"></div>
+        </div>
+        <div class="segment-row">
+          <span class="segment-badge" id="r-segment">—</span>
+          <span class="disclaimer">Données DVF 2022–2025 · Hors luxe > 2M€</span>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>

src/static/script.js

@@ -0,0 +1,223 @@
+let selectedType = 'Appartement';
+const steppers = { pieces: 3, lots: 1 };
+
+// ── Three.js background ──
+function initThree() {
+  const canvas = document.getElementById('bg-canvas');
+  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  renderer.setSize(window.innerWidth, window.innerHeight);
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
+  camera.position.z = 30;
+
+  // Particules
+  const count = 1200;
+  const positions = new Float32Array(count * 3);
+  const colors = new Float32Array(count * 3);
+
+  for (let i = 0; i < count; i++) {
+    positions[i * 3]     = (Math.random() - 0.5) * 80;
+    positions[i * 3 + 1] = (Math.random() - 0.5) * 80;
+    positions[i * 3 + 2] = (Math.random() - 0.5) * 40;
+
+    const r = Math.random();
+    if (r < 0.5) {
+      // Bleu
+      colors[i * 3]     = 0.23;
+      colors[i * 3 + 1] = 0.51;
+      colors[i * 3 + 2] = 0.96;
+    } else if (r < 0.8) {
+      // Cyan
+      colors[i * 3]     = 0.02;
+      colors[i * 3 + 1] = 0.71;
+      colors[i * 3 + 2] = 0.83;
+    } else {
+      // Blanc doux
+      colors[i * 3]     = 0.55;
+      colors[i * 3 + 1] = 0.58;
+      colors[i * 3 + 2] = 0.70;
+    }
+  }
+
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+  geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+
+  const mat = new THREE.PointsMaterial({
+    size: 0.12,
+    vertexColors: true,
+    transparent: true,
+    opacity: 0.7,
+    sizeAttenuation: true
+  });
+
+  const points = new THREE.Points(geo, mat);
+  scene.add(points);
+
+  // Lignes de grille en perspective
+  const lineMat = new THREE.LineBasicMaterial({
+    color: 0x1e3a5f,
+    transparent: true,
+    opacity: 0.15
+  });
+
+  for (let i = -5; i <= 5; i++) {
+    const hGeo = new THREE.BufferGeometry().setFromPoints([
+      new THREE.Vector3(-40, i * 8, -10),
+      new THREE.Vector3(40, i * 8, -10)
+    ]);
+    scene.add(new THREE.Line(hGeo, lineMat));
+
+    const vGeo = new THREE.BufferGeometry().setFromPoints([
+      new THREE.Vector3(i * 8, -40, -10),
+      new THREE.Vector3(i * 8, 40, -10)
+    ]);
+    scene.add(new THREE.Line(vGeo, lineMat));
+  }
+
+  let mouse = { x: 0, y: 0 };
+  document.addEventListener('mousemove', e => {
+    mouse.x = (e.clientX / window.innerWidth - 0.5) * 0.3;
+    mouse.y = (e.clientY / window.innerHeight - 0.5) * 0.3;
+  });
+
+  window.addEventListener('resize', () => {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+  });
+
+  let t = 0;
+  function animate() {
+    requestAnimationFrame(animate);
+    t += 0.0005;
+    points.rotation.y = t + mouse.x;
+    points.rotation.x = mouse.y * 0.5;
+    points.rotation.z = t * 0.3;
+    renderer.render(scene, camera);
+  }
+  animate();
+}
+
+// ── Compteur animé ──
+function animateCounters() {
+  document.querySelectorAll('.stat-n').forEach(el => {
+    const target = parseInt(el.dataset.target);
+    const duration = 1500;
+    const start = performance.now();
+
+    function update(now) {
+      const progress = Math.min((now - start) / duration, 1);
+      const ease = 1 - Math.pow(1 - progress, 3);
+      const val = Math.floor(ease * target);
+      el.textContent = target >= 1000000
+        ? (val / 1000000).toFixed(1) + 'M'
+        : val.toLocaleString('fr-FR');
+      if (progress < 1) requestAnimationFrame(update);
+    }
+    requestAnimationFrame(update);
+  });
+}
+
+// ── Formulaire ──
+function selectType(btn) {
+  document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  selectedType = btn.dataset.value;
+}
+
+function step(id, delta) {
+  const min = id === 'pieces' ? 1 : 0;
+  const max = id === 'pieces' ? 15 : 50;
+  steppers[id] = Math.min(max, Math.max(min, steppers[id] + delta));
+  document.getElementById(id + '-val').textContent = steppers[id];
+  document.getElementById(id).value = steppers[id];
+}
+
+function fmt(n) {
+  return new Intl.NumberFormat('fr-FR').format(n) + ' €';
+}
+
+async function loadDepartements() {
+  const res = await fetch('/api/departements');
+  const depts = await res.json();
+  const sel = document.getElementById('departement');
+  sel.innerHTML = depts.map(d => `<option value="${d}">${d}</option>`).join('');
+  const idx = depts.indexOf('75');
+  if (idx >= 0) sel.selectedIndex = idx;
+  loadCommunes();
+}
+
+async function loadCommunes() {
+  const dept = document.getElementById('departement').value;
+  if (!dept) return;
+  const res = await fetch(`/api/communes/${dept}`);
+  const communes = await res.json();
+  const sel = document.getElementById('commune');
+  sel.innerHTML = communes.map(c => `<option value="${c}">${c}</option>`).join('');
+}
+
+// ── Prédiction ──
+async function predict() {
+  const btn = document.getElementById('cta-btn');
+  const label = document.getElementById('cta-label');
+  const icon = document.getElementById('cta-icon');
+  const loader = document.getElementById('cta-loader');
+
+  label.textContent = 'Analyse en cours';
+  icon.style.display = 'none';
+  loader.style.display = 'block';
+  btn.disabled = true;
+
+  try {
+    const res = await fetch('/api/predict', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        type_bien: selectedType,
+        surface: document.getElementById('surface').value,
+        nb_pieces: steppers.pieces,
+        nb_lots: steppers.lots,
+        surface_terrain: document.getElementById('terrain').value,
+        commune: document.getElementById('commune').value,
+        departement: document.getElementById('departement').value
+      })
+    });
+
+    const data = await res.json();
+
+    // Remplir les résultats
+    document.getElementById('result-price').textContent = fmt(data.prix);
+    document.getElementById('result-sub').textContent =
+      selectedType + ' · ' + document.getElementById('commune').value + ' (' + document.getElementById('departement').value + ')';
+    document.getElementById('r-bas').textContent = fmt(data.fourchette_bas);
+    document.getElementById('r-haut').textContent = fmt(data.fourchette_haut);
+    document.getElementById('r-m2').textContent = new Intl.NumberFormat('fr-FR').format(data.prix_m2) + ' €/m²';
+    document.getElementById('r-precision').textContent = data.precision + '%';
+    document.getElementById('r-segment').textContent = data.segment.replace(/_/g, ' ');
+
+    // Afficher et animer
+    const result = document.getElementById('result');
+    result.style.display = 'block';
+    setTimeout(() => {
+      document.getElementById('bar-fill').style.width = data.precision + '%';
+    }, 100);
+
+    result.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+  } catch (e) {
+    alert('Erreur de connexion. Vérifiez que Flask tourne bien sur le port 5000.');
+  } finally {
+    label.textContent = 'Estimer maintenant';
+    icon.style.display = 'block';
+    loader.style.display = 'none';
+    btn.disabled = false;
+  }
+}
+
+// ── Init ──
+initThree();
+animateCounters();
+loadDepartements();

src/static/style.css

@@ -0,0 +1,470 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg: #060a12;
+  --surface: #0d1525;
+  --surface2: #111d30;
+  --border: rgba(99, 179, 237, 0.08);
+  --border2: rgba(99, 179, 237, 0.15);
+  --accent: #3b82f6;
+  --accent2: #60a5fa;
+  --cyan: #06b6d4;
+  --text: #f0f4ff;
+  --muted: #4a5a7a;
+  --muted2: #8895b3;
+  --green: #10b981;
+  --radius: 20px;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Space Grotesk', sans-serif;
+  font-weight: 400;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+#bg-canvas {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+header {
+  position: relative; z-index: 10;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 24px 48px;
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(12px);
+  background: rgba(6, 10, 18, 0.6);
+}
+
+.logo {
+  font-family: 'Syne', sans-serif;
+  font-weight: 800;
+  font-size: 18px;
+  letter-spacing: 0.05em;
+  color: var(--text);
+}
+.logo span { color: var(--accent); }
+
+.header-right { display: flex; align-items: center; gap: 16px; }
+
+.badge-live {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  color: var(--green);
+  padding: 4px 10px;
+  border: 1px solid rgba(16,185,129,0.3);
+  border-radius: 20px;
+  background: rgba(16,185,129,0.08);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+.header-sub {
+  font-size: 12px;
+  color: var(--muted2);
+}
+
+main {
+  position: relative; z-index: 1;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 72px 24px 100px;
+}
+
+/* HERO */
+.hero { margin-bottom: 64px; }
+
+.hero-tag {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.2em;
+  color: var(--accent);
+  margin-bottom: 24px;
+  display: flex; align-items: center; gap: 8px;
+}
+.hero-tag::before {
+  content: '';
+  display: inline-block;
+  width: 24px; height: 1px;
+  background: var(--accent);
+}
+
+h1 {
+  font-family: 'Syne', sans-serif;
+  font-weight: 800;
+  font-size: clamp(44px, 6vw, 76px);
+  line-height: 1.05;
+  margin-bottom: 48px;
+}
+
+.line { display: block; opacity: 0; transform: translateY(24px);
+  animation: slideUp 0.6s forwards; }
+.line:nth-child(1) { animation-delay: 0.1s; }
+.line:nth-child(2) { animation-delay: 0.2s; }
+.line:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes slideUp {
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.accent {
+  background: linear-gradient(135deg, var(--accent), var(--cyan));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-stats {
+  display: flex; align-items: center; gap: 32px;
+  opacity: 0; animation: slideUp 0.6s 0.4s forwards;
+}
+
+.stat { display: flex; flex-direction: column; gap: 4px; }
+
+.stat-n {
+  font-family: 'Syne', sans-serif;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.stat-l {
+  font-size: 11px;
+  color: var(--muted2);
+  letter-spacing: 0.05em;
+}
+
+.stat-div {
+  width: 1px; height: 40px;
+  background: var(--border2);
+}
+
+/* FORM */
+.form-card {
+  background: rgba(13, 21, 37, 0.8);
+  border: 1px solid var(--border2);
+  border-radius: var(--radius);
+  padding: 40px;
+  backdrop-filter: blur(20px);
+  box-shadow: 0 0 80px rgba(59, 130, 246, 0.05);
+  opacity: 0; animation: slideUp 0.6s 0.5s forwards;
+}
+
+.type-selector {
+  display: flex; gap: 12px;
+  margin-bottom: 32px;
+}
+
+.type-btn {
+  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
+  padding: 14px 20px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  color: var(--muted2);
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.type-btn:hover { border-color: var(--border2); color: var(--text); }
+
+.type-btn.active {
+  background: rgba(59, 130, 246, 0.12);
+  border-color: var(--accent);
+  color: var(--accent2);
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+
+.field { display: flex; flex-direction: column; gap: 8px; }
+
+label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted2);
+}
+
+.input-wrap {
+  display: flex; align-items: center;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.input-wrap:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
+}
+
+.input-wrap input {
+  flex: 1; padding: 12px 16px;
+  background: transparent; border: none; outline: none;
+  color: var(--text);
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 15px;
+}
+
+.unit {
+  padding: 12px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  border-left: 1px solid var(--border);
+}
+
+.stepper {
+  display: flex; align-items: center;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  height: 46px;
+}
+
+.step-btn {
+  width: 44px; height: 100%;
+  background: transparent; border: none; outline: none;
+  color: var(--accent2);
+  font-size: 20px;
+  cursor: pointer;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+.step-btn:hover { background: rgba(59,130,246,0.1); }
+
+.stepper span {
+  flex: 1; text-align: center;
+  font-size: 16px; font-weight: 600;
+  color: var(--text);
+}
+
+.select-wrap {
+  position: relative;
+}
+
+.select-wrap select {
+  width: 100%; padding: 12px 40px 12px 16px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text);
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  outline: none; cursor: pointer;
+  appearance: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.select-wrap select:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
+}
+.select-wrap select option { background: #0d1525; }
+
+.select-wrap::after {
+  content: '';
+  position: absolute; right: 14px; top: 50%;
+  transform: translateY(-50%);
+  width: 0; height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid var(--muted2);
+  pointer-events: none;
+}
+
+/* CTA */
+.cta {
+  width: 100%; padding: 16px 32px;
+  background: linear-gradient(135deg, var(--accent), #2563eb);
+  border: none; border-radius: 12px;
+  color: #fff;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 15px; font-weight: 600;
+  letter-spacing: 0.03em;
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center; gap: 12px;
+  transition: all 0.25s;
+  position: relative; overflow: hidden;
+}
+.cta::before {
+  content: '';
+  position: absolute; inset: 0;
+  background: linear-gradient(135deg, #60a5fa, var(--accent));
+  opacity: 0; transition: opacity 0.25s;
+}
+.cta:hover::before { opacity: 1; }
+.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(59,130,246,0.35); }
+.cta:active { transform: translateY(0); }
+.cta:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
+
+.cta span, .cta svg { position: relative; z-index: 1; }
+
+.cta-loader {
+  display: none;
+  width: 18px; height: 18px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  position: relative; z-index: 1;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* RESULT */
+.result {
+  margin-top: 24px;
+  background: rgba(13, 21, 37, 0.8);
+  border: 1px solid rgba(59,130,246,0.2);
+  border-radius: var(--radius);
+  padding: 40px;
+  backdrop-filter: blur(20px);
+  display: none;
+  animation: fadeUp 0.5s ease;
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.result-top { text-align: center; margin-bottom: 36px; }
+
+.result-label {
+  font-size: 11px; font-weight: 600;
+  letter-spacing: 0.2em;
+  color: var(--muted2);
+  margin-bottom: 12px;
+}
+
+.result-price {
+  font-family: 'Syne', sans-serif;
+  font-size: clamp(48px, 8vw, 80px);
+  font-weight: 800;
+  background: linear-gradient(135deg, var(--accent2), var(--cyan));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1;
+}
+
+.result-sub {
+  margin-top: 8px;
+  font-size: 13px;
+  color: var(--muted2);
+}
+
+.result-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 28px;
+}
+
+.res-card {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 20px 16px;
+  text-align: center;
+  transition: border-color 0.2s;
+}
+.res-card:hover { border-color: var(--border2); }
+
+.res-card-mid {
+  border-color: rgba(59,130,246,0.25);
+  background: rgba(59,130,246,0.06);
+}
+
+.res-card-label {
+  font-size: 10px; font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted2);
+  margin-bottom: 8px;
+}
+
+.res-card-val {
+  font-family: 'Syne', sans-serif;
+  font-size: 20px; font-weight: 700;
+  color: var(--text);
+}
+
+.precision-block { padding-top: 24px; border-top: 1px solid var(--border); }
+
+.precision-top {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 10px;
+  font-size: 12px; font-weight: 500;
+  color: var(--muted2);
+}
+
+.precision-pct {
+  font-family: 'Syne', sans-serif;
+  font-size: 18px; font-weight: 700;
+  color: var(--accent2);
+}
+
+.bar-track {
+  height: 6px;
+  background: var(--surface2);
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+.bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent), var(--cyan), var(--green));
+  border-radius: 3px;
+  width: 0;
+  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.segment-row {
+  display: flex; align-items: center; justify-content: space-between;
+}
+
+.segment-badge {
+  padding: 5px 14px;
+  background: rgba(59,130,246,0.1);
+  border: 1px solid rgba(59,130,246,0.25);
+  border-radius: 20px;
+  font-size: 12px; font-weight: 600;
+  color: var(--accent2);
+  text-transform: capitalize;
+}
+
+.disclaimer {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+@media (max-width: 600px) {
+  header { padding: 16px 20px; }
+  main { padding: 48px 16px 80px; }
+  .form-card, .result { padding: 24px; }
+  .form-grid { grid-template-columns: 1fr; }
+  .result-grid { grid-template-columns: 1fr; }
+  .segment-row { flex-direction: column; gap: 8px; align-items: flex-start; }
+}