@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --tools-ink:#171412;
  --tools-paper:#fbf8f6;
  --tools-white:#fffdfb;
  --tools-muted:#776c66;
  --tools-line:#dfd4ce;
  --tools-blush:#eadbd3;
  --tools-rose:#aa8575;
  --tools-dark:#1b1817;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.tools-hub{background:var(--tools-paper);color:var(--tools-ink);font-family:Inter,Arial,sans-serif}
.tools-hub main{overflow:hidden}

.tools-kicker{
  color:#8b756a;
  font-size:9px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.tools-hero{
  width:min(1280px,calc(100% - 9vw));
  min-height:520px;
  margin:44px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);
  border:1px solid var(--tools-line);
  background:var(--tools-white);
}

.tools-hero-copy{
  padding:78px clamp(42px,6vw,88px) 72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.tools-hero h1{
  max-width:820px;
  margin:18px 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(58px,7.2vw,106px);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:.78;
}
.tools-hero h1 em{color:var(--tools-rose);font-weight:400}
.tools-hero-copy>p{
  max-width:650px;
  margin:32px 0 0;
  color:#685f5a;
  font-size:13px;
  line-height:1.85;
}

.tools-hero-side{
  position:relative;
  min-height:440px;
  padding:54px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-left:1px solid var(--tools-line);
  background:
    radial-gradient(circle at 76% 22%,rgba(255,255,255,.85),transparent 19%),
    linear-gradient(145deg,#d8bfb3 0%,#eee0d9 58%,#c9a99a 100%);
}
.tools-orbit{position:absolute;inset:0;pointer-events:none}
.tools-orbit:before,.tools-orbit:after,.tools-orbit span{
  content:"";position:absolute;border:1px solid rgba(92,69,58,.15);border-radius:50%
}
.tools-orbit:before{width:370px;height:370px;right:-120px;top:-112px}
.tools-orbit:after{width:260px;height:260px;right:-38px;top:-30px}
.tools-orbit span{width:150px;height:150px;right:42px;top:29px}
.tools-orbit i{position:absolute;width:7px;height:7px;right:112px;top:101px;border-radius:50%;background:#8e7164}
.tools-status{position:relative;z-index:1;color:#5e4f48}
.tools-status>span{display:block;margin-bottom:11px;font-size:8px;letter-spacing:.18em;text-transform:uppercase}
.tools-status strong{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:100px;font-weight:400;line-height:.7}
.tools-status p{margin:15px 0 0;font-family:"Cormorant Garamond",Georgia,serif;font-size:25px}

.tools-catalogue{width:min(1280px,calc(100% - 9vw));margin:96px auto 112px}
.tools-section-head{
  margin-bottom:34px;
  padding-bottom:28px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  border-bottom:1px solid var(--tools-line);
}
.tools-section-head h2{
  margin:9px 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(38px,4vw,61px);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:.95;
}
.tools-section-head>p{max-width:390px;margin:0;color:var(--tools-muted);font-size:11px;line-height:1.7;text-align:right}

.tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tools-card{
  min-width:0;
  min-height:610px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--tools-line);
  background:var(--tools-white);
  color:var(--tools-ink);
  text-decoration:none;
  overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
a.tools-card:hover{transform:translateY(-5px);border-color:#c9b8af;box-shadow:0 18px 45px rgba(40,29,24,.07)}
.tools-card-visual{
  position:relative;
  height:270px;
  flex:0 0 270px;
  overflow:hidden;
  border-bottom:1px solid var(--tools-line);
}
.tools-card-body{padding:30px 30px 32px;display:flex;flex:1;flex-direction:column}
.tools-card-meta{display:flex;justify-content:space-between;gap:20px;color:#8a7d76;font-size:8px;letter-spacing:.13em;text-transform:uppercase}
.tools-card-meta span:first-child{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;letter-spacing:0;line-height:.7;color:#6b5e58}
.tools-card h3{margin:28px 0 12px;font-family:"Cormorant Garamond",Georgia,serif;font-size:52px;font-weight:500;letter-spacing:-.025em;line-height:.9}
.tools-card-body>p{margin:0;color:#6b625d;font-size:11px;line-height:1.8}
.tools-tags{margin:24px 0 30px;display:flex;flex-wrap:wrap;gap:7px}
.tools-tags span{padding:6px 9px;border:1px solid #ddd1ca;color:#796d66;font-size:7px;letter-spacing:.1em;text-transform:uppercase}
.tools-enter{margin-top:auto;padding-top:20px;border-top:1px solid #e4dad5;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.tools-enter b{margin-left:6px;font-size:13px;font-weight:400}
.tools-enter.muted{color:#a29690}

.tools-card-scribe .tools-card-visual{
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.72),transparent 24%),
    linear-gradient(145deg,#e9d7cf,#caa99a);
}
.scribe-letter{
  position:absolute;left:28px;bottom:-31px;
  color:rgba(74,52,43,.72);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:270px;font-style:italic;line-height:1
}
.scribe-line{position:absolute;right:31px;height:1px;background:rgba(83,59,49,.25)}
.scribe-line.l1{top:80px;width:38%}.scribe-line.l2{top:119px;width:50%}.scribe-line.l3{top:158px;width:31%}
.tools-card-scribe .tools-card-visual:after{content:"WRITING SYSTEM";position:absolute;right:27px;bottom:24px;color:#6f574c;font-size:7px;letter-spacing:.22em;writing-mode:vertical-rl}

.tools-card-video .tools-card-visual{background:var(--tools-dark)}
.tools-card-video .tools-card-visual:before{content:"";position:absolute;inset:23px;border:1px solid rgba(255,255,255,.09)}
.video-disc{position:absolute;width:112px;height:112px;left:50%;top:49%;display:grid;place-items:center;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.44);border-radius:50%;color:#f2e6df}
.video-disc:before,.video-disc:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.11);border-radius:50%}
.video-disc:before{width:158px;height:158px}.video-disc:after{width:204px;height:204px}
.video-disc span{margin-left:4px;font-size:18px}
.video-wave{position:absolute;left:31px;right:31px;bottom:25px;height:27px;display:flex;align-items:center;justify-content:space-between;gap:7px}
.video-wave i{width:1px;background:#d6b8aa;opacity:.66}
.video-wave i:nth-child(1),.video-wave i:nth-child(9){height:5px}.video-wave i:nth-child(2),.video-wave i:nth-child(8){height:12px}.video-wave i:nth-child(3),.video-wave i:nth-child(7){height:19px}.video-wave i:nth-child(4),.video-wave i:nth-child(6){height:10px}.video-wave i:nth-child(5){height:26px}

.tools-card-soon{background:#f6f0ed;color:#81736c}
.tools-card-soon .tools-card-visual{background:repeating-linear-gradient(135deg,#f3ece8 0,#f3ece8 12px,#f7f2ef 12px,#f7f2ef 24px)}
.tools-card-soon .tools-card-body{opacity:.78}
.soon-rings{position:absolute;width:170px;height:170px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #cdbdb5;border-radius:50%;display:grid;place-items:center}
.soon-rings span,.soon-rings i{position:absolute;border:1px solid #d7c9c2;border-radius:50%}
.soon-rings span{width:120px;height:120px}.soon-rings i{width:66px;height:66px}.soon-rings b{font-family:"Cormorant Garamond",Georgia,serif;font-size:38px;font-weight:400;color:#a79085}

.tools-note{
  width:min(1280px,calc(100% - 9vw));
  margin:0 auto 112px;
  padding:36px 0;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:40px;
  align-items:start;
  border-top:1px solid var(--tools-line);
  border-bottom:1px solid var(--tools-line);
}
.tools-note span{color:#8c7b72;font-size:8px;letter-spacing:.18em;text-transform:uppercase}
.tools-note p{max-width:800px;margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(25px,3vw,42px);line-height:1.12}

@media(max-width:1000px){
  .tools-hero{grid-template-columns:1fr}.tools-hero-side{min-height:300px;border-left:0;border-top:1px solid var(--tools-line)}
  .tools-grid{grid-template-columns:1fr 1fr}.tools-card-soon{grid-column:1/-1;min-height:500px}.tools-card-soon .tools-card-visual{height:220px;flex-basis:220px}
}
@media(max-width:700px){
  .tools-hero,.tools-catalogue,.tools-note{width:calc(100% - 32px)}
  .tools-hero{margin-top:24px}.tools-hero-copy{padding:54px 28px}.tools-hero h1{font-size:58px}.tools-hero-side{padding:32px;min-height:250px}
  .tools-catalogue{margin:68px auto 76px}.tools-section-head{align-items:flex-start;flex-direction:column;gap:15px}.tools-section-head>p{text-align:left}
  .tools-grid{grid-template-columns:1fr}.tools-card,.tools-card-soon{grid-column:auto;min-height:570px}.tools-card-visual,.tools-card-soon .tools-card-visual{height:240px;flex-basis:240px}
  .tools-note{margin-bottom:76px;grid-template-columns:1fr;gap:18px}
}

/* 03 · ORACLE */
.tools-card-oracle .tools-card-visual{background:radial-gradient(circle at 50% 48%,#5a4442 0,#352828 42%,#211a1a 78%)}
.tools-card-oracle .tools-card-visual:before{content:"";position:absolute;inset:19px;border:1px solid rgba(225,195,174,.15)}
.oracle-card-mini{position:absolute;top:50%;width:102px;height:158px;display:grid;place-items:center;border:1px solid rgba(222,187,163,.48);background:#2c2223;color:#d1ad91;box-shadow:0 12px 24px #0004;transform-origin:50% 100%}
.oracle-card-mini:before,.oracle-card-mini:after{content:"";position:absolute;border:1px solid rgba(222,187,163,.16);border-radius:50%}.oracle-card-mini:before{width:58px;height:58px}.oracle-card-mini:after{width:82px;height:82px}.oracle-card-mini span{position:relative;z-index:2;font-family:Georgia,serif;font-size:23px}.oracle-card-mini.oc1{left:20%;transform:translateY(-45%) rotate(-11deg)}.oracle-card-mini.oc2{left:50%;z-index:2;transform:translate(-50%,-52%)}.oracle-card-mini.oc3{right:20%;transform:translateY(-45%) rotate(11deg)}
@media(max-width:1000px) and (min-width:701px){.tools-card-oracle{grid-column:1/-1;min-height:500px}.tools-card-oracle .tools-card-visual{height:220px;flex-basis:220px}.oracle-card-mini{height:132px;width:88px}.oracle-card-mini.oc1{left:31%}.oracle-card-mini.oc3{right:31%}}