<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Krussa Pro Creative</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet"/>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
:root{
--ink:#0c0c0c;
--paper:#f7f4ef;
--cream:#ede9e2;
--gold:#b89a5a;
--gold-light:#d4b87a;
--dim:#888880;
--line:#d8d4cc;
}
html{scroll-behavior:smooth;}
body{background:var(--ink);color:var(--paper);font-family:'DM Sans',sans-serif;font-weight:300;cursor:none;overflow-x:hidden;}
/* CURSOR */
#cur{position:fixed;width:8px;height:8px;background:var(--paper);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .15s,background .2s;}
#fol{position:fixed;width:32px;height:32px;border:1px solid rgba(247,244,239,.25);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:left .14s ease,top .14s ease,border-color .3s,width .3s,height .3s;}
a:hover~#cur,body:has(a:hover) #cur,body:has(button:hover) #cur{background:var(--gold);transform:translate(-50%,-50%) scale(1.8);}
body:has(a:hover) #fol,body:has(button:hover) #fol{border-color:var(--gold);width:44px;height:44px;}
/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:1.8rem 5rem;display:flex;justify-content:space-between;align-items:center;}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;letter-spacing:.06em;text-decoration:none;color:var(--paper);}
.nav-logo sup{font-size:.55rem;color:var(--gold);letter-spacing:.2em;text-transform:uppercase;vertical-align:super;margin-left:.2em;}
.nav-menu{display:flex;gap:2.8rem;list-style:none;}
.nav-menu a{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .25s;}
.nav-menu a:hover{color:var(--paper);}
.nav-btn{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;background:transparent;border:1px solid rgba(247,244,239,.2);color:var(--paper);padding:.55rem 1.6rem;text-decoration:none;transition:all .25s;cursor:none;}
.nav-btn:hover{background:var(--paper);color:var(--ink);}
/* HERO */
.hero{min-height:100vh;padding:0 5rem;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:5rem;position:relative;}
/* Grid background */
.hero-grid{position:absolute;inset:0;pointer-events:none;}
.hero-grid svg{width:100%;height:100%;opacity:.035;}
.hero-tag{font-family:'DM Mono',monospace;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:2.5rem;display:inline-flex;align-items:center;gap:.9rem;opacity:0;animation:fadeIn .6s .2s forwards;}
.hero-tag::before{content:'';display:block;width:32px;height:1px;background:var(--gold);}
.hero-h1{font-family:'Cormorant Garamond',serif;font-size:clamp(4.5rem,10vw,10.5rem);line-height:.92;font-weight:300;letter-spacing:-.01em;margin-bottom:3.5rem;}
.hero-h1 .l{display:block;overflow:hidden;}
.hero-h1 .l span{display:block;opacity:0;transform:translateY(105%);animation:up .95s cubic-bezier(.16,1,.3,1) forwards;}
.hero-h1 .l:nth-child(1) span{animation-delay:.15s;}
.hero-h1 .l:nth-child(2) span{animation-delay:.3s;}
.hero-h1 .l:nth-child(3) span{animation-delay:.45s;}
.hero-h1 em{font-style:italic;color:var(--gold-light);}
@keyframes up{to{opacity:1;transform:none;}}
@keyframes fadeIn{to{opacity:1;}}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;opacity:0;animation:fadeIn .7s .7s forwards;}
.hero-desc{max-width:340px;font-size:.95rem;line-height:1.85;color:rgba(247,244,239,.45);font-weight:300;}
.hero-scroll{display:flex;flex-direction:column;align-items:center;gap:.7rem;}
.scroll-bar{width:1px;height:52px;background:var(--dim);position:relative;overflow:hidden;}
.scroll-bar::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:var(--paper);animation:scrollDown 1.8s ease-in-out infinite;}
@keyframes scrollDown{0%{transform:translateY(-100%);}100%{transform:translateY(200%);}}
.scroll-txt{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);writing-mode:vertical-rl;}
/* MARQUEE */
.marquee-wrap{border-top:1px solid rgba(247,244,239,.1);border-bottom:1px solid rgba(247,244,239,.1);padding:.9rem 0;overflow:hidden;white-space:nowrap;}
.marquee-inner{display:inline-flex;animation:marquee 28s linear infinite;}
.marquee-inner:hover{animation-play-state:paused;}
.m-item{font-family:'Cormorant Garamond',serif;font-size:1rem;font-style:italic;font-weight:300;color:rgba(247,244,239,.3);padding:0 2.2rem;}
.m-item b{color:var(--gold);font-weight:400;margin-right:2.2rem;font-style:normal;}
@keyframes marquee{to{transform:translateX(-50%);}}
/* INTRO SECTION */
.intro{background:var(--paper);color:var(--ink);padding:7rem 5rem;}
.intro-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:6rem;align-items:start;}
.intro-left{}
.section-eye{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;display:flex;align-items:center;gap:.7rem;}
.section-eye::before{content:'';width:20px;height:1px;background:var(--gold);}
.section-eye.dark::before{background:var(--dim);}
.section-eye.dark{color:var(--dim);}
.h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.8rem,5vw,5.2rem);line-height:1.02;font-weight:300;letter-spacing:-.01em;}
.h2 em{font-style:italic;color:var(--gold);}
.intro-body{padding-top:.5rem;}
.intro-lead{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:300;line-height:1.55;color:#2a2a2a;margin-bottom:2.5rem;font-style:italic;}
.intro-p{font-size:.9rem;line-height:1.9;color:#555;margin-bottom:1.4rem;font-weight:300;}
.intro-pillars{margin-top:3rem;display:flex;flex-direction:column;gap:0;}
.pillar{border-top:1px solid var(--line);padding:1.6rem 0;display:grid;grid-template-columns:2rem 1fr;gap:1.2rem;align-items:start;}
.pillar:last-child{border-bottom:1px solid var(--line);}
.pillar-n{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--gold);padding-top:.2rem;}
.pillar-title{font-size:.85rem;font-weight:500;color:var(--ink);margin-bottom:.4rem;letter-spacing:.02em;}
.pillar-desc{font-size:.82rem;line-height:1.75;color:#777;}
/* FORMATS */
.formats{background:var(--ink);padding:7rem 5rem;}
.formats-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:4rem;}
.formats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(247,244,239,.08);}
.fmt-card{background:var(--ink);padding:3rem;transition:background .35s;}
.fmt-card:hover{background:#111;}
.fmt-icon{width:44px;height:44px;border:1px solid rgba(247,244,239,.12);display:flex;align-items:center;justify-content:center;margin-bottom:2rem;}
.fmt-icon svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.fmt-num{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--dim);letter-spacing:.12em;margin-bottom:.6rem;}
.fmt-title{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:400;line-height:1.1;margin-bottom:1rem;}
.fmt-cost{font-family:'Cormorant Garamond',serif;font-size:3.5rem;font-weight:300;color:var(--gold-light);line-height:1;margin-bottom:.3rem;}
.fmt-cost-label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:2rem;}
.fmt-includes{display:flex;flex-direction:column;gap:.55rem;margin-top:1.8rem;border-top:1px solid rgba(247,244,239,.08);padding-top:1.8rem;}
.fmt-inc{font-size:.82rem;color:rgba(247,244,239,.45);padding-left:1.1rem;position:relative;}
.fmt-inc::before{content:'–';position:absolute;left:0;color:var(--gold);font-size:.75rem;}
/* TOKENS */
.tokens{background:var(--cream);color:var(--ink);padding:7rem 5rem;}
.tokens-head{margin-bottom:4rem;}
.tokens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3.5rem;}
.tok-card{border:1px solid var(--line);padding:2.5rem;background:var(--paper);position:relative;transition:border-color .3s,transform .3s;}
.tok-card:hover{border-color:var(--gold);transform:translateY(-3px);}
.tok-card.hero-pack{border-color:var(--gold);}
.tok-flag{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--paper);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;padding:.28rem 1rem;font-weight:500;font-family:'DM Mono',monospace;white-space:nowrap;}
.tok-name{font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--dim);margin-bottom:1rem;font-family:'DM Mono',monospace;}
.tok-price{font-family:'Cormorant Garamond',serif;font-size:3.8rem;font-weight:300;line-height:1;color:var(--ink);margin-bottom:.3rem;}
.tok-price sup{font-size:1.4rem;vertical-align:super;font-weight:400;}
.tok-sub{font-size:.78rem;color:var(--dim);margin-bottom:1.8rem;line-height:1.6;}
.tok-saving{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--gold);margin-bottom:1.8rem;}
.tok-sep{border:none;border-top:1px solid var(--line);margin:1.5rem 0;}
.tok-line{font-size:.82rem;color:#555;padding:.45rem 0;border-bottom:1px solid #ede9e2;display:flex;justify-content:space-between;align-items:center;}
.tok-line:last-child{border-bottom:none;}
.tok-line span{font-weight:500;color:var(--ink);}
/* EXEMPLES TABLE */
.ex-title{font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--dim);margin-bottom:1.2rem;font-family:'DM Mono',monospace;}
.ex-table{width:100%;border-collapse:collapse;}
.ex-table th{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:400;padding:.7rem 1rem;border-bottom:1px solid var(--line);text-align:left;}
.ex-table td{font-size:.88rem;padding:.9rem 1rem;border-bottom:1px solid #ede9e2;color:#444;}
.ex-table td:last-child{font-weight:500;color:var(--ink);text-align:right;}
.ex-table tr:last-child td{border-bottom:none;}
.tok-rule{margin-top:3rem;padding:2.5rem;background:var(--ink);color:var(--paper);}
.tok-rule-title{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:400;margin-bottom:1.5rem;}
.tok-rules-list{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.tok-r{font-size:.84rem;color:rgba(247,244,239,.5);padding-left:1.2rem;position:relative;line-height:1.65;}
.tok-r::before{content:'→';position:absolute;left:0;color:var(--gold);font-size:.75rem;}
/* PROCESS */
.process{background:var(--ink);color:var(--paper);padding:7rem 5rem;}
.process-steps{margin-top:4rem;}
.ps{display:grid;grid-template-columns:5rem 1fr 6rem;align-items:start;padding:2.2rem 0;border-top:1px solid rgba(247,244,239,.08);}
.ps:last-child{border-bottom:1px solid rgba(247,244,239,.08);}
.ps-n{font-family:'Cormorant Garamond',serif;font-size:3.8rem;font-weight:300;line-height:1;color:rgba(247,244,239,.1);}
.ps-body{}
.ps-title{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:400;margin-bottom:.5rem;}
.ps-desc{font-size:.85rem;line-height:1.8;color:rgba(247,244,239,.4);max-width:500px;}
.ps-day{font-family:'DM Mono',monospace;font-size:.62rem;color:var(--gold);text-align:right;padding-top:.4rem;letter-spacing:.1em;}
/* WHY */
.why{background:var(--paper);color:var(--ink);padding:7rem 5rem;}
.why-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;}
.weeks-grid{display:flex;flex-direction:column;gap:0;}
.wk{border-top:1px solid var(--line);padding:1.8rem 0;display:grid;grid-template-columns:3.5rem 1fr;}
.wk:last-child{border-bottom:1px solid var(--line);}
.wk-n{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--dim);padding-top:.2rem;}
.wk-title{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:400;margin-bottom:.35rem;}
.wk-desc{font-size:.82rem;line-height:1.75;color:#777;}
.wk-role{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:.7rem;font-family:'DM Mono',monospace;}
.why-right{}
.why-quote{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:300;font-style:italic;line-height:1.4;color:#2a2a2a;margin-bottom:2.5rem;}
.why-quote em{color:var(--gold);font-style:normal;}
.why-points{display:flex;flex-direction:column;gap:0;}
.wp{border-top:1px solid var(--line);padding:1.2rem 0;font-size:.88rem;line-height:1.75;color:#555;padding-left:1.4rem;position:relative;}
.wp:last-child{border-bottom:1px solid var(--line);}
.wp::before{content:'';position:absolute;left:0;top:.5rem;width:4px;height:4px;border-radius:50%;background:var(--gold);}
/* CONTACT */
.contact{background:var(--ink);color:var(--paper);padding:7rem 5rem;}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start;}
.contact-left .h2{color:var(--paper);}
.contact-left .h2 em{color:var(--gold-light);}
.contact-sub{font-size:.92rem;line-height:1.85;color:rgba(247,244,239,.4);margin-top:1.5rem;max-width:340px;}
.contact-meta{margin-top:3rem;display:flex;flex-direction:column;}
.cm{display:flex;justify-content:space-between;padding:1.1rem 0;border-top:1px solid rgba(247,244,239,.08);}
.cm:last-child{border-bottom:1px solid rgba(247,244,239,.08);}
.cm-k{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,244,239,.3);font-family:'DM Mono',monospace;}
.cm-v{font-size:.88rem;color:var(--paper);}
.contact-form{display:flex;flex-direction:column;}
.cf{border-top:1px solid rgba(247,244,239,.1);padding:1.2rem 0;}
.cf:last-of-type{border-bottom:1px solid rgba(247,244,239,.1);margin-bottom:2.5rem;}
.cf label{display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,244,239,.35);margin-bottom:.6rem;font-family:'DM Mono',monospace;}
.cf input,.cf select,.cf textarea{width:100%;background:transparent;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:.95rem;color:var(--paper);font-weight:300;cursor:none;}
.cf textarea{resize:none;min-height:72px;line-height:1.7;}
.cf select{appearance:none;cursor:none;}
.cf select option{background:var(--ink);color:var(--paper);}
.cf input::placeholder,.cf textarea::placeholder{color:rgba(247,244,239,.2);}
.cf-submit{background:var(--paper);color:var(--ink);border:none;padding:1rem 2.8rem;font-family:'DM Sans',sans-serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;cursor:none;transition:background .25s,color .25s;align-self:flex-start;font-weight:500;}
.cf-submit:hover{background:var(--gold);color:var(--paper);}
/* FOOTER */
footer{background:var(--ink);border-top:1px solid rgba(247,244,239,.08);padding:2rem 5rem;display:flex;justify-content:space-between;align-items:center;}
.f-logo{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:600;color:var(--paper);letter-spacing:.05em;}
.f-logo sup{font-size:.5rem;color:var(--gold);letter-spacing:.2em;text-transform:uppercase;vertical-align:super;margin-left:.2em;}
.f-copy{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--dim);letter-spacing:.08em;}
.f-links{display:flex;gap:2.2rem;}
.f-links a{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .2s;}
.f-links a:hover{color:var(--paper);}
/* REVEAL */
.rv{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}
.rv.on{opacity:1;transform:none;}
.rv.d1{transition-delay:.1s;}.rv.d2{transition-delay:.2s;}.rv.d3{transition-delay:.3s;}.rv.d4{transition-delay:.4s;}
@media(max-width:900px){
nav{padding:1.5rem 1.5rem;}
.nav-menu{display:none;}
section,.intro,.formats,.tokens,.process,.why,.contact{padding:5rem 1.5rem;}
.hero{padding:0 1.5rem 4rem;}
.intro-inner,.formats-grid,.tokens-grid,.why-inner,.contact-inner{grid-template-columns:1fr;}
.tokens-grid{gap:1rem;}
.tok-rules-list{grid-template-columns:1fr;}
.ps{grid-template-columns:3.5rem 1fr;gap:.5rem;}
.ps-day{display:none;}
footer{flex-direction:column;gap:1rem;padding:2rem 1.5rem;text-align:center;}
}
</style>
</head>
<body>
<div id="cur"></div>
<div id="fol"></div>
<nav>
<a class="nav-logo" href="#">Krussa<sup>Pro</sup></a>
<ul class="nav-menu">
<li><a href="#formats">Formats</a></li>
<li><a href="#tokens">Tokens</a></li>
<li><a href="#processus">Processus</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a class="nav-btn" href="#contact">Démarrer</a>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-grid">
<svg viewBox="0 0 1400 900" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="g" width="70" height="70" patternUnits="userSpaceOnUse">
<path d="M70 0L0 0 0 70" fill="none" stroke="white" stroke-width=".6"/>
</pattern>
</defs>
<rect width="1400" height="900" fill="url(#g)"/>
</svg>
</div>
<p class="hero-tag">Agence créative · Phnom Penh</p>
<h1 class="hero-h1">
<span class="l"><span>Contenu</span></span>
<span class="l"><span><em>Premium.</em></span></span>
<span class="l"><span>Impact Réel.</span></span>
</h1>
<div class="hero-foot">
<p class="hero-desc">Chaque token représente une capacité de création premium : stratégie du message, direction artistique, tournage, montage, légende et appel à l'action.</p>
<div class="hero-scroll">
<div class="scroll-bar"></div>
<span class="scroll-txt">Scroll</span>
</div>
</div>
<span style="position:absolute;top:50%;right:5rem;transform:translateY(-50%);font-family:'DM Mono',monospace;font-size:.58rem;color:rgba(247,244,239,.15);letter-spacing:.15em;writing-mode:vertical-rl;">KPC — 2025</span>
</section>
<div class="marquee-wrap">
<div class="marquee-inner">
<span class="m-item">Message Intelligent <b>✦</b></span>
<span class="m-item">Direction Artistique <b>✦</b></span>
<span class="m-item">Post Visuel Premium <b>✦</b></span>
<span class="m-item">Reel & Short <b>✦</b></span>
<span class="m-item">Stratégie Mensuelle <b>✦</b></span>
<span class="m-item">Système de Tokens <b>✦</b></span>
<span class="m-item">Phnom Penh <b>✦</b></span>
<span class="m-item">Message Intelligent <b>✦</b></span>
<span class="m-item">Direction Artistique <b>✦</b></span>
<span class="m-item">Post Visuel Premium <b>✦</b></span>
<span class="m-item">Reel & Short <b>✦</b></span>
<span class="m-item">Stratégie Mensuelle <b>✦</b></span>
<span class="m-item">Système de Tokens <b>✦</b></span>
<span class="m-item">Phnom Penh <b>✦</b></span>
</div>
</div>
<!-- INTRO -->
<section class="intro" id="about">
<div class="intro-inner">
<div class="intro-left rv">
<p class="section-eye">L'offre</p>
<h2 class="h2">Produisez du<br/>contenu premium<br/>avec une vraie<br/><em>stratégie.</em></h2>
</div>
<div class="intro-body rv d1">
<p class="intro-lead">Krussa Pro Creative accompagne les marques, lieux, artistes, restaurants, hôtels et entrepreneurs dans la création de contenus visuels haut de gamme.</p>
<p class="intro-p">Chaque contenu est construit autour de deux éléments essentiels : un message intelligent et une production premium. L'objectif est simple — créer du contenu que les gens regardent, comprennent et retiennent.</p>
<p class="intro-p">Nous ne produisons pas juste de belles images. Chaque contenu est pensé pour transmettre un message clair, créer une émotion et donner envie d'agir.</p>
<div class="intro-pillars">
<div class="pillar">
<div class="pillar-n">01</div>
<div>
<div class="pillar-title">Un message intelligent</div>
<div class="pillar-desc">Accroche forte dès les 2 premières secondes, narration adaptée à votre secteur, message clair et appel à l'action naturel.</div>
</div>
</div>
<div class="pillar">
<div class="pillar-n">02</div>
<div>
<div class="pillar-title">Une production premium</div>
<div class="pillar-desc">Direction artistique, cadrage, lumière, tournage, montage, retouches et rendu final haute qualité.</div>
</div>
</div>
<div class="pillar">
<div class="pillar-n">03</div>
<div>
<div class="pillar-title">Trois objectifs par contenu</div>
<div class="pillar-desc">Capter l'attention rapidement · Raconter quelque chose qui parle à votre audience · Renforcer votre image de marque.</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FORMATS -->
<section class="formats" id="formats">
<div class="formats-head">
<div>
<p class="section-eye rv">Deux formats</p>
<h2 class="h2" style="color:var(--paper);" class="rv">Une seule<br/><em>exigence.</em></h2>
</div>
</div>
<div class="formats-grid">
<div class="fmt-card rv">
<div class="fmt-icon">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
</div>
<div class="fmt-num">Format 01</div>
<h3 class="fmt-title">Post Visuel<br/>Premium + Légende</h3>
<div class="fmt-cost">1.5 <span style="font-size:1.4rem;color:var(--dim);">tokens</span></div>
<div class="fmt-cost-label">par contenu livré</div>
<p style="font-size:.85rem;line-height:1.8;color:rgba(247,244,239,.4);">Un visuel haut de gamme pensé pour valoriser votre marque, votre produit, votre lieu ou votre univers. Accompagné d'une légende prête à publier.</p>
<div class="fmt-includes">
<div class="fmt-inc">Direction artistique</div>
<div class="fmt-inc">Prise de vue ou création visuelle</div>
<div class="fmt-inc">Retouche premium</div>
<div class="fmt-inc">Légende prête à publier</div>
<div class="fmt-inc">Appel à l'action naturel</div>
</div>
</div>
<div class="fmt-card rv d1">
<div class="fmt-icon">
<svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
</div>
<div class="fmt-num">Format 02</div>
<h3 class="fmt-title">Vidéo Courte<br/>Reel / Short + Légende</h3>
<div class="fmt-cost">3 <span style="font-size:1.4rem;color:var(--dim);">tokens</span></div>
<div class="fmt-cost-label">par contenu livré</div>
<p style="font-size:.85rem;line-height:1.8;color:rgba(247,244,239,.4);">Une vidéo courte jusqu'à 60 secondes pensée pour capter l'attention rapidement. Optimisée pour Instagram, TikTok, YouTube Shorts et Facebook.</p>
<div class="fmt-includes">
<div class="fmt-inc">Concept créatif & accroche forte</div>
<div class="fmt-inc">Tournage & montage</div>
<div class="fmt-inc">Narration adaptée à votre secteur</div>
<div class="fmt-inc">Légende prête à publier</div>
<div class="fmt-inc">Appel à l'action naturel</div>
</div>
</div>
</div>
</section>
<!-- TOKENS -->
<section class="tokens" id="tokens">
<div class="tokens-head">
<p class="section-eye dark rv">Système de tokens</p>
<h2 class="h2 rv">Flexible.<br/>Transparent.<br/><em>Sans surprise.</em></h2>
<p style="max-width:560px;font-size:.92rem;line-height:1.85;color:#666;margin-top:1.5rem;" class="rv">Le token est l'unité de production Krussa Pro Creative. Achetez un pack, définissez votre contenu en amont, produisez en une session optimisée. Chaque pack est valable 30 jours.</p>
</div>
<div class="tokens-grid">
<div class="tok-card rv">
<div class="tok-name">Extra Token</div>
<div class="tok-price"><sup>$</sup>290</div>
<div class="tok-sub">1 token à l'unité<br/>Pour un besoin ponctuel hors pack.</div>
<hr class="tok-sep"/>
<div class="tok-line">Besoin ponctuel <span>1 token</span></div>
<div class="tok-line">Ajout hors pack <span>Oui</span></div>
</div>
<div class="tok-card rv d1">
<div class="tok-name">Starter Pack</div>
<div class="tok-price"><sup>$</sup>590</div>
<div class="tok-sub">4 tokens · 147,50$ / token<br/>Pour tester la méthode Krussa.</div>
<hr class="tok-sep"/>
<div class="tok-line">Idéal pour <span>Artistes, restaurants, marques</span></div>
<div class="tok-line">Valable <span>30 jours</span></div>
</div>
<div class="tok-card hero-pack rv d2">
<div class="tok-flag">Recommandé</div>
<div class="tok-name">Growth Pack</div>
<div class="tok-price"><sup>$</sup>990</div>
<div class="tok-sub">10 tokens · 99$ / token</div>
<div class="tok-saving">— 33% vs Starter Pack</div>
<hr class="tok-sep"/>
<div class="tok-line">Idéal pour <span>Marques, hôtels, lieux</span></div>
<div class="tok-line">Valable <span>30 jours</span></div>
</div>
</div>
<!-- Exemples Starter -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem;" class="rv">
<div>
<p class="ex-title">Starter Pack — exemples possibles</p>
<table class="ex-table">
<thead><tr><th>Contenu</th><th>Tokens</th></tr></thead>
<tbody>
<tr><td>1 vidéo courte</td><td>3 tokens</td></tr>
<tr><td>2 posts visuels premium</td><td>3 tokens</td></tr>
<tr><td>1 post visuel + optimisation créative</td><td>4 tokens</td></tr>
</tbody>
</table>
</div>
<div>
<p class="ex-title">Growth Pack — exemples possibles</p>
<table class="ex-table">
<thead><tr><th>Contenu</th><th>Tokens</th></tr></thead>
<tbody>
<tr><td>3 vidéos courtes</td><td>9 tokens</td></tr>
<tr><td>6 posts visuels premium</td><td>9 tokens</td></tr>
<tr><td>2 vidéos courtes + 2 posts visuels</td><td>9 tokens</td></tr>
<tr><td>1 vidéo courte + 4 posts visuels</td><td>9 tokens</td></tr>
</tbody>
</table>
</div>
</div>
<div class="tok-rule rv">
<div class="tok-rule-title">Règles essentielles du système</div>
<div class="tok-rules-list">
<div class="tok-r">Validité stricte 30 jours — les tokens non consommés expirent sans report.</div>
<div class="tok-r">La commande est définie et validée avant l'achat du pack.</div>
<div class="tok-r">Session de tournage planifiée en une seule fois pour optimiser la production.</div>
<div class="tok-r">Les packs sont pensés pour créer une vraie intensité de communication mensuelle.</div>
</div>
</div>
</section>
<!-- PROCESS -->
<section class="process" id="processus">
<p class="section-eye rv">Processus</p>
<h2 class="h2" style="color:var(--paper);" class="rv">De zéro<br/>à <em>publié.</em></h2>
<div class="process-steps rv">
<div class="ps">
<div class="ps-n">01</div>
<div class="ps-body">
<h3 class="ps-title">Brief sectoriel</h3>
<p class="ps-desc">Vous décrivez votre activité, vos clients, vos offres du moment. On analyse votre secteur, ce que vos concurrents font ou ne font pas, les angles non occupés.</p>
</div>
<div class="ps-day">Jour 1</div>
</div>
<div class="ps">
<div class="ps-n">02</div>
<div class="ps-body">
<h3 class="ps-title">Validation du devis token</h3>
<p class="ps-desc">On définit ensemble le contenu exact du mois. Le total en tokens est calculé. Le pack adapté est proposé. Vous validez avant tout achat.</p>
</div>
<div class="ps-day">Jour 2</div>
</div>
<div class="ps">
<div class="ps-n">03</div>
<div class="ps-body">
<h3 class="ps-title">Session de production</h3>
<p class="ps-desc">Tout est produit en une session optimisée — tournage, montage, design, rédaction. Une seule session concentrée. Cohérence visuelle garantie.</p>
</div>
<div class="ps-day">Jours 3–7</div>
</div>
<div class="ps">
<div class="ps-n">04</div>
<div class="ps-body">
<h3 class="ps-title">Livraison & calendrier</h3>
<p class="ps-desc">Vous recevez tous vos contenus prêts à publier, avec le calendrier de publication optimisé pour l'algorithme. Chaque semaine a son angle, son rôle, son message.</p>
</div>
<div class="ps-day">Jours 7–10</div>
</div>
</div>
</section>
<!-- WHY -->
<section class="why" id="strategie">
<div class="why-inner">
<div>
<p class="section-eye dark rv">Pourquoi un pack complet</p>
<h2 class="h2 rv">La narration<br/>du <em>mois entier.</em></h2>
<div class="weeks-grid" style="margin-top:3rem;">
<div class="wk rv">
<div class="wk-n">S1</div>
<div>
<div class="wk-title">Accroche & Identité</div>
<div class="wk-desc">Qui vous êtes, pourquoi vous choisir. Le premier contact avec un nouvel abonné.</div>
<div class="wk-role">Notoriété</div>
</div>
</div>
<div class="wk rv d1">
<div class="wk-n">S2</div>
<div>
<div class="wk-title">La Preuve</div>
<div class="wk-desc">Le produit en action. Le geste, le résultat, la preuve concrète. On montre, on ne dit pas.</div>
<div class="wk-role">Crédibilité</div>
</div>
</div>
<div class="wk rv d2">
<div class="wk-n">S3</div>
<div>
<div class="wk-title">Le Déclencheur</div>
<div class="wk-desc">L'offre, l'urgence, la raison d'agir maintenant. Le moment de convertir.</div>
<div class="wk-role">Conversion</div>
</div>
</div>
<div class="wk rv d3">
<div class="wk-n">S4</div>
<div>
<div class="wk-title">Le Lien Humain</div>
<div class="wk-desc">Coulisses, équipe, proximité. Ce qui transforme un abonné en client fidèle.</div>
<div class="wk-role">Fidélisation</div>
</div>
</div>
</div>
</div>
<div class="why-right rv d1">
<p class="why-quote">Un seul contenu ne suffit pas à construire une <em>présence forte.</em></p>
<p style="font-size:.9rem;line-height:1.85;color:#666;margin-bottom:2rem;">Avec les tokens mensuels, Krussa Pro Creative vous aide à créer une communication plus régulière, plus cohérente et plus efficace.</p>
<div class="why-points">
<div class="wp">Préparer plusieurs contenus autour d'une même vision</div>
<div class="wp">Optimiser les sessions de tournage</div>
<div class="wp">Garder une cohérence visuelle sur vos réseaux</div>
<div class="wp">Produire plus vite et plus intelligemment</div>
<div class="wp">Créer une vraie dynamique de communication sur le mois</div>
</div>
<div style="margin-top:3rem;padding:2rem;background:var(--ink);color:var(--paper);">
<p style="font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-style:italic;color:rgba(247,244,239,.7);line-height:1.7;">Avec Krussa Pro Creative, vous ne commandez pas simplement une photo ou une vidéo. Vous construisez une présence visuelle cohérente, premium et régulière, capable de renforcer votre marque mois après mois.</p>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section class="contact" id="contact">
<div class="contact-inner">
<div class="contact-left rv">
<p class="section-eye">Contact</p>
<h2 class="h2">Parlons de<br/>votre prochain<br/><em>mois.</em></h2>
<p class="contact-sub">La commande est définie avant l'achat. Aucune surprise. Juste du contenu qui travaille pour vous chaque semaine.</p>
<div class="contact-meta">
<div class="cm"><span class="cm-k">Localisation</span><span class="cm-v">Phnom Penh, Cambodge</span></div>
<div class="cm"><span class="cm-k">Réponse</span><span class="cm-v">Sous 24h</span></div>
<div class="cm"><span class="cm-k">Démarrage</span><span class="cm-v">Sous 72h après validation</span></div>
<div class="cm"><span class="cm-k">Formats</span><span class="cm-v">Instagram · TikTok · YouTube · Facebook</span></div>
</div>
</div>
<div class="contact-form rv d1">
<div class="cf">
<label>Votre nom</label>
<input type="text" placeholder="Nom & prénom"/>
</div>
<div class="cf">
<label>Votre activité</label>
<input type="text" placeholder="Restaurant, hôtel, marque, artiste..."/>
</div>
<div class="cf">
<label>Pack souhaité</label>
<select>
<option>Extra Token — 1 token · 290$</option>
<option>Starter Pack — 4 tokens · 590$</option>
<option selected>Growth Pack — 10 tokens · 990$</option>
<option>Formule Partenaire — Sur devis</option>
</select>
</div>
<div class="cf">
<label>Votre message</label>
<textarea placeholder="Décrivez votre projet, vos objectifs du mois, vos attentes..."></textarea>
</div>
<button class="cf-submit">Envoyer la demande →</button>
</div>
</div>
</section>
<footer>
<span class="f-logo">Krussa<sup>Pro</sup> Creative</span>
<div class="f-links">
<a href="#formats">Formats</a>
<a href="#tokens">Tokens</a>
<a href="#processus">Processus</a>
<a href="#contact">Contact</a>
</div>
<span class="f-copy">© 2026 Krussa Pro Creative — Phnom Penh</span>
</footer>
<script>
const cur=document.getElementById('cur');
const fol=document.getElementById('fol');
let mx=0,my=0,fx=0,fy=0;
document.addEventListener('mousemove',e=>{
mx=e.clientX;my=e.clientY;
cur.style.left=mx+'px';cur.style.top=my+'px';
});
(function loop(){
fx+=(mx-fx)*.11;fy+=(my-fy)*.11;
fol.style.left=fx+'px';fol.style.top=fy+'px';
requestAnimationFrame(loop);
})();
const obs=new IntersectionObserver(entries=>{
entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('on');});
},{threshold:.1});
document.querySelectorAll('.rv').forEach(el=>obs.observe(el));
</script>
</body>
</html>